diff --git a/src/components/AppleControlBtn/index.vue b/src/components/AppleControlBtn/index.vue
index a1fe5ed7..26684db0 100644
--- a/src/components/AppleControlBtn/index.vue
+++ b/src/components/AppleControlBtn/index.vue
@@ -4,7 +4,7 @@
diff --git a/src/styles/common/_dark.scss b/src/styles/common/_dark.scss
index b3ea51d0..8f7975e1 100644
--- a/src/styles/common/_dark.scss
+++ b/src/styles/common/_dark.scss
@@ -18,5 +18,7 @@ $dark: (
filter-color: $--filter-color-login-dark,
// 物料市场背景
items-top-bg:
- linear-gradient(180deg, $--color-dark-bg-1, rgba(23, 23, 26, 0))
+ linear-gradient(180deg, $--color-dark-bg-1, rgba(23, 23, 26, 0)),
+ // hover 边框颜色
+ hover-border-color: #55606e,
);
diff --git a/src/styles/common/_light.scss b/src/styles/common/_light.scss
index 98319ae9..efd66349 100644
--- a/src/styles/common/_light.scss
+++ b/src/styles/common/_light.scss
@@ -17,5 +17,7 @@ $light: (
linear-gradient(90deg, transparent 14px, $--color-dark-bg-5 0)
),
//毛玻璃
- filter-color: $--filter-color-login-light
+ filter-color: $--filter-color-login-light,
+ // hover 边框颜色
+ hover-border-color: $--color-light-fill-1
);
diff --git a/src/styles/common/mixins/mixins.scss b/src/styles/common/mixins/mixins.scss
index 0ab68436..88f55771 100644
--- a/src/styles/common/mixins/mixins.scss
+++ b/src/styles/common/mixins/mixins.scss
@@ -65,3 +65,10 @@
border-color: themed($target);
}
}
+
+//获取边框颜色
+@mixin hover-border-color($target) {
+ @include themeify {
+ border: 1px solid themed($target);
+ }
+}
diff --git a/src/styles/common/style.scss b/src/styles/common/style.scss
index 414af8ef..91fb84cc 100644
--- a/src/styles/common/style.scss
+++ b/src/styles/common/style.scss
@@ -44,27 +44,51 @@
// todo 使用 scss 循环写一套完整的
// margin
.go-mt-0 {
- margin-top: 0;
+ margin-top: 0!important;
}
.go-mb-0 {
- margin-bottom: 0;
+ margin-bottom: 0!important;
+}
+.go-ml-0 {
+ margin-left: 0!important;
}
-.go-mx-0 {
+.go-mr-0 {
+ margin-right: 0!important;
+}
+
+.go-my-0 {
@extend .go-mt-0;
@extend .go-mb-0;
}
+.go-mx-0 {
+ @extend .go-ml-0;
+ @extend .go-mr-0;
+}
+
.go-pt-0 {
- padding-top: 0;
+ padding-top: 0!important;
}
.go-pb-0 {
- padding-bottom: 0;
+ padding-bottom: 0!important;
+}
+.go-pl-0 {
+ padding-left: 0!important;
}
-.go-px-0 {
+.go-pr-0 {
+ padding-right: 0!important;
+}
+
+.go-py-0 {
@extend .go-pt-0;
@extend .go-pb-0;
}
+
+.go-px-0 {
+ @extend .go-pl-0;
+ @extend .go-pr-0;
+}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 12b22980..9690ad91 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,6 +1,7 @@
import { h } from 'vue'
import { NIcon } from 'naive-ui'
import screenfull from 'screenfull'
+import debounce from 'lodash/debounce'
/**
* * 生成一个用不重复的ID
@@ -28,6 +29,7 @@ export const renderIcon = (icon: any, set = {}) => {
export const requireUrl = (path: string, name: string) => {
return new URL(`${path}/${name}`, import.meta.url).href
}
+
/**
* * 获取错误处理图片，默认 404 图
* @param path
@@ -36,7 +38,10 @@ export const requireUrl = (path: string, name: string) => {
*/
export const requireFallbackImg = (path?: string, name?: string) => {
const url = path && name
- return new URL(url?`${path}/${name}`: '../assets/images/exception/image-404.png', import.meta.url).href
+ return new URL(
+ url ? `${path}/${name}` : '../assets/images/exception/image-404.png',
+ import.meta.url
+ ).href
}
export const screenfullFn = (isFullscreen?: boolean, isEnabled?: boolean) => {
@@ -53,3 +58,36 @@ export const screenfullFn = (isFullscreen?: boolean, isEnabled?: boolean) => {
// TODO lang
window['$message'].warning('您的浏览器不支持全屏功能！')
}
+
+/**
+ * * 挂载监听
+ * @returns url
+ */
+export const goAddEventListener = (
+ target: EventTarget,
+ type: K,
+ listener: EventListenerOrEventListenerObject,
+ options?: boolean | AddEventListenerOptions | undefined
+) => {
+ if(!target) return
+ target.addEventListener(
+ type,
+ debounce(listener, 300, {
+ leading: true,
+ trailing: false
+ }),
+ options
+ )
+}
+/**
+ * * 卸载监听
+ * @returns url
+ */
+export const goRemoveEventListener = (
+ target: EventTarget,
+ type: K,
+ listener: EventListenerOrEventListenerObject
+) => {
+ if(!target) return
+ target.removeEventListener(type, listener)
+}
diff --git a/src/views/project/items/components/Card/index.vue b/src/views/project/items/components/Card/index.vue
index 8b8e96ea..50f2cf26 100644
--- a/src/views/project/items/components/Card/index.vue
+++ b/src/views/project/items/components/Card/index.vue
@@ -12,7 +12,7 @@
/>
-
+
{
$contentHeight: 200px;
@include go('items-list-card') {
position: relative;
+ border-radius: $--border-radius-base;
+ border: 1px solid rgba(0, 0, 0, 0);
+ @extend .go-transition;
+ &:hover {
+ @include hover-border-color('hover-border-color');
+ }
.list-content {
margin-top: 20px;
margin-bottom: 5px;
+ cursor: pointer;
border-radius: $--border-radius-base;
@include background-point('background-point');
@extend .go-point-bg;
diff --git a/src/views/project/items/components/List/hooks/useData.hook.ts b/src/views/project/items/components/List/hooks/useData.hook.ts
new file mode 100644
index 00000000..3ece4143
--- /dev/null
+++ b/src/views/project/items/components/List/hooks/useData.hook.ts
@@ -0,0 +1,53 @@
+import { ref, Ref } from 'vue'
+import { goDialog } from '@/utils'
+import { DialogEnum } from '@/enums/pluginEnum'
+
+// 数据初始化
+export const useDataListInit = () => {
+ const list = ref([
+ {
+ id: 1,
+ title: '物料1',
+ release: true
+ },
+ {
+ id: 2,
+ title: '物料2',
+ release: false
+ },
+ {
+ id: 3,
+ title: '物料3',
+ release: false
+ },
+ {
+ id: 4,
+ title: '物料4',
+ release: false
+ },
+ {
+ id: 5,
+ title: '物料5',
+ release: false
+ }
+ ])
+
+ // 删除
+ const deleteHandle = (cardData: object, index: number) => {
+ goDialog({
+ type: DialogEnum.delete,
+ promise: true,
+ onPositiveCallback: () =>
+ new Promise(res => setTimeout(() => res(1), 1000)),
+ promiseResCallback: (e: any) => {
+ window.$message.success('删除成功')
+ list.value.splice(index, 1)
+ }
+ })
+ }
+
+ return {
+ list,
+ deleteHandle
+ }
+}
diff --git a/src/views/project/items/components/List/hooks/useModal.hook.ts b/src/views/project/items/components/List/hooks/useModal.hook.ts
new file mode 100644
index 00000000..4bc1c79a
--- /dev/null
+++ b/src/views/project/items/components/List/hooks/useModal.hook.ts
@@ -0,0 +1,27 @@
+import { ref, Ref } from 'vue'
+
+export const useModalDataInit = () => {
+ const modalShow = ref(false)
+ const modalData = ref
-
+