From 7a64727e2d16c22979a1209b8ad051cd8faf621e Mon Sep 17 00:00:00 2001 From: "X.Mo" Date: Sun, 29 Dec 2024 16:45:42 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=AF=B9=E8=AF=9D=E6=A1=86?= =?UTF-8?q?=E5=AE=BD=E5=BA=A6=E8=AE=BE=E7=BD=AE=E5=8F=8A=E8=B5=84=E6=BA=90?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E4=BA=A4=E4=BA=92=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/components/ma-dialog/index.vue | 10 +- .../components/ma-resource-picker/panel.vue | 141 ++++++++++-------- .../base/views/permission/role/index.vue | 1 + .../base/views/permission/user/index.vue | 1 + 4 files changed, 89 insertions(+), 64 deletions(-) diff --git a/web/src/components/ma-dialog/index.vue b/web/src/components/ma-dialog/index.vue index 2f07d92f..a4a95d3d 100644 --- a/web/src/components/ma-dialog/index.vue +++ b/web/src/components/ma-dialog/index.vue @@ -66,19 +66,19 @@ onMounted(() => { const { width } = entry.contentRect // xs if (width < 768) { - dialogWidth.value = '90%' + dialogWidth.value = (attrs?.xsWidth as string) ?? '90%' } // sm if (width >= 768 && width < 992) { - dialogWidth.value = '75%' + dialogWidth.value = (attrs?.smWidth as string) ?? '75%' } // md if (width >= 992 && width < 1200) { - dialogWidth.value = '65%' + dialogWidth.value = (attrs?.mdWidth as string) ?? '65%' } - // md + // lg if (width >= 1200 && width < 1920) { - dialogWidth.value = '55%' + dialogWidth.value = (attrs?.lgWidth as string) ?? '55%' } }) }) diff --git a/web/src/components/ma-resource-picker/panel.vue b/web/src/components/ma-resource-picker/panel.vue index a8fec072..7967ac8c 100644 --- a/web/src/components/ma-resource-picker/panel.vue +++ b/web/src/components/ma-resource-picker/panel.vue @@ -365,58 +365,51 @@ function executeContextmenu(e: MouseEvent, resource: Resource) { onMounted(async () => { await getResourceList() - const nodes = document.getElementsByClassName('pointer') - const activateRecord = Array.from({ length: nodes.length }).fill(false) + const apps = document.getElementsByClassName('res-app') as HTMLCollectionOf - for (let i = 0; i < nodes.length; i++) { - const node = nodes[i] - - node.parentElement.addEventListener('mouseover', () => { + for (let i = 0; i < apps.length; i++) { + const app = apps[i] as HTMLDivElement + app?.parentElement?.addEventListener('mouseover', () => { const index = i - node.className = 'pointer main-effect' + app.className = 'res-app main-effect' if (index === 0) { - nodes[1].className = 'pointer second-effect' - nodes[2].className = 'pointer third-effect' + if (apps[1]) { + apps[1].className = 'res-app second-effect' + } + if (apps[2]) { + apps[2].className = 'res-app third-effect' + } } - else if (index === nodes.length - 1) { - // 鼠标悬浮在最右侧黑色方块上 - // 和最左侧一样的道理，只是顺序是从右往左的 - nodes[index - 1].className = 'pointer second-effect' - nodes[index - 2].className = 'pointer third-effect' + else if (index === apps.length - 1) { + if (apps[index - 1]) { + apps[index - 1].className = 'res-app second-effect' + } + if (apps[index - 2]) { + apps[index - 2].className = 'res-app third-effect' + } } else { - if (nodes[index - 1]) { - nodes[index - 1].className = 'pointer second-effect' + if (apps[index - 1]) { + apps[index - 1].className = 'res-app second-effect' } - if (nodes[index + 1]) { - nodes[index + 1]!.className = 'pointer second-effect' + if (apps[index + 1]) { + apps[index + 1].className = 'res-app second-effect' } - if (index - 2 > -1 && nodes[index - 2]) { - nodes[index - 2].className = 'pointer third-effect' + if (index - 2 > -1 && apps[index - 2]) { + apps[index - 2].className = 'res-app third-effect' } - if (index + 2 < nodes.length && nodes[index + 2]) { - nodes[index + 2].className = 'pointer third-effect' + if (index + 2 < apps.length && apps[index + 2]) { + apps[index + 2].className = 'res-app third-effect' } } }) - node.parentElement.addEventListener('mouseout', () => { - for (const app of nodes) { - app.className = 'app' - } - }) - - node.addEventListener('click', () => { - const index = i - - // 已经点击过的黑色方块，就不用再处理了 - if (!activateRecord[index]) { - activateRecord[index] = true - node.parentElement.className = 'ma-resource-dock-item activate' - node.className = 'pointer main-effect animation-once' + app?.parentElement?.addEventListener('mouseout', () => { + for (const app of apps) { + app.className = 'res-app' } }) } @@ -424,8 +417,10 @@ onMounted(async () => { onUnmounted(() => { // 取消监听 - document.querySelector('.ma-resource-dock')?.removeEventListener('mouseleave', () => {}) - document.querySelectorAll('.ma-resource-dock li').forEach(li => li.removeEventListener('mousemove', () => {})) + document.querySelectorAll('.ma-resource-dock .res-app').forEach((app) => { + app.removeEventListener('mousemove', () => {}) + app.removeEventListener('mouseout', () => {}) + }) }) @@ -551,26 +546,35 @@ onUnmounted(() => {
-
-
-
-
-
+
+
+ +
-
-
+
+
+ +
-
-
+
+
+ +
-
-
+
+
+ +
-
-
+
+
+ +
-
-
+
+
+ +
@@ -591,16 +595,15 @@ onUnmounted(() => { --resource-item-size:120px; .ma-resource-dock { - --scale: 1.2; @apply absolute bg-gray-2 dark-bg-dark-9 - rounded-xl p-2 px-2.5 flex items-center justify-center gap-x-2 + rounded-xl p-1 flex items-center justify-center gap-x-0.5 ; - height: 47px; + height: 40px; left: 50%; transform: translate(-50%, 0%); bottom: 0; - .ma-resource-dock-item { + .res-app-container { @apply relative h-40px flex items-center; } @@ -610,8 +613,16 @@ onUnmounted(() => { @apply block b-2 b-solid b-white rounded-full w-0 h-0 absolute bottom-2px left-50%; } - .pointer { - @apply w-40px h-40px b-1 b-solid b-black bg-black rounded-10px transition-all duration-500; + .res-app { + @apply w-40px h-40px shadow-inset shadow-md rounded-10px transition-all duration-300 flex items-center justify-center + bg-gray-3 dark-bg-dark-4 + dark-shadow-dark-9 + ; + } + + .res-app-icon { + @apply w-55px h-55px !text-2xl transform-all duration-300 text-dark-1 dark-text-gray-2 + ; } // 主放大效果 @@ -621,6 +632,10 @@ onUnmounted(() => { transform: translateY(-40px); } + .main-effect .res-app-icon { + @apply w-80px h-80px !text-[60px]; + } + // 次放大效果 .second-effect { width: 60px; @@ -628,12 +643,20 @@ onUnmounted(() => { transform: translateY(-20px); } + .second-effect .res-app-icon { + @apply w-60px h-60px !text-[40px]; + } + // 最次放大效果 .third-effect { width: 50px; height: 50px; transform: translateY(-10px); } + + .third-effect .res-app-icon { + @apply w-50px h-50px !text-[30px]; + } } } .resource-item{ diff --git a/web/src/modules/base/views/permission/role/index.vue b/web/src/modules/base/views/permission/role/index.vue index 07776c11..515dd941 100644 --- a/web/src/modules/base/views/permission/role/index.vue +++ b/web/src/modules/base/views/permission/role/index.vue @@ -35,6 +35,7 @@ const msg = useMessage() // 弹窗配置 const maDialog: UseDialogExpose = useDialog({ + lgWidth: '550px', // 保存数据 ok: ({ formType }, okLoadingState: (state: boolean) => void) => { okLoadingState(true) diff --git a/web/src/modules/base/views/permission/user/index.vue b/web/src/modules/base/views/permission/user/index.vue index 89385ffc..b8932bb3 100644 --- a/web/src/modules/base/views/permission/user/index.vue +++ b/web/src/modules/base/views/permission/user/index.vue @@ -35,6 +35,7 @@ const msg = useMessage() // 弹窗配置 const maDialog: UseDialogExpose = useDialog({ + lgWidth: '750px', // 保存数据 ok: ({ formType }, okLoadingState: (state: boolean) => void) => { okLoadingState(true)