Skip to content

Commit

Permalink
优化对话框宽度设置及资源选择器交互效果
Browse files Browse the repository at this point in the history
  • Loading branch information
@kanyxmo
kanyxmo committed Dec 29, 2024
1 parent f782438 commit 7a64727
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 64 deletions.
10 changes: 5 additions & 5 deletions web/src/components/ma-dialog/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%'
}
})
})
Expand Down
141 changes: 82 additions & 59 deletions web/src/components/ma-resource-picker/panel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -365,67 +365,62 @@ 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<HTMLDivElement>

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'
}
})
}
})

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', () => {})
})
})
</script>

Expand Down Expand Up @@ -551,26 +546,35 @@ onUnmounted(() => {
</div>

<div class="ma-resource-dock">
<div class="ma-resource-dock-item">
<div class="pointer" />
</div>
<div class="ma-resource-dock-item">
<div class="pointer" />
<div class="res-app-container">
<div class="res-app">
<ma-svg-icon name="solar:upload-linear" class="res-app-icon" />
</div>
</div>
<div class="ma-resource-dock-item">
<div class="pointer" />
<div class="res-app-container">
<div class="res-app">
<ma-svg-icon name="solar:upload-linear" class="res-app-icon" />
</div>
</div>
<div class="ma-resource-dock-item">
<div class="pointer" />
<div class="res-app-container">
<div class="res-app">
<ma-svg-icon name="solar:upload-linear" class="res-app-icon" />
</div>
</div>
<div class="ma-resource-dock-item">
<div class="pointer" />
<div class="res-app-container">
<div class="res-app">
<ma-svg-icon name="solar:upload-linear" class="res-app-icon" />
</div>
</div>
<div class="ma-resource-dock-item">
<div class="pointer" />
<div class="res-app-container">
<div class="res-app">
<ma-svg-icon name="solar:upload-linear" class="res-app-icon" />
</div>
</div>
<div class="ma-resource-dock-item">
<div class="pointer" />
<div class="res-app-container">
<div class="res-app">
<ma-svg-icon name="solar:upload-linear" class="res-app-icon" />
</div>
</div>
</div>
</div>
Expand All @@ -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;
}

Expand All @@ -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
;
}

// 主放大效果
Expand All @@ -621,19 +632,31 @@ onUnmounted(() => {
transform: translateY(-40px);
}

.main-effect .res-app-icon {
@apply w-80px h-80px !text-[60px];
}

// 次放大效果
.second-effect {
width: 60px;
height: 60px;
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{
Expand Down
1 change: 1 addition & 0 deletions web/src/modules/base/views/permission/role/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ const msg = useMessage()

// 弹窗配置
const maDialog: UseDialogExpose = useDialog({
lgWidth: '550px',
// 保存数据
ok: ({ formType }, okLoadingState: (state: boolean) => void) => {
okLoadingState(true)
Expand Down
1 change: 1 addition & 0 deletions web/src/modules/base/views/permission/user/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ const msg = useMessage()

// 弹窗配置
const maDialog: UseDialogExpose = useDialog({
lgWidth: '750px',
// 保存数据
ok: ({ formType }, okLoadingState: (state: boolean) => void) => {
okLoadingState(true)
Expand Down

0 comments on commit 7a64727

Please sign in to comment.