refactor: replace common confirm dialogs with maintenance CRUD dialogs and streamline form handling in MasterDetailMntC.vue and SingleRecordMnt.vue
This commit is contained in:
skytek_xinliang
@@ -1,252 +1,62 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<v-navigation-drawer v-model="drawer">
|
||||
<v-list v-model:opened="opened" color="primary" density="compact" prepend-gap="8">
|
||||
<!-- 收藏項目區塊 -->
|
||||
<template v-if="favoriteItems?.length">
|
||||
<v-list-subheader class="bg-primary-variant" color="on-primary">
|
||||
<div class="d-flex align-center w-100">
|
||||
<span class="flex-grow-1">{{ favoriteHeaderLabel }}</span>
|
||||
<v-btn
|
||||
density="compact" :icon="mdiUnfoldLessHorizontal" :ripple="false" variant="text"
|
||||
@click.stop="collapseFavoriteGroups" />
|
||||
</div>
|
||||
</v-list-subheader>
|
||||
<template v-for="item in favoriteItems" :key="item.path ?? item.title">
|
||||
<!-- 第一層：有子項目的群組 -->
|
||||
<v-list-group v-if="item.subItems?.length" :value="`fav:${item.path ?? item.title}`">
|
||||
<template #activator="{ props }">
|
||||
<v-list-item v-bind="props" :link="isNavigable(item)" :to="isNavigable(item) ? item.path : undefined">
|
||||
<!-- 第一層 title（父層） -->
|
||||
<template #title>
|
||||
<span class="text-body-2 nav-text-overflow">{{ item.title }}</span>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<template v-for="subItem in item.subItems" :key="subItem.path ?? subItem.title">
|
||||
<!-- 第二層：無子項目的單一項目 -->
|
||||
<v-list-item :link="!!subItem.path" :to="subItem.path">
|
||||
<!-- 第二層 title（葉節點） -->
|
||||
<template #title>
|
||||
<v-tooltip location="end" :text="subItem.title">
|
||||
<template #activator="{ props: tooltipProps }">
|
||||
<span v-bind="tooltipProps" class="text-body-2 nav-text-overflow">{{ subItem.title }}</span>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-list-group>
|
||||
<!-- 第一層：無子項目的單一項目 -->
|
||||
<v-list-item v-else :link="!!item.path" :to="item.path">
|
||||
<!-- 第一層 title（葉節點） -->
|
||||
<template #title>
|
||||
<v-tooltip location="end" :text="item.title">
|
||||
<template #activator="{ props: tooltipProps }">
|
||||
<span v-bind="tooltipProps" class="text-body-2 nav-text-overflow">{{ item.title }}</span>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<v-list-subheader class="bg-primary" color="on-primary">
|
||||
<div class="d-flex align-center w-100">
|
||||
<span class="flex-grow-1">{{ menuHeaderLabel }}</span>
|
||||
<v-btn
|
||||
density="compact" :icon="mdiUnfoldLessHorizontal" :ripple="false" variant="text"
|
||||
@click.stop="collapseMenuGroups" />
|
||||
</div>
|
||||
</v-list-subheader>
|
||||
<!-- 主選單區塊 -->
|
||||
<template v-for="item in menuItems" :key="item.path ?? item.title">
|
||||
<!-- 第一層：有子項目的群組 -->
|
||||
<v-list-group v-if="item.subItems?.length" :value="`menu:${item.path ?? item.title}`">
|
||||
<template #activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props" :link="isNavigable(item) && !!item.path"
|
||||
:to="isNavigable(item) ? item.path : undefined">
|
||||
<!-- 第一層 title（父層） -->
|
||||
<template #title>
|
||||
<span class="text-body-2 nav-text-overflow">{{ item.title }}</span>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<template v-for="subItem in item.subItems" :key="subItem.path ?? subItem.title">
|
||||
<!-- 第二層：有子項目的群組 -->
|
||||
<v-list-group
|
||||
v-if="subItem.subItems?.length"
|
||||
:value="`menu:${item.path ?? item.title}::${subItem.path ?? subItem.title}`">
|
||||
<template #activator="{ props: subProps }">
|
||||
<v-list-item
|
||||
v-bind="subProps" :link="isNavigable(subItem)"
|
||||
:to="isNavigable(subItem) ? subItem.path : undefined">
|
||||
<!-- 第二層 title（父層） -->
|
||||
<template #title>
|
||||
<span class="text-body-2 nav-text-overflow">{{ subItem.title }}</span>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
|
||||
<!-- 第三層：最底層項目 -->
|
||||
<v-list-item
|
||||
v-for="subSubItem in subItem.subItems" :key="subSubItem.path ?? subSubItem.title"
|
||||
:link="!!subSubItem.path" :to="subSubItem.path">
|
||||
<!-- 第三層 title（葉節點） -->
|
||||
<template #title>
|
||||
<v-tooltip location="end" :text="subSubItem.title">
|
||||
<template #activator="{ props: tooltipProps }">
|
||||
<span v-bind="tooltipProps" class="text-body-2 nav-text-overflow">{{ subSubItem.title }}</span>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list-group>
|
||||
|
||||
<!-- 第二層：無子項目的單一項目 -->
|
||||
<v-list-item v-else :link="!!subItem.path" :to="subItem.path">
|
||||
<!-- 第二層 title（葉節點） -->
|
||||
<template #title>
|
||||
<v-tooltip location="end" :text="subItem.title">
|
||||
<template #activator="{ props: tooltipProps }">
|
||||
<span v-bind="tooltipProps" class="text-body-2 nav-text-overflow">{{ subItem.title }}</span>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-list-group>
|
||||
<!-- 第一層：無子項目的單一項目 -->
|
||||
<v-list-item v-else :link="!!item.path" :to="item.path">
|
||||
<!-- 第一層 title（葉節點） -->
|
||||
<template #title>
|
||||
<v-tooltip location="end" :text="item.title">
|
||||
<template #activator="{ props: tooltipProps }">
|
||||
<span v-bind="tooltipProps" class="text-body-2 nav-text-overflow">{{ item.title }}</span>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<v-app-bar density="compact">
|
||||
<v-app-bar-nav-icon @click="drawer = !drawer" />
|
||||
<v-toolbar-title>{{ systemTitle }}</v-toolbar-title>
|
||||
<v-spacer />
|
||||
<v-tooltip location="bottom" :text="themeToggleLabel">
|
||||
<template #activator="{ props }">
|
||||
<v-btn v-bind="props" :aria-label="themeToggleLabel" :icon="mdiPalette" variant="text" @click="toggleTheme" />
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip location="bottom" :text="logoutLabel">
|
||||
<template #activator="{ props }">
|
||||
<v-btn v-bind="props" :aria-label="logoutLabel" :icon="mdiLogout" variant="text" @click="$emit('logout')" />
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</v-app-bar>
|
||||
|
||||
<v-main>
|
||||
<v-container class="pa-2" fluid height="100%">
|
||||
<slot></slot>
|
||||
</v-container>
|
||||
</v-main>
|
||||
</v-app>
|
||||
<SKAdminLayout
|
||||
:favorite-items="favoriteItems"
|
||||
:favorites-config="favoritesConfig"
|
||||
:menu-items="menuItems"
|
||||
:system-title="systemTitle"
|
||||
:theme-toggle-label="themeToggleLabel"
|
||||
:logout-label="logoutLabel"
|
||||
:features="features"
|
||||
@logout="$emit('logout')"
|
||||
@select="$emit('select', $event)"
|
||||
>
|
||||
<slot />
|
||||
</SKAdminLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { mdiLogout, mdiPalette, mdiUnfoldLessHorizontal } from '@mdi/js'
|
||||
import { computed, ref } from 'vue'
|
||||
import { useTheme } from 'vuetify'
|
||||
import { getNextThemeName } from '@/utils/theme'
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { AdminLayoutFavoritesConfig, AdminLayoutMenuItem } from './sk-admin-layout/types'
|
||||
import SKAdminLayout from './SKAdminLayout.vue'
|
||||
|
||||
defineEmits(['logout'])
|
||||
interface Props {
|
||||
systemTitle?: string
|
||||
themeToggleLabel?: string
|
||||
logoutLabel?: string
|
||||
favoriteHeaderLabel?: string
|
||||
favoriteItems?: AdminLayoutMenuItem[]
|
||||
menuItems?: AdminLayoutMenuItem[]
|
||||
}
|
||||
|
||||
defineProps({
|
||||
systemTitle: { type: String, default: '管理系統' },
|
||||
themeToggleLabel: { type: String, default: '切換主題' },
|
||||
logoutLabel: { type: String, default: '登出' },
|
||||
favoriteHeaderLabel: { type: String, default: '我的最愛' },
|
||||
menuHeaderLabel: { type: String, default: '選單' },
|
||||
favoriteItems: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
menuItems: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
systemTitle: '管理系統',
|
||||
themeToggleLabel: '切換主題',
|
||||
logoutLabel: '登出',
|
||||
favoriteHeaderLabel: '我的最愛',
|
||||
favoriteItems: () => [],
|
||||
menuItems: () => [
|
||||
{ title: '首頁', path: '/' },
|
||||
{ title: '設定', path: '/settings' },
|
||||
],
|
||||
},
|
||||
})
|
||||
|
||||
const drawer = ref(true)
|
||||
defineEmits<{
|
||||
logout: []
|
||||
select: [item: AdminLayoutMenuItem]
|
||||
}>()
|
||||
|
||||
const opened = ref([])
|
||||
|
||||
const theme = useTheme()
|
||||
|
||||
const availableThemeNames = computed(() =>
|
||||
Object.keys(theme.themes.value ?? {}).filter((name) => name.startsWith('theme'))
|
||||
)
|
||||
|
||||
function toggleTheme () {
|
||||
const names = availableThemeNames.value
|
||||
if (names.length === 0) return
|
||||
|
||||
const current = theme.global.name.value
|
||||
const next = getNextThemeName(names, current)
|
||||
if (!next) return
|
||||
theme.change(next)
|
||||
const features = {
|
||||
showThemeToggle: true,
|
||||
showFavorites: true,
|
||||
showBreadcrumb: false,
|
||||
showSearch: false,
|
||||
showToolbarActions: false,
|
||||
showUserInfo: false,
|
||||
}
|
||||
|
||||
function collapseFavoriteGroups () {
|
||||
opened.value = opened.value.filter((key) => !String(key).startsWith('fav:'))
|
||||
}
|
||||
|
||||
function collapseMenuGroups () {
|
||||
opened.value = opened.value.filter((key) => !String(key).startsWith('menu:'))
|
||||
}
|
||||
|
||||
const isNavigable = (item) => item?.navigable !== false
|
||||
const favoritesConfig = computed<AdminLayoutFavoritesConfig>(() => ({
|
||||
label: props.favoriteHeaderLabel,
|
||||
addLabel: props.favoriteHeaderLabel,
|
||||
showAdd: false,
|
||||
}))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.nav-text-overflow {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 確保 v-list-group 的 activator 也有 hover 效果 */
|
||||
:deep(.v-list-group > .v-list-item) {
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
:deep(.v-list-group > .v-list-item:hover) {
|
||||
background: rgb(var(--v-theme-on-surface-variant));
|
||||
color: rgb(var(--v-theme-on-surface));
|
||||
}
|
||||
|
||||
/* 為所有 v-list-item 加上 transition */
|
||||
:deep(.v-list-item) {
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
:deep(.v-navigation-drawer__content) {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
@supports not (scrollbar-gutter: stable) {
|
||||
:deep(.v-navigation-drawer__content) {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user