fix: 统一图库图标间距与提示
统一四个图库操作图标的间距，为布局按钮补充悬浮说明，并在移动端禁用全部 Popover。
This commit is contained in:
GouJ
@@ -16,7 +16,7 @@ import {
|
||||
NSelect,
|
||||
NTag
|
||||
} from 'naive-ui'
|
||||
import { computed, ref, watch, type Directive } from 'vue'
|
||||
import { computed, onScopeDispose, ref, watch, type Directive } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import {
|
||||
Search,
|
||||
@@ -122,6 +122,15 @@ const impactOptions = computed(() => {
|
||||
}))
|
||||
})
|
||||
const toolsOpen = ref(false)
|
||||
/** 移动端禁用纯图标按钮的悬浮说明，避免触摸操作弹出多余浮层。 */
|
||||
const isMobile = ref(false)
|
||||
if (typeof window !== 'undefined') {
|
||||
const mobileMedia = window.matchMedia('(max-width: 760px)')
|
||||
const syncMobile = () => (isMobile.value = mobileMedia.matches)
|
||||
syncMobile()
|
||||
mobileMedia.addEventListener('change', syncMobile)
|
||||
onScopeDispose(() => mobileMedia.removeEventListener('change', syncMobile))
|
||||
}
|
||||
/** 新批量回执到达时显示诊断，进入页面不自动遮挡图库。 */
|
||||
watch(
|
||||
() => session.value.receipt,
|
||||
@@ -568,68 +577,78 @@ async function showStaleForms() {
|
||||
/>
|
||||
<div class="form-image-display-controls">
|
||||
<span class="filter-result-count">{{ filtered.length }} 个形态</span>
|
||||
<div class="gallery-layout-switch" role="group" aria-label="图库显示方式">
|
||||
<NButton
|
||||
class="icon-button layout-option-button"
|
||||
:class="{ 'layout-option-active': layout === 'grid' }"
|
||||
size="small"
|
||||
:type="layout === 'grid' ? 'primary' : 'default'"
|
||||
:aria-pressed="layout === 'grid'"
|
||||
aria-label="网格布局"
|
||||
title="网格布局"
|
||||
@click="layout = 'grid'"
|
||||
>
|
||||
<template #icon><LayoutGrid :size="16" /></template>
|
||||
</NButton>
|
||||
<NButton
|
||||
class="icon-button layout-option-button"
|
||||
:class="{ 'layout-option-active': layout === 'masonry' }"
|
||||
size="small"
|
||||
:type="layout === 'masonry' ? 'primary' : 'default'"
|
||||
:aria-pressed="layout === 'masonry'"
|
||||
aria-label="瀑布流布局"
|
||||
title="瀑布流布局"
|
||||
@click="layout = 'masonry'"
|
||||
>
|
||||
<template #icon><Columns3 :size="16" /></template>
|
||||
</NButton>
|
||||
<!-- 四个纯图标按钮使用统一间距；桌面端通过 Popover 解释用途。 -->
|
||||
<div class="gallery-layout-switch" role="group" aria-label="图库视图与操作">
|
||||
<NPopover trigger="hover" placement="top" :disabled="isMobile">
|
||||
<template #trigger>
|
||||
<NButton
|
||||
class="icon-button layout-option-button"
|
||||
:class="{ 'layout-option-active': layout === 'grid' }"
|
||||
size="small"
|
||||
:type="layout === 'grid' ? 'primary' : 'default'"
|
||||
:aria-pressed="layout === 'grid'"
|
||||
aria-label="网格布局"
|
||||
@click="layout = 'grid'"
|
||||
>
|
||||
<template #icon><LayoutGrid :size="16" /></template>
|
||||
</NButton>
|
||||
</template>
|
||||
网格布局
|
||||
</NPopover>
|
||||
<NPopover trigger="hover" placement="top" :disabled="isMobile">
|
||||
<template #trigger>
|
||||
<NButton
|
||||
class="icon-button layout-option-button"
|
||||
:class="{ 'layout-option-active': layout === 'masonry' }"
|
||||
size="small"
|
||||
:type="layout === 'masonry' ? 'primary' : 'default'"
|
||||
:aria-pressed="layout === 'masonry'"
|
||||
aria-label="瀑布流布局"
|
||||
@click="layout = 'masonry'"
|
||||
>
|
||||
<template #icon><Columns3 :size="16" /></template>
|
||||
</NButton>
|
||||
</template>
|
||||
瀑布流布局
|
||||
</NPopover>
|
||||
<NPopover trigger="hover" placement="top" :disabled="isMobile">
|
||||
<template #trigger>
|
||||
<NButton
|
||||
class="icon-button"
|
||||
size="small"
|
||||
:disabled="query.loading.value || impact.query.loading.value"
|
||||
aria-label="刷新图库"
|
||||
@click="refreshAssets"
|
||||
>
|
||||
<template #icon>
|
||||
<RefreshCw
|
||||
:size="16"
|
||||
:class="{ 'animate-spin': query.loading.value }"
|
||||
/>
|
||||
</template>
|
||||
</NButton>
|
||||
</template>
|
||||
刷新图库
|
||||
</NPopover>
|
||||
<NPopover trigger="hover" placement="top" :disabled="isMobile">
|
||||
<template #trigger>
|
||||
<NButton
|
||||
class="icon-button"
|
||||
size="small"
|
||||
data-workspace-tools
|
||||
aria-label="批量生图"
|
||||
aria-haspopup="dialog"
|
||||
:aria-expanded="toolsOpen"
|
||||
@click="toolsOpen = true"
|
||||
>
|
||||
<template #icon><Settings2 :size="16" /></template>
|
||||
</NButton>
|
||||
</template>
|
||||
{{
|
||||
session.receipt || session.promptReceipt ? '批量生图（有回执）' : '批量生图'
|
||||
}}
|
||||
</NPopover>
|
||||
</div>
|
||||
<!-- 高频图库操作与显示方式连续排列；纯图标按钮通过 Popover 解释用途。 -->
|
||||
<NPopover trigger="hover" placement="top">
|
||||
<template #trigger>
|
||||
<NButton
|
||||
class="icon-button"
|
||||
size="small"
|
||||
:disabled="query.loading.value || impact.query.loading.value"
|
||||
aria-label="刷新图库"
|
||||
@click="refreshAssets"
|
||||
>
|
||||
<template #icon>
|
||||
<RefreshCw
|
||||
:size="16"
|
||||
:class="{ 'animate-spin': query.loading.value }"
|
||||
/>
|
||||
</template>
|
||||
</NButton>
|
||||
</template>
|
||||
刷新图库
|
||||
</NPopover>
|
||||
<NPopover trigger="hover" placement="top">
|
||||
<template #trigger>
|
||||
<NButton
|
||||
class="icon-button"
|
||||
size="small"
|
||||
data-workspace-tools
|
||||
aria-label="批量生图"
|
||||
aria-haspopup="dialog"
|
||||
:aria-expanded="toolsOpen"
|
||||
@click="toolsOpen = true"
|
||||
>
|
||||
<template #icon><Settings2 :size="16" /></template>
|
||||
</NButton>
|
||||
</template>
|
||||
{{ session.receipt || session.promptReceipt ? '批量生图（有回执）' : '批量生图' }}
|
||||
</NPopover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -920,7 +939,7 @@ async function showStaleForms() {
|
||||
@apply flex items-center justify-self-end gap-3;
|
||||
}
|
||||
.gallery-layout-switch {
|
||||
@apply flex items-center gap-1;
|
||||
@apply flex items-center gap-2;
|
||||
}
|
||||
/* 未选中的排版按钮保留浅灰底，和筛选容器区分，同时不覆盖选中项的绿色状态。 */
|
||||
.gallery-layout-switch .layout-option-button:not(.layout-option-active) {
|
||||
|
||||
Reference in New Issue
Block a user