linx6g/skt-vuetify-templates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor layout components for improved readability and consistency

Browse Source
This commit is contained in:
skytek_xinliang
2026-03-27 13:57:44 +08:00
parent 24f86c3fb5
commit 6e38211382
24 changed files with 235 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/base/SKTableActionBar.vue
+4 -4
View File
@@ -14,10 +14,10 @@
</v-btn>
<v-tooltip :disabled="!searchToggleTooltipText" location="top" :text="searchToggleTooltipText">
<template #activator="{ props }">
<template #activator="{ props: activatorProps }">
<v-btn
v-if="showSearchToggle"
v-bind="props"
v-bind="activatorProps"
density="comfortable"
icon
variant="text"
@@ -29,8 +29,8 @@
</v-tooltip>
<v-tooltip :disabled="!refreshTooltipText" location="top" :text="refreshTooltipText">
<template #activator="{ props }">
<v-btn v-bind="props" density="comfortable" icon variant="text" @click="$emit('refresh')">
<template #activator="{ props: activatorProps }">
<v-btn v-bind="activatorProps" density="comfortable" icon variant="text" @click="$emit('refresh')">
<v-icon :icon="mdiRefresh" />
</v-btn>
</template>
src/components/base/login/LoginToolBar.vue
+18 -9
View File
@@ -1,29 +1,38 @@
<template>
<div class="d-flex justify-end py-0 py-sm-2">
<v-btn
class="d-none d-md-block" color="grey-darken-1" :icon="mdiPaletteOutline" size="small" variant="text"
class="d-none d-md-block"
color="grey-darken-1"
:icon="mdiPaletteOutline"
size="small"
variant="text"
@click="toggleTheme"></v-btn>
<!-- <v-btn :icon="mdiDockWindow" variant="text" size="small" color="grey-darken-1" @click="handleToggleLayout"></v-btn> -->
<v-menu location="bottom end">
<template #activator="{ props: menuActivatorProps }">
<v-btn
v-bind="menuActivatorProps" color="grey-darken-1" :icon="mdiTranslate" size="small"
variant="text"></v-btn>
v-bind="menuActivatorProps"
color="grey-darken-1"
:icon="mdiTranslate"
size="small"
variant="text"
></v-btn>
</template>
<v-list density="compact">
<v-list-item
v-for="locale in localeOptions" :key="locale" :active="locale === props.locale"
@click="handleSelectLocale(locale)">
<v-list-item-title>{{ localeLabels[locale] ?? locale }}</v-list-item-title>
v-for="localeOption in localeOptions"
:key="localeOption"
:active="localeOption === props.locale"
@click="handleSelectLocale(localeOption)"
>
<v-list-item-title>{{ localeLabels[localeOption] ?? localeOption }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<!-- <v-btn :icon="mdiWeatherNight" variant="text" size="small" color="grey-darken-1"></v-btn> -->
</div>
</template>
<script setup lang="ts">
import { mdiDockWindow, mdiPaletteOutline, mdiTranslate, mdiWeatherNight } from '@mdi/js'
import { mdiPaletteOutline, mdiTranslate } from '@mdi/js'
import { computed } from 'vue'
import { useTheme } from 'vuetify'
import { getNextThemeName } from '@/utils/theme'
src/components/layouts/SKAdminLayout.vue
+115 -53
View File
@@ -1,15 +1,25 @@
<template>
<v-app v-bind="$attrs" class="sk-admin-layout">
<v-navigation-drawer
v-model="drawer" class="sk-admin-drawer" color="surface" :rail="isRail"
:rail-width="railWidth" :temporary="isMobile" :width="drawerWidth">
v-model="drawer"
class="sk-admin-drawer"
color="surface"
:rail="isRail"
:rail-width="railWidth"
:temporary="isMobile"
:width="drawerWidth"
>
<template #prepend>
<!-- Sidebar Title -->
<v-card class="sidebar-header d-flex align-center pa-0 pl-3 py-2" flat>
<v-btn
:aria-label="sidebarToggleLabel" color="grey" :icon="isRail ? mdiMenuOpen : mdiMenu" size="32"
variant="text" @click="toggleSidebar" />
:aria-label="sidebarToggleLabel"
color="grey"
:icon="isRail ? mdiMenuOpen : mdiMenu"
size="32"
variant="text"
@click="toggleSidebar"
/>
<v-card-text v-if="!isRail" class="sidebar-title flex-grow-1 py-0">
<slot name="title">
<div class="text-subtitle-1 font-weight-bold text-on-surface">
@@ -24,7 +34,11 @@ v-model="drawer" class="sk-admin-drawer" color="surface" :rail="isRail"
<v-divider />
<!-- User Info -->
<v-card v-if="features.showUserInfo" class="user-info d-flex align-center pa-0 pl-3 py-2" flat>
<v-card
v-if="features.showUserInfo"
class="user-info d-flex align-center pa-0 pl-3 py-2"
flat
>
<v-avatar class="user-avatar" color="primary" size="32" variant="tonal">
<span class="text-subtitle-2 font-weight-bold">{{ userProfile.avatarText }}</span>
</v-avatar>
@@ -39,17 +53,34 @@ v-model="drawer" class="sk-admin-drawer" color="surface" :rail="isRail"
</v-card>
<v-divider />
<v-sheet v-if="isMobile" class="mobile-menu-subheader d-flex flex-column align-stretch ga-2 px-3 py-2">
<v-sheet
v-if="isMobile"
class="mobile-menu-subheader d-flex flex-column align-stretch ga-2 px-3 py-2"
>
<v-btn
v-if="features.showFavorites" class="justify-start text-none"
color="primary" rounded="pill" size="small" :variant="mobileFavoritesPanel ? 'flat' : 'outlined'"
@click="openMobileFavoritesPanel">
<span class="text-on-secondary text-caption font-weight-medium">{{ favoritesConfig.label }}</span>
v-if="features.showFavorites"
class="justify-start text-none"
color="primary"
rounded="pill"
size="small"
:variant="mobileFavoritesPanel ? 'flat' : 'outlined'"
@click="openMobileFavoritesPanel"
>
<span class="text-on-secondary text-caption font-weight-medium">{{
favoritesConfig.label
}}</span>
</v-btn>
<v-btn
v-for="step in mobileMenuLevels" :key="`mobile-level-${step.level}`"
block class="justify-start text-none" :color="getMobileMenuBtnColor(step.level)"
rounded="pill" size="small" :variant="getMobileMenuBtnVariant(step.level)" @click="goToMobileLevel(step.level)">
v-for="step in mobileMenuLevels"
:key="`mobile-level-${step.level}`"
block
class="justify-start text-none"
:color="getMobileMenuBtnColor(step.level)"
rounded="pill"
size="small"
:variant="getMobileMenuBtnVariant(step.level)"
@click="goToMobileLevel(step.level)"
>
{{ step.title }}
</v-btn>
</v-sheet>
@@ -58,47 +89,76 @@ v-for="step in mobileMenuLevels" :key="`mobile-level-${step.level}`"
<!-- 桌面板選單 -->
<template v-if="!isMobile">
<SkAdminDrawerDesktopMenu
v-model:opened="opened" :is-shrink="isRail" :menu-items="menuItems"
@select="handleSelect" @unshrink="handleUnshrink" />
v-model:opened="opened"
:is-shrink="isRail"
:menu-items="menuItems"
@select="handleSelect"
@unshrink="handleUnshrink"
/>
</template>
<!-- 行動版選單 -->
<template v-if="isMobile">
<SkAdminDrawerMobileFavoritesPanel
v-if="features.showFavorites && mobileFavoritesPanel"
:favorite-items="favoriteItems" @select="onSelectFavorite" />
:favorite-items="favoriteItems"
@select="onSelectFavorite"
/>
<SkAdminDrawerMobileMenuPanel
v-else :mobile-current-items="mobileCurrentItems"
@item-click="onMobileMenuClick" />
v-else
:mobile-current-items="mobileCurrentItems"
@item-click="onMobileMenuClick"
/>
</template>
</v-navigation-drawer>
<v-app-bar ref="appBarRef" class="" height="auto">
<v-row class="flex-column" no-gutters>
<SkAdminAppBarTopCol
:features="features" :is-mobile="isMobile" :logout-label="logoutLabel"
:search-config="searchConfig" :search-value="searchValue" :show-breadcrumb-bar="showBreadcrumbBar"
:show-favorites-bar="showFavoritesBar" :theme-toggle-label="themeToggleLabel" :toolbar-actions="toolbarActions"
:toolbar-counts="toolbarCounts" @action="handleAction"
@logout="emitLogout" @search="triggerSearch" @toggle-drawer="drawer = !drawer"
@toggle-theme="toggleTheme" @update:search-value="searchValue = $event" @update:show-breadcrumb-bar="showBreadcrumbBar = $event"
@update:show-favorites-bar="showFavoritesBar = $event">
:features="features"
:is-mobile="isMobile"
:logout-label="logoutLabel"
:search-config="searchConfig"
:search-value="searchValue"
:show-breadcrumb-bar="showBreadcrumbBar"
:show-favorites-bar="showFavoritesBar"
:theme-toggle-label="themeToggleLabel"
:toolbar-actions="toolbarActions"
:toolbar-counts="toolbarCounts"
@action="handleAction"
@logout="emitLogout"
@search="triggerSearch"
@toggle-drawer="drawer = !drawer"
@toggle-theme="toggleTheme"
@update:search-value="searchValue = $event"
@update:show-breadcrumb-bar="showBreadcrumbBar = $event"
@update:show-favorites-bar="showFavoritesBar = $event"
>
<template v-if="$slots.actions" #actions>
<slot name="actions"></slot>
</template>
</SkAdminAppBarTopCol>
<SkAdminAppBarFavoritesCol
:favorite-items="favoriteItems" :favorites-config="favoritesConfig" :features="features"
:is-mobile="isMobile" :show-favorites-bar="showFavoritesBar" @add-favorite="emitAddFavorite"
@remove-favorite="emitRemoveFavorite" @select="handleSelect"
@toggle-favorites-bar="toggleFavoritesBar" />
:favorite-items="favoriteItems"
:favorites-config="favoritesConfig"
:features="features"
:is-mobile="isMobile"
:show-favorites-bar="showFavoritesBar"
@add-favorite="emitAddFavorite"
@remove-favorite="emitRemoveFavorite"
@select="handleSelect"
@toggle-favorites-bar="toggleFavoritesBar"
/>
<SkAdminAppBarBreadcrumbCol
:breadcrumb-items="breadcrumbItems" :features="features" :is-mobile="isMobile"
:show-breadcrumb-bar="showBreadcrumbBar" :show-favorites-bar="showFavoritesBar"
@toggle-favorites-bar="toggleFavoritesBar">
:breadcrumb-items="breadcrumbItems"
:features="features"
:is-mobile="isMobile"
:show-breadcrumb-bar="showBreadcrumbBar"
:show-favorites-bar="showFavoritesBar"
@toggle-favorites-bar="toggleFavoritesBar"
>
<template v-if="$slots['breadcrumb-actions']" #breadcrumb-actions>
<slot name="breadcrumb-actions"></slot>
</template>
@@ -125,8 +185,12 @@ v-else :mobile-current-items="mobileCurrentItems"
<v-card-title class="text-subtitle-2">操作說明</v-card-title>
<template #append>
<v-btn
aria-label="關閉說明" :icon="mdiClose" size="small" variant="text"
@click="helpWidgetVisible = false" />
aria-label="關閉說明"
:icon="mdiClose"
size="small"
variant="text"
@click="helpWidgetVisible = false"
/>
</template>
</v-card-item>
<v-divider />
@@ -146,11 +210,6 @@ aria-label="關閉說明" :icon="mdiClose" size="small" variant="text"
</template>
<script setup lang="ts">
import { mdiClose, mdiHelpCircleOutline, mdiHome, mdiMenu, mdiMenuOpen } from '@mdi/js'
import { computed, ref } from 'vue'
import { useAdminLayoutState } from '@/composables/layout/useAdminLayoutState'
import { useDisplay } from 'vuetify'
import { useThemeToggle } from '@/composables/layout/useThemeToggle'
import type {
AdminLayoutActionType,
AdminLayoutBreadcrumbConfig,
@@ -164,6 +223,11 @@ import type {
AdminLayoutToolbarCounts,
AdminLayoutUserProfile,
} from './sk-admin-layout/types'
import { mdiClose, mdiHelpCircleOutline, mdiHome, mdiMenu, mdiMenuOpen } from '@mdi/js'
import { computed, ref, toRef } from 'vue'
import { useDisplay } from 'vuetify'
import { useAdminLayoutState } from '@/composables/layout/useAdminLayoutState'
import { useThemeToggle } from '@/composables/layout/useThemeToggle'
import SkAdminAppBarBreadcrumbCol from './sk-admin-layout/SkAdminAppBarBreadcrumbCol.vue'
import SkAdminAppBarFavoritesCol from './sk-admin-layout/SkAdminAppBarFavoritesCol.vue'
import SkAdminAppBarTopCol from './sk-admin-layout/SkAdminAppBarTopCol.vue'
@@ -176,7 +240,7 @@ const emit = defineEmits<{
select: [item: AdminLayoutMenuItem]
search: [keyword: string]
action: [type: AdminLayoutActionType]
'toggle-sidebar': [payload: { drawer: boolean, rail: boolean }]
'toggle-sidebar': [payload: { drawer: boolean; rail: boolean }]
'toggle-theme': [themeName: string]
'add-favorite': []
'remove-favorite': [item: AdminLayoutMenuItem]
@@ -231,9 +295,7 @@ const props = withDefaults(defineProps<Props>(), {
sidebarToggleLabel: '切換側欄',
favoriteHeaderLabel: '我的最愛',
favoriteItems: () => [],
menuItems: () => [
{ title: '首頁', path: '/' },
],
menuItems: () => [{ title: '首頁', path: '/' }],
userProfile: () => ({
name: '王小明',
role: '資訊工程系 - 學生',
@@ -339,7 +401,7 @@ const {
emitUpdateIsRail: (value) => emit('update:isRail', value),
favoritesBarVisible: props.favoritesBarVisible,
isMobile,
isRail: props.isRail,
isRail: toRef(props, 'isRail'), // 傳 Ref 確保 composable getter 能隨 prop 更新
menuItems: props.menuItems,
onToggleSidebar: (payload) => emit('toggle-sidebar', payload),
})
@@ -389,9 +451,7 @@ function handleSelect (item: AdminLayoutMenuItem) {
}
function getMobileMenuBtnVariant(level: number) {
return !mobileFavoritesPanel.value && level === mobileCurrentLevel.value
? 'flat'
: 'outlined'
return !mobileFavoritesPanel.value && level === mobileCurrentLevel.value ? 'flat' : 'outlined'
}
function getMobileMenuBtnColor(level: number) {
@@ -433,8 +493,6 @@ function getMobileMenuBtnColor (level: number) {
background: rgb(var(--v-theme-background));
}
.search-input-wrapper {
flex: 1;
display: flex;
@@ -515,7 +573,9 @@ function getMobileMenuBtnColor (level: number) {
/* 確保 v-list-group 的 activator 也有 hover 效果 */
:deep(.v-list-group > .v-list-item) {
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
transition:
background-color 0.2s ease,
color 0.2s ease;
}
:deep(.v-list-group > .v-list-item:hover) {
@@ -525,7 +585,9 @@ function getMobileMenuBtnColor (level: number) {
/* 為所有 v-list-item 加上 transition */
:deep(.v-list-item) {
transition: background-color 0.2s ease, color 0.2s ease;
transition:
background-color 0.2s ease,
color 0.2s ease;
}
/* 確保滾軸邊距 */
src/components/layouts/SKMainLayout.vue
+1 -1
View File
@@ -15,8 +15,8 @@
</template>
<script setup lang="ts">
import { computed } from 'vue'
import type { AdminLayoutFavoritesConfig, AdminLayoutMenuItem } from './sk-admin-layout/types'
import { computed } from 'vue'
import SKAdminLayout from './SKAdminLayout.vue'
interface Props {
src/components/layouts/sk-admin-layout/SkAdminAppBarBreadcrumbCol.vue
+1 -1
View File
@@ -27,8 +27,8 @@ v-if="features.showFavorites && !showFavoritesBar" class="mr-2" color="primary"
</template>
<script setup lang="ts">
import { mdiChevronRight } from '@mdi/js'
import type { AdminLayoutBreadcrumbItem, AdminLayoutFeatures } from './types'
import { mdiChevronRight } from '@mdi/js'
interface Props {
features?: AdminLayoutFeatures
src/components/layouts/sk-admin-layout/SkAdminAppBarFavoritesCol.vue
+1 -1
View File
@@ -29,8 +29,8 @@ v-if="favoritesConfig.showAdd" class="favorite-add" color="primary" size="small"
</template>
<script setup lang="ts">
import { mdiEyeOff, mdiPlus } from '@mdi/js'
import type { AdminLayoutFavoritesConfig, AdminLayoutFeatures, AdminLayoutMenuItem } from './types'
import { mdiEyeOff, mdiPlus } from '@mdi/js'
interface Props {
features?: AdminLayoutFeatures
src/components/layouts/sk-admin-layout/SkAdminAppBarTopCol.vue
+11 -11
View File
@@ -23,9 +23,9 @@ v-model="searchValueModel" :aria-label="searchConfig.label" class="search-input"
<!-- 通知 -->
<v-tooltip location="bottom" :text="toolbarActions.notificationsLabel">
<template #activator="{ props }">
<template #activator="{ props: activatorProps }">
<v-btn
v-bind="props" :aria-label="toolbarActions.notificationsLabel" icon size="small" variant="text"
v-bind="activatorProps" :aria-label="toolbarActions.notificationsLabel" icon size="small" variant="text"
@click="emit('action', 'notifications')">
<v-badge
v-if="toolbarCounts.notifications" color="error" :content="toolbarCounts.notifications"
@@ -39,9 +39,9 @@ v-if="toolbarCounts.notifications" color="error" :content="toolbarCounts.notific
<!-- 訊息 -->
<v-tooltip location="bottom" :text="toolbarActions.messagesLabel">
<template #activator="{ props }">
<template #activator="{ props: activatorProps }">
<v-btn
v-bind="props" :aria-label="toolbarActions.messagesLabel" icon size="small" variant="text"
v-bind="activatorProps" :aria-label="toolbarActions.messagesLabel" icon size="small" variant="text"
@click="emit('action', 'messages')">
<v-badge
v-if="toolbarCounts.messages" color="warning" :content="toolbarCounts.messages" offset-x="4"
@@ -55,9 +55,9 @@ v-if="toolbarCounts.messages" color="warning" :content="toolbarCounts.messages"
<!-- 說明 -->
<v-tooltip v-if="false" location="bottom" :text="toolbarActions.helpLabel">
<template #activator="{ props }">
<template #activator="{ props: activatorProps }">
<v-btn
v-bind="props" :aria-label="toolbarActions.helpLabel" icon size="small" variant="text"
v-bind="activatorProps" :aria-label="toolbarActions.helpLabel" icon size="small" variant="text"
@click="emit('action', 'help')">
<v-icon :icon="mdiHelp" />
</v-btn>
@@ -98,16 +98,16 @@ v-bind="{ ...menuProps, ...tooltipProps }" :aria-label="toolbarActions.settingsL
<!-- 登出 -->
<v-tooltip location="bottom" :text="logoutLabel">
<template #activator="{ props }">
<v-btn v-bind="props" :aria-label="logoutLabel" icon size="small" variant="text" @click="emit('logout')">
<template #activator="{ props: activatorProps }">
<v-btn v-bind="activatorProps" :aria-label="logoutLabel" icon size="small" variant="text" @click="emit('logout')">
<v-icon :icon="mdiLogout" />
</v-btn>
</template>
</v-tooltip>
<v-tooltip v-if="features.showThemeToggle" location="bottom" :text="themeToggleLabel">
<template #activator="{ props }">
<v-btn v-bind="props" :aria-label="themeToggleLabel" icon variant="text" @click="emit('toggle-theme')">
<template #activator="{ props: activatorProps }">
<v-btn v-bind="activatorProps" :aria-label="themeToggleLabel" icon variant="text" @click="emit('toggle-theme')">
<v-icon :icon="mdiPaletteOutline" />
</v-btn>
</template>
@@ -118,9 +118,9 @@ v-bind="{ ...menuProps, ...tooltipProps }" :aria-label="toolbarActions.settingsL
</template>
<script setup lang="ts">
import type { AdminLayoutActionType, AdminLayoutFeatures, AdminLayoutSearchConfig, AdminLayoutToolbarActions, AdminLayoutToolbarCounts } from './types'
import { mdiBellOutline, mdiCogOutline, mdiHelp, mdiLogout, mdiMagnify, mdiMenu, mdiMessageTextOutline, mdiPaletteOutline } from '@mdi/js'
import { computed } from 'vue'
import type { AdminLayoutActionType, AdminLayoutFeatures, AdminLayoutSearchConfig, AdminLayoutToolbarActions, AdminLayoutToolbarCounts } from './types'
interface Props {
isMobile?: boolean
src/components/layouts/sk-admin-layout/SkAdminDrawerDesktopMenu.vue
+3 -3
View File
@@ -2,9 +2,9 @@
<v-list v-model:opened="openedModel" color="primary" density="compact" prepend-gap="8">
<template v-for="item in menuItems" :key="item.path ?? item.title">
<v-list-group v-if="item.subItems?.length" class="menu-group" :value="`menu:${item.path ?? item.title}`">
<template #activator="{ props }">
<template #activator="{ props: activatorProps }">
<v-list-item
v-bind="isShrink ? undefined : props" :class="{ 'px-0': isShrink }"
v-bind="isShrink ? undefined : activatorProps" :class="{ 'px-0': isShrink }"
:link="isNavigable(item) && !!item.path" :to="isNavigable(item) ? item.path : undefined" @click="emitSelect(item)">
<template #prepend>
<v-icon v-if="item.icon" size="20" :icon="item.icon" />
@@ -93,9 +93,9 @@ v-else :link="!!subItem.path" :prepend-icon="subItem.icon || mdiMenuRight" :to="
</template>
<script setup lang="ts">
import type { AdminLayoutMenuItem } from './types'
import { mdiCircleSmall, mdiMenuRight } from '@mdi/js'
import { computed, watch } from 'vue'
import type { AdminLayoutMenuItem } from './types'
interface Props {
opened?: string[]
src/components/layouts/sk-admin-layout/SkAdminDrawerMobileMenuPanel.vue
+1 -1
View File
@@ -14,8 +14,8 @@ v-for="item in mobileCurrentItems" :key="item.path ?? item.title" class="mb-1" r
</template>
<script setup lang="ts">
import { mdiArrowTopRight, mdiChevronRight } from '@mdi/js'
import type { AdminLayoutMenuItem } from './types'
import { mdiArrowTopRight, mdiChevronRight } from '@mdi/js'
withDefaults(defineProps<{
mobileCurrentItems?: AdminLayoutMenuItem[]
src/components/maintenance/EditableStudentGrid.vue
-1
View File
@@ -308,7 +308,6 @@ import { useEditableStudentGrid } from '@/composables/maintenance/useEditableStu
const {
departments,
draftRows,
enrollYears,
filteredStudents,
getDraftRow,
src/components/maintenance/MaintenanceCrudDialogs.vue
+1 -1
View File
@@ -65,8 +65,8 @@
</template>
<script setup lang="ts">
import { computed } from 'vue'
import type { SaveSummaryItem } from '@/composables/maintenance/useStudentMaintenanceForm'
import { computed } from 'vue'
import CommonConfirmDialog from './CommonConfirmDialog.vue'
const props = defineProps<{
src/components/maintenance/MaintenanceStudentFormFields.vue
+10 -7
View File
@@ -3,7 +3,7 @@
<v-col cols="12" md="3">
<v-text-field
id="field-studentId"
v-model="props.form.studentId"
v-model="form.studentId"
density="comfortable"
:disabled="props.isFormLocked"
:error-messages="props.fieldErrors.studentId"
@@ -17,7 +17,7 @@
<v-col cols="12" md="3">
<v-text-field
id="field-name"
v-model="props.form.name"
v-model="form.name"
density="comfortable"
:disabled="props.isFormLocked"
:error-messages="props.fieldErrors.name"
@@ -31,7 +31,7 @@
<v-col cols="12" md="3">
<v-select
id="field-department"
v-model="props.form.department"
v-model="form.department"
density="comfortable"
:disabled="props.isFormLocked"
:error-messages="props.fieldErrors.department"
@@ -45,7 +45,7 @@
<v-col cols="12" md="3">
<v-select
id="field-grade"
v-model="props.form.grade"
v-model="form.grade"
density="comfortable"
:disabled="props.isFormLocked"
:error-messages="props.fieldErrors.grade"
@@ -61,7 +61,7 @@
<v-col cols="12" md="3">
<v-select
id="field-enrollYear"
v-model="props.form.enrollYear"
v-model="form.enrollYear"
density="comfortable"
:disabled="props.isFormLocked"
:error-messages="props.fieldErrors.enrollYear"
@@ -75,7 +75,7 @@
<v-col cols="12" md="3">
<v-select
id="field-status"
v-model="props.form.status"
v-model="form.status"
density="comfortable"
:disabled="props.isFormLocked"
:error-messages="props.fieldErrors.status"
@@ -89,7 +89,7 @@
<v-col cols="12" md="3">
<v-text-field
id="field-email"
v-model="props.form.email"
v-model="form.email"
density="comfortable"
:disabled="props.isFormLocked"
:error-messages="props.fieldErrors.email"
@@ -104,6 +104,7 @@
<script setup lang="ts">
import type { StudentFormState } from '@/composables/maintenance/useStudentMaintenanceForm'
import { toRef } from 'vue'
interface GradeOption {
title: string
@@ -121,6 +122,8 @@ const props = defineProps<{
statuses: string[]
}>()
const form = toRef(props, 'form')
const emit = defineEmits<{
(event: 'clear-field', field: keyof StudentFormState): void
}>()
src/components/maintenance/master-detail-b/MasterDetailBSemesterSection.vue
+1 -1
View File
@@ -165,8 +165,8 @@
</template>
<script setup lang="ts">
import { mdiArrowDown, mdiArrowUp, mdiBookOpenOutline, mdiChevronRight, mdiDeleteOutline, mdiPlus, mdiSchool, mdiSwapVertical } from '@mdi/js'
import type { CourseRecord, SemesterRecord } from '@/stores/semesters'
import { mdiArrowDown, mdiArrowUp, mdiBookOpenOutline, mdiChevronRight, mdiDeleteOutline, mdiPlus, mdiSchool, mdiSwapVertical } from '@mdi/js'
import { ref } from 'vue'
type CourseSortKey = 'name' | 'credits' | 'score'
src/components/maintenance/master-detail-c/MasterDetailCCourseSection.vue
+1 -2
View File
@@ -80,9 +80,8 @@ color="error" :disabled="isFormLocked" :icon="mdiDelete" size="small" variant="t
</template>
<script setup lang="ts">
import { mdiChevronRight, mdiDelete, mdiPlus, mdiSchool } from '@mdi/js'
import type { CourseRecord, SemesterRecord } from '@/stores/semesters'
import { mdiChevronRight, mdiDelete, mdiPlus, mdiSchool } from '@mdi/js'
import { computed } from 'vue'
const props = defineProps<{
src/components/maintenance/master-detail/MasterDetailSemesterList.vue
+1 -1
View File
@@ -48,8 +48,8 @@
</template>
<script setup lang="ts">
import { mdiChevronRight, mdiPlus, mdiSchool } from '@mdi/js'
import type { SemesterRecord } from '@/stores/semesters'
import { mdiChevronRight, mdiPlus, mdiSchool } from '@mdi/js'
defineProps<{
semesters: SemesterRecord[]
src/components/maintenance/master-detail/MasterDetailSemesterPanel.vue
+1 -2
View File
@@ -308,9 +308,8 @@
</template>
<script setup lang="ts">
import { mdiArrowLeft, mdiClose, mdiDelete, mdiPencil, mdiPlus } from '@mdi/js'
import type { SemesterRecord } from '@/stores/semesters'
import { mdiArrowLeft, mdiClose, mdiDelete, mdiPencil, mdiPlus } from '@mdi/js'
import { computed } from 'vue'
const props = defineProps<{
src/composables/layout/useAdminLayoutState.ts
+9 -9
View File
@@ -1,5 +1,5 @@
import { computed, onBeforeUnmount, onMounted, ref, watch, type Ref } from 'vue'
import type { AdminLayoutMenuItem } from '@/components/layouts/sk-admin-layout/types'
import { computed, onBeforeUnmount, onMounted, ref, type Ref, watch } from 'vue'
type ToggleSidebarPayload = {
drawer: boolean
@@ -14,7 +14,7 @@ type UseAdminLayoutStateOptions = {
emitUpdateIsRail: (value: boolean) => void
favoritesBarVisible: boolean | null
isMobile: Ref<boolean>
isRail: boolean | null
isRail: Ref<boolean | null> // 必須為 Ref，確保父層 prop 更新時 getter 能即時反映
menuItems: AdminLayoutMenuItem[]
onToggleSidebar: (payload: ToggleSidebarPayload) => void
}
@@ -30,9 +30,9 @@ export function useAdminLayoutState (options: UseAdminLayoutStateOptions) {
const appBarHeight = ref(0)
const isRail = computed({
get: () => (options.isRail ?? localIsRail.value),
get: () => options.isRail.value ?? localIsRail.value,
set: (value: boolean) => {
if (options.isRail === null) {
if (options.isRail.value === null) {
localIsRail.value = value
return
}
@@ -42,7 +42,7 @@ export function useAdminLayoutState (options: UseAdminLayoutStateOptions) {
})
const showFavoritesBar = computed({
get: () => (options.favoritesBarVisible ?? localFavoritesBarVisible.value),
get: () => options.favoritesBarVisible ?? localFavoritesBarVisible.value,
set: (value: boolean) => {
if (options.favoritesBarVisible === null) {
localFavoritesBarVisible.value = value
@@ -54,7 +54,7 @@ export function useAdminLayoutState (options: UseAdminLayoutStateOptions) {
})
const showBreadcrumbBar = computed({
get: () => (options.breadcrumbBarVisible ?? localBreadcrumbBarVisible.value),
get: () => options.breadcrumbBarVisible ?? localBreadcrumbBarVisible.value,
set: (value: boolean) => {
if (options.breadcrumbBarVisible === null) {
localBreadcrumbBarVisible.value = value
@@ -77,7 +77,8 @@ export function useAdminLayoutState (options: UseAdminLayoutStateOptions) {
const mobileMenuLevels = computed(() =>
Array.from({ length: mobileCurrentLevel.value }, (_, index) => ({
level: index + 1,
title: index === 0 ? '主選單' : (mobileMenuPath.value[index - 1]?.title ?? `第${index + 1}層`),
title:
index === 0 ? '主選單' : (mobileMenuPath.value[index - 1]?.title ?? `第${index + 1}層`),
}))
)
@@ -130,8 +131,7 @@ export function useAdminLayoutState (options: UseAdminLayoutStateOptions) {
}
function toggleFavoritesBar(nextValue?: boolean) {
showFavoritesBar.value =
typeof nextValue === 'boolean' ? nextValue : !showFavoritesBar.value
showFavoritesBar.value = typeof nextValue === 'boolean' ? nextValue : !showFavoritesBar.value
}
function handleUnshrink() {
src/composables/maintenance/useMaintenanceCrudFlow.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { computed, ref, type ComputedRef, type Ref } from 'vue'
import { computed, type ComputedRef, ref, type Ref } from 'vue'
type DialogMode = 'create' | 'edit' | 'view'
src/composables/maintenance/useStudentMaintenanceForm.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { computed, ref, type ComputedRef, type Ref } from 'vue'
import type { StudentRecord } from '@/stores/students'
import { computed, type ComputedRef, ref, type Ref } from 'vue'
interface GradeOption {
title: string
@@ -225,4 +225,4 @@ export function useStudentMaintenanceForm (options: UseStudentMaintenanceFormOpt
}
}
export type { StudentFormState, SaveSummaryItem }
export type { SaveSummaryItem, StudentFormState }
src/stores/stores/breadcrumbs.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { mdiHome } from '@mdi/js'
import type { LayoutMenuItem } from './menu'
import { mdiHome } from '@mdi/js'
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
src/views/maint/MasterDetailMnt.vue
+2 -22
View File
@@ -330,8 +330,8 @@ function handleDeleteSemester (id: number) {
// 開始編輯子檔 (複製資料到暫存表單)
function startDetailEdit () {
if (!selectedSemester.value) return
// Deep copy 以避免直接修改原始資料 (Vue 的響應式特性)
detailForm.value = JSON.parse(JSON.stringify(selectedSemester.value))
// 需要深拷貝來避免直接改到原始資料，且保留巢狀結構的語意
detailForm.value = structuredClone(selectedSemester.value)
isDetailEditing.value = true
}
@@ -353,24 +353,6 @@ function saveDetailEdit () {
detailForm.value = null
}
// 編輯模式：新增課程項目
function addCourseToDetail () {
if (!detailForm.value) return
detailForm.value.courses.push({
code: '',
name: '',
credits: 3,
score: 0
})
}
// 編輯模式：移除課程項目
function removeCourseFromDetail (index: number) {
if (!detailForm.value) return
detailForm.value.courses.splice(index, 1)
}
const {
errorSummary,
fieldErrors,
@@ -412,7 +394,6 @@ const dialogSubtitle = computed(() => {
// 載入/儲存時鎖定、檢視模式 readonly
const isFormLocked = computed(() => isLoading.value || isSaving.value)
const {
closeDialog,
confirmClose,
confirmCloseVisible,
confirmDelete,
@@ -422,7 +403,6 @@ const {
confirmSaveVisible,
confirmSwitch,
confirmSwitchVisible,
currentEditingRecord,
handleDialogVisibility,
hasNextRecord,
hasPrevRecord,
src/views/maint/MasterDetailMntB.vue
-2
View File
@@ -474,7 +474,6 @@ const dialogSubtitle = computed(() => {
// 載入/儲存時鎖定、檢視模式 readonly
const isFormLocked = computed(() => isLoading.value || isSaving.value)
const {
closeDialog,
confirmClose,
confirmCloseVisible,
confirmDelete,
@@ -484,7 +483,6 @@ const {
confirmSaveVisible,
confirmSwitch,
confirmSwitchVisible,
currentEditingRecord,
handleDialogVisibility,
hasNextRecord,
hasPrevRecord,
src/views/maint/MasterDetailMntC.vue
-2
View File
@@ -484,7 +484,6 @@ const dialogSubtitle = computed(() => {
// 載入/儲存時鎖定、檢視模式 readonly
const isFormLocked = computed(() => isLoading.value || isSaving.value)
const {
closeDialog,
confirmClose,
confirmCloseVisible,
confirmDelete,
@@ -494,7 +493,6 @@ const {
confirmSaveVisible,
confirmSwitch,
confirmSwitchVisible,
currentEditingRecord,
handleDialogVisibility,
hasNextRecord,
hasPrevRecord,
src/views/maint/SingleRecordMnt.vue
+2 -4
View File
@@ -402,11 +402,11 @@ import { mdiBroom, mdiDelete, mdiEye, mdiMagnify, mdiPencil } from '@mdi/js'
import { computed, nextTick, ref } from 'vue'
import { useDisplay } from 'vuetify'
import MaintenanceCrudDialogs from '@/components/maintenance/MaintenanceCrudDialogs.vue'
import { useMaintenanceCrudFlow } from '@/composables/maintenance/useMaintenanceCrudFlow'
import { useStudentMaintenanceForm } from '@/composables/maintenance/useStudentMaintenanceForm'
import MntDialogCard from '@/components/maintenance/MntDialogCard.vue'
import MntPageCards from '@/components/maintenance/MntPageCards.vue'
import MntRecordNavToolbar from '@/components/maintenance/MntRecordNavToolbar.vue'
import { useMaintenanceCrudFlow } from '@/composables/maintenance/useMaintenanceCrudFlow'
import { useStudentMaintenanceForm } from '@/composables/maintenance/useStudentMaintenanceForm'
import { type StudentRecord, useStudentStore } from '@/stores/students'
// 下拉選項：系所/年級/入學年度/狀態
@@ -525,7 +525,6 @@ const dialogSubtitle = computed(() => {
// 載入/儲存時鎖定、檢視模式 readonly
const isFormLocked = computed(() => isLoading.value || isSaving.value)
const {
closeDialog,
confirmClose,
confirmCloseVisible,
confirmDelete,
@@ -535,7 +534,6 @@ const {
confirmSaveVisible,
confirmSwitch,
confirmSwitchVisible,
currentEditingRecord,
handleDialogVisibility,
hasNextRecord,
hasPrevRecord,