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

Refactor MasterDetailMntC.vue for improved readability and consistency

Browse Source
This commit is contained in:
skytek_xinliang
2026-03-30 09:18:55 +08:00
parent 7591ecd062
commit 16b58fbf7a
66 changed files with 2071 additions and 777 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+98 -22
View File
@@ -1,14 +1,25 @@
<template>
<!-- 根據路由設定 meta.layout 動態切換佈局 -->
<component
:is="activeLayout" v-bind="layoutProps" v-model:breadcrumb-bar-visible="favoritesStore.breadcrumbBarVisible"
:is="activeLayout"
v-bind="layoutProps"
v-model:breadcrumb-bar-visible="favoritesStore.breadcrumbBarVisible"
v-model:favorites-bar-visible="favoritesStore.favoritesBarVisible"
v-model:is-rail="menuStore.isRail" @action="handleLayoutAction" @logout="handleLogout"
@remove-favorite="handleRemoveFavorite" @search="handleSearch" @select="handleSelect">
v-model:is-rail="menuStore.isRail"
@action="handleLayoutAction"
@logout="handleLogout"
@remove-favorite="handleRemoveFavorite"
@search="handleSearch"
@select="handleSelect"
>
<template #breadcrumb-actions>
<v-btn
color="secondary" :disabled="isFavoriteActionDisabled" size="small" variant="outlined"
@click="toggleFavorite">
color="secondary"
:disabled="isFavoriteActionDisabled"
size="small"
variant="outlined"
@click="toggleFavorite"
>
<v-icon class="mr-1" size="14" :icon="favoriteActionIcon" />
{{ favoriteActionLabel }}
</v-btn>
@@ -21,19 +32,31 @@ color="secondary" :disabled="isFavoriteActionDisabled" size="small" variant="out
<template v-if="showTabs">
<div class="d-flex flex-column h-100">
<v-tabs
v-model="activeTab" bg-color="background" color="primary" density="compact" show-arrows
style="flex-shrink: 0;">
v-model="activeTab"
bg-color="background"
color="primary"
density="compact"
show-arrows
style="flex-shrink: 0"
>
<v-tab v-for="tab in tabs" :key="tab.path" border="sm" :to="tab.path" :value="tab.path">
{{ tab.title }}
<v-btn
class="pl-2" color="grey" density="compact" :disabled="tabs.length <= 1" icon size="x-small"
variant="text" @click.prevent.stop="closeTab(tab.path)">
class="pl-2"
color="grey"
density="compact"
:disabled="tabs.length <= 1"
icon
size="x-small"
variant="text"
@click.prevent.stop="closeTab(tab.path)"
>
<v-icon :icon="mdiClose" />
</v-btn>
</v-tab>
</v-tabs>
<div class="flex-grow-1 overflow-auto" style="min-height: 0;">
<div class="flex-grow-1 overflow-auto" style="min-height: 0">
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" :key="route.fullPath" />
@@ -50,13 +73,26 @@ class="pl-2" color="grey" density="compact" :disabled="tabs.length <= 1" icon si
<v-dialog v-model="searchDialog" max-width="640">
<v-card>
<v-card-title class="text-h6 bg-primary-variant pa-4">搜尋結果</v-card-title>
<v-card-subtitle v-if="searchKeyword" class="pt-4">關鍵字：{{ searchKeyword }}</v-card-subtitle>
<v-card-subtitle v-if="searchKeyword" class="pt-4"
>關鍵字：{{ searchKeyword }}</v-card-subtitle
>
<v-card-text class="pt-2">
<v-alert v-if="searchResults.length === 0" class="mt-2" density="compact" type="info" variant="tonal">
<v-alert
v-if="searchResults.length === 0"
class="mt-2"
density="compact"
type="info"
variant="tonal"
>
查無結果
</v-alert>
<v-list v-else density="compact">
<v-list-item v-for="item in searchResults" :key="item.path" class="mb-2" @click="handleSearchSelect(item)">
<v-list-item
v-for="item in searchResults"
:key="item.path"
class="mb-2"
@click="handleSearchSelect(item)"
>
<template #prepend>
<v-icon v-if="item.icon" size="18" :icon="item.icon" />
</template>
@@ -82,7 +118,9 @@ class="pl-2" color="grey" density="compact" :disabled="tabs.length <= 1" icon si
<v-dialog v-model="messageStore.isOpen" max-width="720">
<v-card>
<v-card-title class="text-h6 bg-primary-variant pa-4">訊息清單</v-card-title>
<v-card-subtitle class="text-body-2 pt-4 text-medium-emphasis">僅示意資料，不含延伸功能</v-card-subtitle>
<v-card-subtitle class="text-body-2 pt-4 text-medium-emphasis"
>僅示意資料，不含延伸功能</v-card-subtitle
>
<v-card-text class="pa-4">
<!--
使用 v-data-iterator 進行資料展示，
@@ -91,7 +129,12 @@ class="pl-2" color="grey" density="compact" :disabled="tabs.length <= 1" icon si
<v-data-iterator item-key="id" :items="messageItems" :items-per-page="-1">
<template #default="{ items }">
<v-list density="compact">
<v-list-item v-for="wrapped in items" :key="resolveMessageItem(wrapped).id" border="sm" class="pa-2 mb-1">
<v-list-item
v-for="wrapped in items"
:key="resolveMessageItem(wrapped).id"
border="sm"
class="pa-2 mb-1"
>
<template #prepend>
<v-avatar color="primary" size="28" variant="tonal">
<v-icon size="16" :icon="resolveMessageItem(wrapped).icon" />
@@ -115,14 +158,36 @@ class="pl-2" color="grey" density="compact" :disabled="tabs.length <= 1" icon si
</v-dialog>
<v-snackbar
v-model="snackbar.visible" :color="snackbar.color" :location="snackbar.location"
:timeout="snackbar.timeout" :variant="snackbar.variant">
v-model="snackbar.visible"
:color="snackbar.color"
:location="snackbar.location"
:timeout="snackbar.timeout"
:variant="snackbar.variant"
>
{{ snackbar.message }}
</v-snackbar>
</template>
<script setup>
import { mdiAccountGroup, mdiBellOutline, mdiCalendarOutline, mdiChartBoxOutline, mdiClose, mdiCloseCircle, mdiCog, mdiDomain, mdiFileDocumentOutline, mdiFileTreeOutline, mdiHome, mdiHomeCityOutline, mdiMenu, mdiPlusCircle, mdiSchoolOutline, mdiTableEdit, mdiViewDashboardVariant } from '@mdi/js'
import {
mdiAccountGroup,
mdiBellOutline,
mdiCalendarOutline,
mdiChartBoxOutline,
mdiClose,
mdiCloseCircle,
mdiCog,
mdiDomain,
mdiFileDocumentOutline,
mdiFileTreeOutline,
mdiHome,
mdiHomeCityOutline,
mdiMenu,
mdiPlusCircle,
mdiSchoolOutline,
mdiTableEdit,
mdiViewDashboardVariant,
} from '@mdi/js'
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import SKAdminLayout from '@/components/layouts/SKAdminLayout.vue'
@@ -426,7 +491,9 @@ const currentFavoriteInfo = computed(() => {
const path = route.path
const menuItem = findMenuItem(path)
const title =
menuItem?.title || (typeof route.meta?.title === 'string' ? route.meta.title : null) || findTitle(path)
menuItem?.title ||
(typeof route.meta?.title === 'string' ? route.meta.title : null) ||
findTitle(path)
return {
title,
path,
@@ -435,10 +502,14 @@ const currentFavoriteInfo = computed(() => {
})
const isCurrentFavorite = computed(() => favoritesStore.isFavorite(route.path))
const isFavoriteActionDisabled = computed(() => !currentFavoriteInfo.value?.path || route.path === '/')
const isFavoriteActionDisabled = computed(
() => !currentFavoriteInfo.value?.path || route.path === '/'
)
const favoriteActionLabel = computed(() => (isCurrentFavorite.value ? '移除常用' : '加入常用'))
const favoriteActionIcon = computed(() => (isCurrentFavorite.value ? mdiCloseCircle : mdiPlusCircle))
const favoriteActionIcon = computed(() =>
isCurrentFavorite.value ? mdiCloseCircle : mdiPlusCircle
)
function toggleFavoriteItem(item) {
if (!item?.path || item.path === '/') return
@@ -481,7 +552,12 @@ function updateBreadcrumbs () {
}
watch(
[() => route.path, () => menuStore.menuItems, () => menuStore.favoriteItems, () => favoritesStore.items],
[
() => route.path,
() => menuStore.menuItems,
() => menuStore.favoriteItems,
() => favoritesStore.items,
],
() => updateBreadcrumbs(),
{ immediate: true, deep: true }
)
src/components/SKDeptManagement.vue
+3 -1
View File
@@ -179,7 +179,9 @@ const emit = defineEmits([
'toggle-expand',
])
function normalizeOptions (options: Array<string | number | { title: string; value: string | number }>) {
function normalizeOptions(
options: Array<string | number | { title: string; value: string | number }>
) {
return options.map((o) => {
if (typeof o === 'string' || typeof o === 'number') {
return { title: String(o), value: o }
src/components/SKLogin.vue
+133 -54
View File
@@ -2,76 +2,129 @@
<v-sheet class="bg-surface" :class="layoutClass" height="100%">
<!-- Side Layouts -->
<v-row
v-if="props.layout !== 'card'" class="fill-height" :class="{ 'flex-row-reverse': props.layout === 'side-right' }"
no-gutters>
v-if="props.layout !== 'card'"
class="fill-height"
:class="{ 'flex-row-reverse': props.layout === 'side-right' }"
no-gutters
>
<!-- Illustration Column -->
<v-col
class="illustration-panel d-none d-sm-flex align-center justify-center position-relative flex-grow-1" cols="12" lg="8"
sm="6">
class="illustration-panel d-none d-sm-flex align-center justify-center position-relative flex-grow-1"
cols="12"
lg="8"
sm="6"
>
<div class="brand-header position-absolute top-0 left-0 px-2 pt-4 pa-lg-4">
<LoginBrand :title="props.branding.title" />
</div>
<v-sheet
class="board-wrapper pa-2 pa-lg-0" color="rgba(var(--v-theme-surface), 0.8)" elevation="0" max-width="680"
rounded="lg" width="100%">
class="board-wrapper pa-2 pa-lg-0"
color="rgba(var(--v-theme-surface), 0.8)"
elevation="0"
max-width="680"
rounded="lg"
width="100%"
>
<LoginAnnouncementBoard
:all-tab-label="props.announcementBoard.allTabLabel" :date-header="props.announcementBoard.dateHeader"
:empty-text="props.announcementBoard.emptyText" :items="props.announcementBoard.items"
:all-tab-label="props.announcementBoard.allTabLabel"
:date-header="props.announcementBoard.dateHeader"
:empty-text="props.announcementBoard.emptyText"
:items="props.announcementBoard.items"
:items-per-page="props.announcementBoard.itemsPerPage"
:pagination-label="props.announcementBoard.paginationLabel" :school-header="props.announcementBoard.schoolHeader"
:system-announcements="props.announcementBoard.systemAnnouncements" :tabs="props.announcementBoard.tabs"
:title="props.announcementBoard.title" :title-header="props.announcementBoard.titleHeader"
@select-announcement="handleSelectAnnouncement" />
:pagination-label="props.announcementBoard.paginationLabel"
:school-header="props.announcementBoard.schoolHeader"
:system-announcements="props.announcementBoard.systemAnnouncements"
:tabs="props.announcementBoard.tabs"
:title="props.announcementBoard.title"
:title-header="props.announcementBoard.titleHeader"
@select-announcement="handleSelectAnnouncement"
/>
</v-sheet>
</v-col>
<v-col class="bg-background d-flex flex-column flex-grow-1 px-4 py-2 py-md-0" cols="12" lg="4" sm="6">
<v-col
class="bg-background d-flex flex-column flex-grow-1 px-4 py-2 py-md-0"
cols="12"
lg="4"
sm="6"
>
<div v-if="showMobileAnnouncementBanner" class="banner-wrapper px-3">
<v-banner class=" d-sm-none mb-2" density="comfortable" lines="one" :mobile="false" :stacked="false">
<v-banner
class="d-sm-none mb-2"
density="comfortable"
lines="one"
:mobile="false"
:stacked="false"
>
<template #prepend>
<v-slide-x-transition appear>
<div class="mobile-banner-icon-wrap d-flex align-center">
<v-icon class="mobile-banner-icon" color="primary" size="small" :icon="mdiBullhornVariantOutline" />
<v-icon
class="mobile-banner-icon"
color="primary"
size="small"
:icon="mdiBullhornVariantOutline"
/>
</div>
</v-slide-x-transition>
</template>
<v-banner-text>{{ mobileAnnouncementBannerText }}</v-banner-text>
<template #actions>
<v-btn
class="text-none" color="primary" size="small" variant="text"
@click="mobileAnnouncementSheetVisible = true">
class="text-none"
color="primary"
size="small"
variant="text"
@click="mobileAnnouncementSheetVisible = true"
>
{{ props.mobileAnnouncement.viewAllText }}
</v-btn>
</template>
</v-banner>
</div>
<LoginToolBar
v-if="props.toolbar.show" :locale="props.toolbar.locale" :locales="props.toolbar.locales"
@change-locale="handleChangeLocale" @toggle-layout="handleToggleLayout" />
v-if="props.toolbar.show"
:locale="props.toolbar.locale"
:locales="props.toolbar.locales"
@change-locale="handleChangeLocale"
@toggle-layout="handleToggleLayout"
/>
<div
class="login-form-wrapper d-flex flex-column justify-center py-0 py-sm-4 py-lg-8 px-4 px-sm-6 px-lg-12 flex-grow-1">
class="login-form-wrapper d-flex flex-column justify-center py-0 py-sm-4 py-lg-8 px-4 px-sm-6 px-lg-12 flex-grow-1"
>
<div class="login-header-height d-flex d-sm-none justify-center align-start">
<LoginBrand :title="props.branding.title" />
</div>
<LoginHeader
class="d-none d-sm-block" :welcome-description="props.header.welcomeDescription"
:welcome-text="props.header.welcomeText" />
class="d-none d-sm-block"
:welcome-description="props.header.welcomeDescription"
:welcome-text="props.header.welcomeText"
/>
<LoginForm
:acc-placeholder="props.form.accPlaceholder" :forgot-password-href="props.form.forgotPassword.href"
:forgot-password-target="props.form.forgotPassword.target" :forgot-password-text="props.form.forgotPassword.text"
:acc-placeholder="props.form.accPlaceholder"
:forgot-password-href="props.form.forgotPassword.href"
:forgot-password-target="props.form.forgotPassword.target"
:forgot-password-text="props.form.forgotPassword.text"
:passw-placeholder="props.form.passwPlaceholder"
:remember-me-label="props.form.rememberMeLabel"
:remember-storage-key="props.form.rememberStorageKey" :submit-text="props.form.submitText"
@forgot-password="handleForgotPassword" @submit="handleLogin">
:remember-storage-key="props.form.rememberStorageKey"
:submit-text="props.form.submitText"
@forgot-password="handleForgotPassword"
@submit="handleLogin"
>
<template v-if="props.form.withCaptcha" #verify>
<LoginVerify
:captcha="props.form.captcha" :captcha-placeholder="props.form.captchaPlaceholder"
:error-message="props.form.captchaErrorMessage" :loading="props.form.captchaLoading"
:model-value="props.form.captchaValue" :refresh-title="props.form.refreshTitle"
:verified="props.form.captchaVerified" :verify-text="props.form.verifyText"
@refresh="handleCaptchaRefresh" @update:model-value="handleCaptchaChange" />
:captcha="props.form.captcha"
:captcha-placeholder="props.form.captchaPlaceholder"
:error-message="props.form.captchaErrorMessage"
:loading="props.form.captchaLoading"
:model-value="props.form.captchaValue"
:refresh-title="props.form.refreshTitle"
:verified="props.form.captchaVerified"
:verify-text="props.form.verifyText"
@refresh="handleCaptchaRefresh"
@update:model-value="handleCaptchaChange"
/>
</template>
</LoginForm>
<div class="mt-auto py-8 text-center text-caption text-grey-darken-1">
@@ -82,33 +135,58 @@ class="d-none d-sm-block" :welcome-description="props.header.welcomeDescription"
</v-row>
<!-- Card Layout (Centered) -->
<v-row v-else class="fill-height align-center justify-center bg-background pa-4 pa-md-0" no-gutters>
<v-row
v-else
class="fill-height align-center justify-center bg-background pa-4 pa-md-0"
no-gutters
>
<v-card
class="rounded-lg" :class="props.toolbar.show ? 'px-8 pt-0 pb-4' : 'pa-8'" elevation="10" max-width="450"
width="100%">
class="rounded-lg"
:class="props.toolbar.show ? 'px-8 pt-0 pb-4' : 'pa-8'"
elevation="10"
max-width="450"
width="100%"
>
<LoginToolBar
v-if="props.toolbar.show" :locale="props.toolbar.locale" :locales="props.toolbar.locales"
@change-locale="handleChangeLocale" @toggle-layout="handleToggleLayout" />
v-if="props.toolbar.show"
:locale="props.toolbar.locale"
:locales="props.toolbar.locales"
@change-locale="handleChangeLocale"
@toggle-layout="handleToggleLayout"
/>
<div class="d-flex justify-center mb-6 mb-md-4">
<LoginBrand :title="props.branding.title" />
</div>
<LoginHeader
class="d-none d-md-block" :welcome-description="props.header.welcomeDescription"
:welcome-text="props.header.welcomeText" />
class="d-none d-md-block"
:welcome-description="props.header.welcomeDescription"
:welcome-text="props.header.welcomeText"
/>
<LoginForm
:acc-placeholder="props.form.accPlaceholder" :forgot-password-href="props.form.forgotPassword.href"
:forgot-password-target="props.form.forgotPassword.target" :forgot-password-text="props.form.forgotPassword.text"
:acc-placeholder="props.form.accPlaceholder"
:forgot-password-href="props.form.forgotPassword.href"
:forgot-password-target="props.form.forgotPassword.target"
:forgot-password-text="props.form.forgotPassword.text"
:passw-placeholder="props.form.passwPlaceholder"
:remember-me-label="props.form.rememberMeLabel"
:remember-storage-key="props.form.rememberStorageKey" :submit-text="props.form.submitText"
@forgot-password="handleForgotPassword" @submit="handleLogin">
:remember-storage-key="props.form.rememberStorageKey"
:submit-text="props.form.submitText"
@forgot-password="handleForgotPassword"
@submit="handleLogin"
>
<template v-if="props.form.withCaptcha" #verify>
<LoginVerify
:captcha="props.form.captcha" :captcha-placeholder="props.form.captchaPlaceholder"
:error-message="props.form.captchaErrorMessage" :loading="props.form.captchaLoading"
:model-value="props.form.captchaValue" :refresh-title="props.form.refreshTitle"
:verified="props.form.captchaVerified" :verify-text="props.form.verifyText"
@refresh="handleCaptchaRefresh" @update:model-value="handleCaptchaChange" />
:captcha="props.form.captcha"
:captcha-placeholder="props.form.captchaPlaceholder"
:error-message="props.form.captchaErrorMessage"
:loading="props.form.captchaLoading"
:model-value="props.form.captchaValue"
:refresh-title="props.form.refreshTitle"
:verified="props.form.captchaVerified"
:verify-text="props.form.verifyText"
@refresh="handleCaptchaRefresh"
@update:model-value="handleCaptchaChange"
/>
</template>
</LoginForm>
<div class="mt-8 text-center text-caption text-grey-darken-1">
@@ -126,7 +204,8 @@ class="d-none d-md-block" :welcome-description="props.header.welcomeDescription"
<v-list-item v-for="item in mobileAnnouncementItems" :key="item.id">
<v-list-item-title>{{ item.content }}</v-list-item-title>
<v-list-item-subtitle v-if="item.title || item.createdAt">
{{ item.title }}<span v-if="item.title && item.createdAt"> ・ </span>{{ item.createdAt }}
{{ item.title }}<span v-if="item.title && item.createdAt"> ・ </span
>{{ item.createdAt }}
</v-list-item-subtitle>
</v-list-item>
<v-list-item v-if="mobileAnnouncementItems.length === 0">
@@ -390,7 +469,6 @@ function handleForgotPassword (e: MouseEvent) {
function handleSelectAnnouncement(item: AnnouncementItemConfig) {
emit('select-announcement', item)
}
</script>
<style scoped>
@@ -409,7 +487,6 @@ function handleSelectAnnouncement (item: AnnouncementItemConfig) {
}
@keyframes mobile-banner-breathe {
0%,
100% {
opacity: 0.9;
@@ -429,9 +506,11 @@ function handleSelectAnnouncement (item: AnnouncementItemConfig) {
}
.illustration-panel {
background: linear-gradient(135deg,
background: linear-gradient(
135deg,
rgb(var(--v-theme-background)) 0%,
rgb(var(--v-theme-surface)) 100%);
rgb(var(--v-theme-surface)) 100%
);
border-right: 1px solid rgba(var(--v-theme-on-surface), 0.05);
}
src/components/SKMenuManagement.vue
+3 -1
View File
@@ -143,7 +143,9 @@ const emit = defineEmits(['edit', 'refresh', 'settings', 'toggle-expand'])
const editDialogOpen = ref(false)
const selectedItem = ref<MenuItem | null>(null)
function normalizeOptions (options: Array<string | number | { title: string; value: string | number }>) {
function normalizeOptions(
options: Array<string | number | { title: string; value: string | number }>
) {
return options.map((o) => {
if (typeof o === 'string' || typeof o === 'number') {
return { title: String(o), value: o }
src/components/base/SKTableActionBar.vue
+7 -1
View File
@@ -30,7 +30,13 @@
<v-tooltip :disabled="!refreshTooltipText" location="top" :text="refreshTooltipText">
<template #activator="{ props: activatorProps }">
<v-btn v-bind="activatorProps" density="comfortable" icon variant="text" @click="$emit('refresh')">
<v-btn
v-bind="activatorProps"
density="comfortable"
icon
variant="text"
@click="$emit('refresh')"
>
<v-icon :icon="mdiRefresh" />
</v-btn>
</template>
src/components/base/login/LoginAnnouncementBoard.vue
+15 -8
View File
@@ -1,6 +1,8 @@
<template>
<v-card class="w-100 h-100 d-flex flex-column bg-transparent pa-2 pa-lg-4" elevation="3">
<v-card-title class="text-h6 text-lg-h5 font-weight-bold text-accent mb-4">{{ title }}</v-card-title>
<v-card-title class="text-h6 text-lg-h5 font-weight-bold text-accent mb-4">{{
title
}}</v-card-title>
<v-tabs v-model="activeTab" class="mb-3" color="primary" density="comfortable">
<v-tab v-for="tab in normalizedTabs" :key="tab.value" :value="tab.value">
@@ -23,8 +25,11 @@
<td class="text-no-wrap">{{ item.school }}</td>
<td>
<v-btn
class="px-0 text-none justify-start" color="primary" variant="text"
@click="emit('select-announcement', item)">
class="px-0 text-none justify-start"
color="primary"
variant="text"
@click="emit('select-announcement', item)"
>
{{ item.title }}
</v-btn>
</td>
@@ -41,17 +46,18 @@ class="px-0 text-none justify-start" color="primary" variant="text"
{{ item.content }}
</v-list-item-title>
<v-list-item-subtitle v-if="item.title || item.createdAt">
{{ item.title }}<span v-if="item.title && item.createdAt"> ・ </span>{{ item.createdAt }}
{{ item.title }}<span v-if="item.title && item.createdAt"> ・ </span
>{{ item.createdAt }}
</v-list-item-subtitle>
</v-list-item>
<v-list-item v-if="systemPageItems.length === 0" class="h-100">
<v-list-item-title class="text-center text-medium-emphasis">{{ emptyText }}</v-list-item-title>
<v-list-item-title class="text-center text-medium-emphasis">{{
emptyText
}}</v-list-item-title>
</v-list-item>
</v-list>
</div>
<div class="d-flex justify-space-between align-center mt-auto pt-3">
<span class="text-caption text-medium-emphasis">
{{ paginationLabel }} {{ totalItems }}
@@ -125,7 +131,8 @@ const systemTab = computed<AnnouncementTab>(() => ({
}))
const normalizedTabs = computed<AnnouncementTab[]>(() => {
const baseTabs = props.tabs.length > 0 ? props.tabs : [{ label: props.allTabLabel, value: allTabValue }]
const baseTabs =
props.tabs.length > 0 ? props.tabs : [{ label: props.allTabLabel, value: allTabValue }]
if (baseTabs.some((tab) => tab.value === systemTabValue)) return baseTabs
return [...baseTabs, systemTab.value]
})
src/components/base/login/LoginForm.vue
+40 -10
View File
@@ -1,29 +1,59 @@
<template>
<v-form @submit.prevent="$emit('submit', { username, password, rememberMe })">
<v-text-field
v-model="username" bg-color="surface" class="mb-6 mb-md-4" color="primary"
density="comfortable" hide-details :placeholder="props.accPlaceholder" variant="outlined"></v-text-field>
v-model="username"
bg-color="surface"
class="mb-6 mb-md-4"
color="primary"
density="comfortable"
hide-details
:placeholder="props.accPlaceholder"
variant="outlined"
></v-text-field>
<v-text-field
v-model="password" :append-inner-icon="showPassword ? mdiEyeOff : mdiEye" bg-color="surface"
class="mb-6 mb-md-4" color="primary" density="comfortable" hide-details :placeholder="props.passwPlaceholder" :type="showPassword ? 'text' : 'password'"
v-model="password"
:append-inner-icon="showPassword ? mdiEyeOff : mdiEye"
bg-color="surface"
class="mb-6 mb-md-4"
color="primary"
density="comfortable"
hide-details
:placeholder="props.passwPlaceholder"
:type="showPassword ? 'text' : 'password'"
variant="outlined"
@click:append-inner="showPassword = !showPassword"></v-text-field>
@click:append-inner="showPassword = !showPassword"
></v-text-field>
<slot name="verify"></slot>
<div class="d-flex align-center justify-space-between mb-6 mb-md-4">
<v-checkbox
v-model="rememberMe" color="primary" density="compact" hide-details
:label="props.rememberMeLabel"></v-checkbox>
v-model="rememberMe"
color="primary"
density="compact"
hide-details
:label="props.rememberMeLabel"
></v-checkbox>
<a
class="text-body-2 text-primary text-decoration-none" :href="props.forgotPasswordHref || '#'"
:target="props.forgotPasswordTarget" @click="handleForgotPasswordClick">
class="text-body-2 text-primary text-decoration-none"
:href="props.forgotPasswordHref || '#'"
:target="props.forgotPasswordTarget"
@click="handleForgotPasswordClick"
>
{{ props.forgotPasswordText }}
</a>
</div>
<v-btn block class="mb-6 font-weight-bold" color="primary" elevation="0" height="48" size="large" type="submit">
<v-btn
block
class="mb-6 font-weight-bold"
color="primary"
elevation="0"
height="48"
size="large"
type="submit"
>
{{ props.submitText }}
</v-btn>
</v-form>
src/components/base/login/LoginToolBar.vue
+2 -2
View File
@@ -6,7 +6,8 @@
:icon="mdiPaletteOutline"
size="small"
variant="text"
@click="toggleTheme"></v-btn>
@click="toggleTheme"
></v-btn>
<v-menu location="bottom end">
<template #activator="{ props: menuActivatorProps }">
<v-btn
@@ -78,5 +79,4 @@ function handleSelectLocale (locale: string) {
if (locale === props.locale) return
emit('change-locale', locale)
}
</script>
src/components/base/login/LoginVerify.vue
+16 -5
View File
@@ -7,17 +7,28 @@
<div v-else class="d-flex align-center gap-2">
<!-- Captcha Image and Refresh -->
<div
class="captcha-wrapper d-flex align-center cursor-pointer me-1 me-md-2" :title="props.refreshTitle"
@click="handleRefresh">
class="captcha-wrapper d-flex align-center cursor-pointer me-1 me-md-2"
:title="props.refreshTitle"
@click="handleRefresh"
>
<img v-if="captchaImage" alt="Captcha" class="captcha-img" :src="captchaImage" />
<v-icon class="ms-2" color="grey" :icon="mdiRefresh"></v-icon>
</div>
<!-- Input and Verify -->
<v-text-field
v-model="inputCode" :append-inner-icon="props.verified ? mdiCheckCircle : undefined" bg-color="surface" class="flex-grow-1"
color="primary" density="compact" :disabled="props.verified" :error="!!errorMsg" hide-details
:placeholder="props.captchaPlaceholder" variant="outlined">
v-model="inputCode"
:append-inner-icon="props.verified ? mdiCheckCircle : undefined"
bg-color="surface"
class="flex-grow-1"
color="primary"
density="compact"
:disabled="props.verified"
:error="!!errorMsg"
hide-details
:placeholder="props.captchaPlaceholder"
variant="outlined"
>
<template v-if="props.verified" #append-inner>
<v-icon color="success" :icon="mdiCheckCircle" />
</template>
src/components/layouts/SKSimpleLayout.vue
+6 -3
View File
@@ -13,13 +13,16 @@
import type { AdminLayoutMenuItem } from './sk-admin-layout/types'
import SKAdminLayout from './SKAdminLayout.vue'
withDefaults(defineProps<{
withDefaults(
defineProps<{
systemTitle?: string
menuItems?: AdminLayoutMenuItem[]
}>(), {
}>(),
{
systemTitle: '簡潔模式',
menuItems: () => [],
})
}
)
defineEmits<{
select: [item: AdminLayoutMenuItem]
src/components/layouts/sk-admin-layout/SkAdminAppBarBreadcrumbCol.vue
+15 -4
View File
@@ -1,18 +1,29 @@
<template>
<v-col
v-if="features.showBreadcrumb && breadcrumbBarVisible && !isMobile"
class="d-flex align-center justify-space-between pr-2 pl-3 py-1 bg-surface">
class="d-flex align-center justify-space-between pr-2 pl-3 py-1 bg-surface"
>
<v-breadcrumbs class="pa-0" density="compact" :items="breadcrumbItems">
<template #prepend>
<v-btn
v-if="features.showFavorites && !showFavoritesBar" class="mr-2" color="primary" size="small"
variant="outlined" @click="emit('toggle-favorites-bar', true)">
v-if="features.showFavorites && !showFavoritesBar"
class="mr-2"
color="primary"
size="small"
variant="outlined"
@click="emit('toggle-favorites-bar', true)"
>
常用
</v-btn>
</template>
<template #item="{ item }">
<div class="d-flex align-center ga-1">
<v-icon v-if="getBreadcrumbIcon(item)" class="mr-1" size="14" :icon="getBreadcrumbIcon(item)" />
<v-icon
v-if="getBreadcrumbIcon(item)"
class="mr-1"
size="14"
:icon="getBreadcrumbIcon(item)"
/>
<span class="text-caption text-no-wrap">{{ getBreadcrumbTitle(item) }}</span>
</div>
</template>
src/components/layouts/sk-admin-layout/SkAdminAppBarFavoritesCol.vue
+19 -6
View File
@@ -1,23 +1,36 @@
<template>
<v-col
v-if="features.showFavorites && showFavoritesBar && !isMobile"
class="d-flex align-center pr-2 pl-3 py-1 bg-surface">
class="d-flex align-center pr-2 pl-3 py-1 bg-surface"
>
<div class="favorites-label text-body-2 text-no-wrap pe-2">
{{ favoritesConfig.label }}
</div>
<div class="favorites-list flex-grow-1 d-flex flex-wrap ga-2">
<transition-group class="d-flex flex-wrap ga-2" name="favorite-list" tag="div">
<v-chip
v-for="item in favoriteItems" :key="item.path ?? item.title" class="favorite-item" closable
color="secondary" size="small" variant="outlined" @click="emit('select', item)"
@click:close="emit('remove-favorite', item)">
v-for="item in favoriteItems"
:key="item.path ?? item.title"
class="favorite-item"
closable
color="secondary"
size="small"
variant="outlined"
@click="emit('select', item)"
@click:close="emit('remove-favorite', item)"
>
<v-icon v-if="item.icon" class="me-1" size="16" :icon="item.icon" />
<span class="text-caption">{{ item.title }}</span>
</v-chip>
</transition-group>
<v-btn
v-if="favoritesConfig.showAdd" class="favorite-add" color="primary" size="small" variant="outlined"
@click="emit('add-favorite')">
v-if="favoritesConfig.showAdd"
class="favorite-add"
color="primary"
size="small"
variant="outlined"
@click="emit('add-favorite')"
>
<v-icon class="mr-1" size="16" :icon="mdiPlus" />
<span class="text-caption">{{ favoritesConfig.addLabel }}</span>
</v-btn>
src/components/layouts/sk-admin-layout/SkAdminAppBarTopCol.vue
+110 -27
View File
@@ -1,19 +1,38 @@
<template>
<v-col class="d-flex align-center bg-surface pr-2 pl-2 pl-m-3 py-1">
<v-btn v-if="isMobile" :icon="mdiMenu" size="small" variant="text" @click="emit('toggle-drawer')"></v-btn>
<v-btn
v-if="isMobile"
:icon="mdiMenu"
size="small"
variant="text"
@click="emit('toggle-drawer')"
></v-btn>
<div v-if="features.showSearch" class="search-input-wrapper">
<span id="admin-layout-search-label" class="sr-only">{{ searchConfig.label }}</span>
<v-text-field
v-model="searchValueModel" aria-labelledby="admin-layout-search-label" :aria-label="searchConfig.label"
class="search-input" density="compact" hide-details name="layout-search"
:placeholder="searchConfig.placeholder" variant="outlined"
@keyup.enter="triggerSearch">
v-model="searchValueModel"
aria-labelledby="admin-layout-search-label"
:aria-label="searchConfig.label"
class="search-input"
density="compact"
hide-details
name="layout-search"
:placeholder="searchConfig.placeholder"
variant="outlined"
@keyup.enter="triggerSearch"
>
<template v-if="!isMobile" #prepend-inner>
<v-icon size="small" :icon="mdiMagnify" />
</template>
<template #append-inner>
<v-btn :aria-label="searchConfig.label" color="primary" size="small" variant="text" @click="triggerSearch">
<v-btn
:aria-label="searchConfig.label"
color="primary"
size="small"
variant="text"
@click="triggerSearch"
>
開始搜尋
</v-btn>
</template>
@@ -22,16 +41,24 @@ v-model="searchValueModel" aria-labelledby="admin-layout-search-label" :aria-lab
<div v-if="features.showToolbarActions" class="top-actions">
<slot name="actions">
<!-- 通知 -->
<v-tooltip location="bottom" :text="toolbarActions.notificationsLabel">
<template #activator="{ props: activatorProps }">
<v-btn
v-bind="activatorProps" :aria-label="toolbarActions.notificationsLabel" icon size="small" variant="text"
@click="emit('action', 'notifications')">
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"
offset-x="4" offset-y="-2">
v-if="toolbarCounts.notifications"
color="error"
:content="toolbarCounts.notifications"
offset-x="4"
offset-y="-2"
>
<v-icon :icon="mdiBellOutline" />
</v-badge>
<v-icon v-else :icon="mdiBellOutline" />
@@ -43,11 +70,20 @@ v-if="toolbarCounts.notifications" color="error" :content="toolbarCounts.notific
<v-tooltip location="bottom" :text="toolbarActions.messagesLabel">
<template #activator="{ props: activatorProps }">
<v-btn
v-bind="activatorProps" :aria-label="toolbarActions.messagesLabel" icon size="small" variant="text"
@click="emit('action', 'messages')">
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"
offset-y="-2">
v-if="toolbarCounts.messages"
color="warning"
:content="toolbarCounts.messages"
offset-x="4"
offset-y="-2"
>
<v-icon :icon="mdiMessageTextOutline" />
</v-badge>
<v-icon v-else :icon="mdiMessageTextOutline" />
@@ -59,8 +95,13 @@ v-if="toolbarCounts.messages" color="warning" :content="toolbarCounts.messages"
<v-tooltip v-if="false" location="bottom" :text="toolbarActions.helpLabel">
<template #activator="{ props: activatorProps }">
<v-btn
v-bind="activatorProps" :aria-label="toolbarActions.helpLabel" icon size="small" variant="text"
@click="emit('action', 'help')">
v-bind="activatorProps"
:aria-label="toolbarActions.helpLabel"
icon
size="small"
variant="text"
@click="emit('action', 'help')"
>
<v-icon :icon="mdiHelp" />
</v-btn>
</template>
@@ -72,8 +113,12 @@ v-bind="activatorProps" :aria-label="toolbarActions.helpLabel" icon size="small"
<v-tooltip location="bottom" :text="toolbarActions.settingsLabel">
<template #activator="{ props: tooltipProps }">
<v-btn
v-bind="{ ...menuProps, ...tooltipProps }" :aria-label="toolbarActions.settingsLabel" icon size="small"
variant="text">
v-bind="{ ...menuProps, ...tooltipProps }"
:aria-label="toolbarActions.settingsLabel"
icon
size="small"
variant="text"
>
<v-icon :icon="mdiCogOutline" />
</v-btn>
</template>
@@ -82,16 +127,26 @@ v-bind="{ ...menuProps, ...tooltipProps }" :aria-label="toolbarActions.settingsL
<v-list density="compact" width="180">
<v-list-subheader class="text-subtitle-1 py-2">顯示設定</v-list-subheader>
<v-list-item>
<v-switch v-model="showFavoritesBarModel" color="primary" density="comfortable" hide-details>
<v-switch
v-model="showFavoritesBarModel"
color="primary"
density="comfortable"
hide-details
>
<template #label>
<span class="text-body-2" style="width: 8ch;">常用功能</span>
<span class="text-body-2" style="width: 8ch">常用功能</span>
</template>
</v-switch>
</v-list-item>
<v-list-item>
<v-switch v-model="breadcrumbBarVisibleModel" color="primary" density="comfortable" hide-details>
<v-switch
v-model="breadcrumbBarVisibleModel"
color="primary"
density="comfortable"
hide-details
>
<template #label>
<span class="text-body-2" style="width: 8ch;">路徑</span>
<span class="text-body-2" style="width: 8ch">路徑</span>
</template>
</v-switch>
</v-list-item>
@@ -101,7 +156,14 @@ v-bind="{ ...menuProps, ...tooltipProps }" :aria-label="toolbarActions.settingsL
<!-- 登出 -->
<v-tooltip location="bottom" :text="logoutLabel">
<template #activator="{ props: activatorProps }">
<v-btn v-bind="activatorProps" :aria-label="logoutLabel" icon size="small" variant="text" @click="emit('logout')">
<v-btn
v-bind="activatorProps"
:aria-label="logoutLabel"
icon
size="small"
variant="text"
@click="emit('logout')"
>
<v-icon :icon="mdiLogout" />
</v-btn>
</template>
@@ -109,7 +171,13 @@ v-bind="{ ...menuProps, ...tooltipProps }" :aria-label="toolbarActions.settingsL
<v-tooltip v-if="features.showThemeToggle" location="bottom" :text="themeToggleLabel">
<template #activator="{ props: activatorProps }">
<v-btn v-bind="activatorProps" :aria-label="themeToggleLabel" icon variant="text" @click="emit('toggle-theme')">
<v-btn
v-bind="activatorProps"
:aria-label="themeToggleLabel"
icon
variant="text"
@click="emit('toggle-theme')"
>
<v-icon :icon="mdiPaletteOutline" />
</v-btn>
</template>
@@ -120,8 +188,23 @@ 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 type {
AdminLayoutActionType,
AdminLayoutFeatures,
AdminLayoutSearchConfig,
AdminLayoutToolbarActions,
AdminLayoutToolbarCounts,
} from './types'
import {
mdiBellOutline,
mdiCogOutline,
mdiHelp,
mdiLogout,
mdiMagnify,
mdiMenu,
mdiMessageTextOutline,
mdiPaletteOutline,
} from '@mdi/js'
import { computed } from 'vue'
interface Props {
src/components/layouts/sk-admin-layout/SkAdminDrawerDesktopMenu.vue
+83 -26
View File
@@ -1,23 +1,42 @@
<template>
<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" :id="getGroupId(item)" :value="getGroupValue(item)">
<v-list-group
v-if="item.subItems?.length"
:id="getGroupId(item)"
:value="getGroupValue(item)"
>
<template #activator="{ props: activatorProps }">
<v-list-item
v-bind="isShrink ? undefined : activatorProps" :class="{ 'px-0': isShrink }"
:link="isNavigable(item) && !!item.path" :to="isNavigable(item) ? item.path : undefined" @click="emitSelect(item)">
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" />
<v-btn v-if="isShrink && !item.icon" class="" rounded size="36" spaced="start" variant="text">{{
item.title?.charAt(0) }}</v-btn>
<v-btn
v-if="isShrink && !item.icon"
class=""
rounded
size="36"
spaced="start"
variant="text"
>{{ item.title?.charAt(0) }}</v-btn
>
</template>
<template #title>
<span v-if="!isShrink" class="text-body-2 nav-text-overflow">{{ item.title }}</span>
</template>
<template #append>
<v-chip
v-if="!isShrink && getItemCount(item) > 0" class="menu-count" color="secondary" size="x-small"
variant="tonal">
v-if="!isShrink && getItemCount(item) > 0"
class="menu-count"
color="secondary"
size="x-small"
variant="tonal"
>
{{ getItemCount(item) }}
</v-chip>
</template>
@@ -28,19 +47,27 @@ v-if="!isShrink && getItemCount(item) > 0" class="menu-count" color="secondary"
<v-list-group
v-if="subItem.subItems?.length"
:id="getGroupId(subItem, getGroupId(item))"
:value="getGroupValue(subItem, getGroupValue(item))">
:value="getGroupValue(subItem, getGroupValue(item))"
>
<template #activator="{ props: subProps }">
<v-list-item
v-bind="subProps" :link="isNavigable(subItem)"
:prepend-icon="subItem.icon || mdiMenuRight" :to="isNavigable(subItem) ? subItem.path : undefined"
@click="emitSelect(subItem)">
v-bind="subProps"
:link="isNavigable(subItem)"
:prepend-icon="subItem.icon || mdiMenuRight"
:to="isNavigable(subItem) ? subItem.path : undefined"
@click="emitSelect(subItem)"
>
<template #title>
<span class="text-body-2 nav-text-overflow">{{ subItem.title }}</span>
</template>
<template #append>
<v-chip
v-if="getItemCount(subItem) > 0" class="menu-count" color="secondary" size="x-small"
variant="tonal">
v-if="getItemCount(subItem) > 0"
class="menu-count"
color="secondary"
size="x-small"
variant="tonal"
>
{{ getItemCount(subItem) }}
</v-chip>
</template>
@@ -48,13 +75,19 @@ v-if="getItemCount(subItem) > 0" class="menu-count" color="secondary" size="x-sm
</template>
<v-list-item
v-for="subSubItem in subItem.subItems" :key="subSubItem.path ?? subSubItem.title"
:link="!!subSubItem.path" :prepend-icon="mdiCircleSmall" :to="subSubItem.path"
@click="emitSelect(subSubItem)">
v-for="subSubItem in subItem.subItems"
:key="subSubItem.path ?? subSubItem.title"
:link="!!subSubItem.path"
:prepend-icon="mdiCircleSmall"
:to="subSubItem.path"
@click="emitSelect(subSubItem)"
>
<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>
<span v-bind="tooltipProps" class="text-body-2 nav-text-overflow">{{
subSubItem.title
}}</span>
</template>
</v-tooltip>
</template>
@@ -62,12 +95,18 @@ v-for="subSubItem in subItem.subItems" :key="subSubItem.path ?? subSubItem.title
</v-list-group>
<v-list-item
v-else :link="!!subItem.path" :prepend-icon="subItem.icon || mdiMenuRight" :to="subItem.path"
@click="emitSelect(subItem)">
v-else
:link="!!subItem.path"
:prepend-icon="subItem.icon || mdiMenuRight"
:to="subItem.path"
@click="emitSelect(subItem)"
>
<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>
<span v-bind="tooltipProps" class="text-body-2 nav-text-overflow">{{
subItem.title
}}</span>
</template>
</v-tooltip>
</template>
@@ -75,16 +114,31 @@ v-else :link="!!subItem.path" :prepend-icon="subItem.icon || mdiMenuRight" :to="
</template>
</v-list-group>
<v-list-item v-else :class="{ 'px-0': isShrink }" :link="!!item.path" :to="item.path" @click="emitSelect(item)">
<v-list-item
v-else
:class="{ 'px-0': isShrink }"
:link="!!item.path"
:to="item.path"
@click="emitSelect(item)"
>
<template #prepend>
<v-icon v-if="item.icon" size="20" :icon="item.icon" />
<v-btn v-if="isShrink && !item.icon" class="" rounded size="36" spaced="start" variant="text">{{
item.title?.charAt(0) }}</v-btn>
<v-btn
v-if="isShrink && !item.icon"
class=""
rounded
size="36"
spaced="start"
variant="text"
>{{ item.title?.charAt(0) }}</v-btn
>
</template>
<template #title>
<v-tooltip v-if="!isShrink" location="end" :text="item.title">
<template #activator="{ props: tooltipProps }">
<span v-bind="tooltipProps" class="text-body-2 nav-text-overflow">{{ item.title }}</span>
<span v-bind="tooltipProps" class="text-body-2 nav-text-overflow">{{
item.title
}}</span>
</template>
</v-tooltip>
</template>
@@ -126,11 +180,14 @@ const openedModel = computed({
})
// 當側邊欄收縮時，自動收起所有展開的子選單
watch(() => props.isShrink, (newVal) => {
watch(
() => props.isShrink,
(newVal) => {
if (newVal) {
openedModel.value = []
}
})
}
)
const isNavigable = (item: AdminLayoutMenuItem) => item?.navigable !== false
src/components/layouts/sk-admin-layout/SkAdminDrawerMobileFavoritesPanel.vue
+12 -5
View File
@@ -2,8 +2,12 @@
<v-sheet class="mobile-favorites-panel d-flex flex-column" color="surface">
<v-list class="px-2 py-2 flex-grow-1 overflow-auto" density="comfortable">
<v-list-item
v-for="item in favoriteItems" :key="item.path ?? item.title" class="mb-1" rounded="lg"
@click="emit('select', item)">
v-for="item in favoriteItems"
:key="item.path ?? item.title"
class="mb-1"
rounded="lg"
@click="emit('select', item)"
>
<v-list-item-title class="text-body-2">{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
@@ -13,11 +17,14 @@ v-for="item in favoriteItems" :key="item.path ?? item.title" class="mb-1" rounde
<script setup lang="ts">
import type { AdminLayoutMenuItem } from './types'
withDefaults(defineProps<{
withDefaults(
defineProps<{
favoriteItems?: AdminLayoutMenuItem[]
}>(), {
}>(),
{
favoriteItems: () => [],
})
}
)
const emit = defineEmits<{
select: [item: AdminLayoutMenuItem]
src/components/layouts/sk-admin-layout/SkAdminDrawerMobileMenuPanel.vue
+12 -5
View File
@@ -2,8 +2,12 @@
<v-sheet class="mobile-menu-panel d-flex flex-column" color="surface">
<v-list class="px-2 py-2 flex-grow-1 overflow-auto" density="comfortable">
<v-list-item
v-for="item in mobileCurrentItems" :key="item.path ?? item.title" class="mb-1" rounded="lg"
@click="emit('item-click', item)">
v-for="item in mobileCurrentItems"
:key="item.path ?? item.title"
class="mb-1"
rounded="lg"
@click="emit('item-click', item)"
>
<v-list-item-title class="text-body-2">{{ item.title }}</v-list-item-title>
<template #append>
<v-icon size="18" :icon="item.subItems?.length ? mdiChevronRight : mdiArrowTopRight" />
@@ -17,11 +21,14 @@ v-for="item in mobileCurrentItems" :key="item.path ?? item.title" class="mb-1" r
import type { AdminLayoutMenuItem } from './types'
import { mdiArrowTopRight, mdiChevronRight } from '@mdi/js'
withDefaults(defineProps<{
withDefaults(
defineProps<{
mobileCurrentItems?: AdminLayoutMenuItem[]
}>(), {
}>(),
{
mobileCurrentItems: () => [],
})
}
)
const emit = defineEmits<{
'item-click': [item: AdminLayoutMenuItem]
src/components/layouts/sk-admin-layout/types.ts
+1 -4
View File
@@ -65,7 +65,4 @@ export interface AdminLayoutDrawerConfig {
railWidth: number
}
export type AdminLayoutActionType =
| 'notifications'
| 'messages'
| 'help'
export type AdminLayoutActionType = 'notifications' | 'messages' | 'help'
src/components/maintenance/CommonConfirmDialog.vue
+11 -3
View File
@@ -1,7 +1,10 @@
<template>
<v-dialog
:max-width="maxWidth" :model-value="modelValue" :persistent="persistent"
@update:model-value="$emit('update:modelValue', $event)">
:max-width="maxWidth"
:model-value="modelValue"
:persistent="persistent"
@update:model-value="$emit('update:modelValue', $event)"
>
<v-card>
<v-card-title class="text-h6">{{ title }}</v-card-title>
<v-card-text>
@@ -9,7 +12,12 @@
</v-card-text>
<v-card-actions class="justify-end">
<v-btn variant="text" @click="$emit('update:modelValue', false)">取消</v-btn>
<v-btn :color="confirmColor" :loading="confirmLoading" :variant="confirmVariant" @click="$emit('confirm')">
<v-btn
:color="confirmColor"
:loading="confirmLoading"
:variant="confirmVariant"
@click="$emit('confirm')"
>
{{ confirmText }}
</v-btn>
</v-card-actions>
src/components/maintenance/MntDialogCard.vue
+3 -1
View File
@@ -3,7 +3,9 @@
<v-card-title class="dialog-title d-flex align-center ga-2">
<div>
<div class="text-h6">{{ dialogTitle }}</div>
<div v-if="dialogSubtitle" class="text-body-2 text-medium-emphasis">{{ dialogSubtitle }}</div>
<div v-if="dialogSubtitle" class="text-body-2 text-medium-emphasis">
{{ dialogSubtitle }}
</div>
</div>
<v-spacer />
<v-chip v-if="isViewMode" color="info" size="small" variant="tonal">檢視中</v-chip>
src/components/maintenance/MntRecordNavToolbar.vue
+78 -21
View File
@@ -2,62 +2,119 @@
<div v-if="mobile" class="d-flex align-center flex-wrap ga-2 w-100">
<div class="d-flex align-center ga-1">
<v-btn
v-if="isViewMode || isEditMode" :disabled="!hasPrevRecord" :icon="mdiChevronLeft" size="small" variant="text"
@click="$emit('prev')" />
v-if="isViewMode || isEditMode"
:disabled="!hasPrevRecord"
:icon="mdiChevronLeft"
size="small"
variant="text"
@click="$emit('prev')"
/>
<v-btn
v-if="isViewMode || isEditMode" :disabled="!hasNextRecord" :icon="mdiChevronRight" size="small" variant="text"
@click="$emit('next')" />
v-if="isViewMode || isEditMode"
:disabled="!hasNextRecord"
:icon="mdiChevronRight"
size="small"
variant="text"
@click="$emit('next')"
/>
</div>
<v-spacer />
<v-btn
v-if="isViewMode" color="primary" :prepend-icon="mdiPencil" size="small" variant="tonal"
@click="$emit('switch-to-edit')">
v-if="isViewMode"
color="primary"
:prepend-icon="mdiPencil"
size="small"
variant="tonal"
@click="$emit('switch-to-edit')"
>
{{ editLabel }}
</v-btn>
<v-btn
v-if="isEditMode" color="primary" :prepend-icon="mdiEye" size="small" variant="tonal"
@click="$emit('switch-to-view')">
v-if="isEditMode"
color="primary"
:prepend-icon="mdiEye"
size="small"
variant="tonal"
@click="$emit('switch-to-view')"
>
{{ viewLabel }}
</v-btn>
</div>
<template v-else>
<v-btn
v-if="isViewMode || isEditMode" :disabled="!hasPrevRecord" :prepend-icon="mdiSkipPrevious" size="small"
variant="text" @click="$emit('first')">
v-if="isViewMode || isEditMode"
:disabled="!hasPrevRecord"
:prepend-icon="mdiSkipPrevious"
size="small"
variant="text"
@click="$emit('first')"
>
{{ firstLabel }}
</v-btn>
<v-btn
v-if="isViewMode || isEditMode" :disabled="!hasPrevRecord" :prepend-icon="mdiChevronLeft" size="small"
variant="text" @click="$emit('prev')">
v-if="isViewMode || isEditMode"
:disabled="!hasPrevRecord"
:prepend-icon="mdiChevronLeft"
size="small"
variant="text"
@click="$emit('prev')"
>
{{ prevLabel }}
</v-btn>
<v-btn
v-if="isViewMode || isEditMode" :append-icon="mdiChevronRight" :disabled="!hasNextRecord" size="small"
variant="text" @click="$emit('next')">
v-if="isViewMode || isEditMode"
:append-icon="mdiChevronRight"
:disabled="!hasNextRecord"
size="small"
variant="text"
@click="$emit('next')"
>
{{ nextLabel }}
</v-btn>
<v-btn
v-if="isViewMode || isEditMode" :append-icon="mdiSkipNext" :disabled="!hasNextRecord" size="small"
variant="text" @click="$emit('last')">
v-if="isViewMode || isEditMode"
:append-icon="mdiSkipNext"
:disabled="!hasNextRecord"
size="small"
variant="text"
@click="$emit('last')"
>
{{ lastLabel }}
</v-btn>
<v-spacer />
<v-btn
v-if="isViewMode" color="primary" :prepend-icon="mdiPencil" size="small" variant="tonal"
@click="$emit('switch-to-edit')">
v-if="isViewMode"
color="primary"
:prepend-icon="mdiPencil"
size="small"
variant="tonal"
@click="$emit('switch-to-edit')"
>
{{ editLabel }}
</v-btn>
<v-btn
v-if="isEditMode" color="primary" :prepend-icon="mdiEye" size="small" variant="tonal"
@click="$emit('switch-to-view')">
v-if="isEditMode"
color="primary"
:prepend-icon="mdiEye"
size="small"
variant="tonal"
@click="$emit('switch-to-view')"
>
{{ viewLabel }}
</v-btn>
</template>
</template>
<script setup lang="ts">
import { mdiChevronLeft, mdiChevronRight, mdiEye, mdiPencil, mdiSkipNext, mdiSkipPrevious } from '@mdi/js'
import {
mdiChevronLeft,
mdiChevronRight,
mdiEye,
mdiPencil,
mdiSkipNext,
mdiSkipPrevious,
} from '@mdi/js'
defineProps({
isViewMode: {
type: Boolean,
src/components/maintenance/master-detail-b/MasterDetailBSemesterSection.vue
+10 -1
View File
@@ -170,7 +170,16 @@
<script setup lang="ts">
import type { CourseRecord, SemesterRecord } from '@/stores/semesters'
import { mdiArrowDown, mdiArrowUp, mdiBookOpenOutline, mdiChevronRight, mdiDeleteOutline, mdiPlus, mdiSchool, mdiSwapVertical } from '@mdi/js'
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/MasterDetailCCourseMobilePanel.vue
+3 -1
View File
@@ -114,7 +114,9 @@
:model-value="course.credits"
type="number"
variant="outlined"
@update:model-value="(value) => updateCourse(idx, { credits: Number(value) || 0 })"
@update:model-value="
(value) => updateCourse(idx, { credits: Number(value) || 0 })
"
/>
<v-text-field
density="comfortable"
src/components/maintenance/master-detail-c/MasterDetailCCourseSection.vue
+74 -19
View File
@@ -4,18 +4,27 @@
子檔資料示範
<v-spacer />
<v-btn
v-if="!isMobile && !isFormReadonly && !isFormLocked" color="primary" :prepend-icon="mdiPlus" size="small"
variant="tonal" @click="$emit('add-course')">
v-if="!isMobile && !isFormReadonly && !isFormLocked"
color="primary"
:prepend-icon="mdiPlus"
size="small"
variant="tonal"
@click="$emit('add-course')"
>
新增成績
</v-btn>
</div>
<div v-if="isMobile" class="d-flex flex-column ga-3">
<v-card
v-for="semester in semesters" :key="semester.id" class="cursor-pointer" :class="{ 'border-opacity-100': selectedSemesterId === semester.id }"
v-for="semester in semesters"
:key="semester.id"
class="cursor-pointer"
:class="{ 'border-opacity-100': selectedSemesterId === semester.id }"
:color="selectedSemesterId === semester.id ? 'primary' : undefined"
variant="outlined"
@click="$emit('select-semester', semester.id)">
@click="$emit('select-semester', semester.id)"
>
<v-card-text class="pa-4">
<div class="d-flex align-start justify-space-between ga-3">
<div>
@@ -34,13 +43,18 @@ v-for="semester in semesters" :key="semester.id" class="cursor-pointer" :class="
</v-card>
</div>
<div v-else class="flex-grow-1" style="min-height: 0;">
<div v-else class="flex-grow-1" style="min-height: 0">
<div class="d-flex flex-column ga-3 overflow-y-auto pr-1 h-100">
<v-card class="flex-shrink-0" variant="flat">
<v-card-text class="pa-2">
<v-data-table
class="border rounded" density="compact" :headers="headers" hide-default-footer
:items="flattenedCourses" :items-per-page="-1">
class="border rounded"
density="compact"
:headers="headers"
hide-default-footer
:items="flattenedCourses"
:items-per-page="-1"
>
<template #[`item.semesterName`]="slotProps">
{{ slotProps.item.semesterName }}
</template>
@@ -50,23 +64,56 @@ class="border rounded" density="compact" :headers="headers" hide-default-footer
<template #[`item.credits`]="slotProps">
<span v-if="isFormReadonly">{{ slotProps.item.credits }}</span>
<v-text-field
v-else :aria-label="`${slotProps.item.semesterName} ${slotProps.item.name} 學分`" density="compact" :disabled="isFormLocked" hide-details
hide-spin-buttons :model-value="slotProps.item.credits" :name="`semester-${slotProps.item.semesterId}-course-${slotProps.item.courseIndex}-credits`" type="number" variant="outlined" @update:model-value="
(value) => $emit('update-course', slotProps.item.semesterId, slotProps.item.courseIndex, { credits: Number(value) || 0 })
" />
v-else
:aria-label="`${slotProps.item.semesterName} ${slotProps.item.name} 學分`"
density="compact"
:disabled="isFormLocked"
hide-details
hide-spin-buttons
:model-value="slotProps.item.credits"
:name="`semester-${slotProps.item.semesterId}-course-${slotProps.item.courseIndex}-credits`"
type="number"
variant="outlined"
@update:model-value="
(value) =>
$emit('update-course', slotProps.item.semesterId, slotProps.item.courseIndex, {
credits: Number(value) || 0,
})
"
/>
</template>
<template #[`item.score`]="slotProps">
<span v-if="isFormReadonly">{{ slotProps.item.score }}</span>
<v-text-field
v-else :aria-label="`${slotProps.item.semesterName} ${slotProps.item.name} 分數`" density="compact" :disabled="isFormLocked" hide-details
hide-spin-buttons :model-value="slotProps.item.score" :name="`semester-${slotProps.item.semesterId}-course-${slotProps.item.courseIndex}-score`" type="number" variant="outlined" @update:model-value="
(value) => $emit('update-course', slotProps.item.semesterId, slotProps.item.courseIndex, { score: Number(value) || 0 })
" />
v-else
:aria-label="`${slotProps.item.semesterName} ${slotProps.item.name} 分數`"
density="compact"
:disabled="isFormLocked"
hide-details
hide-spin-buttons
:model-value="slotProps.item.score"
:name="`semester-${slotProps.item.semesterId}-course-${slotProps.item.courseIndex}-score`"
type="number"
variant="outlined"
@update:model-value="
(value) =>
$emit('update-course', slotProps.item.semesterId, slotProps.item.courseIndex, {
score: Number(value) || 0,
})
"
/>
</template>
<template #[`item.actions`]="slotProps">
<v-btn
color="error" :disabled="isFormLocked" :icon="mdiDelete" size="small" variant="text"
@click="$emit('delete-course', slotProps.item.semesterId, slotProps.item.courseIndex)" />
color="error"
:disabled="isFormLocked"
:icon="mdiDelete"
size="small"
variant="text"
@click="
$emit('delete-course', slotProps.item.semesterId, slotProps.item.courseIndex)
"
/>
</template>
</v-data-table>
</v-card-text>
@@ -74,7 +121,10 @@ color="error" :disabled="isFormLocked" :icon="mdiDelete" size="small" variant="t
</div>
</div>
<div v-if="semesters.length === 0" class="text-caption text-center py-6 text-medium-emphasis border border-dashed rounded">
<div
v-if="semesters.length === 0"
class="text-caption text-center py-6 text-medium-emphasis border border-dashed rounded"
>
尚無成績資料
</div>
</template>
@@ -95,7 +145,12 @@ const props = defineProps<{
defineEmits<{
(event: 'select-semester', semesterId: number): void
(event: 'add-course'): void
(event: 'update-course', semesterId: number, courseIndex: number, payload: Partial<CourseRecord>): void
(
event: 'update-course',
semesterId: number,
courseIndex: number,
payload: Partial<CourseRecord>
): void
(event: 'delete-course', semesterId: number, courseIndex: number): void
}>()
src/composables/maintenance/useEditableStudentGrid.ts
+105 -19
View File
@@ -16,17 +16,94 @@ const statuses = ['在學', '休學', '畢業']
const tableHeaders = [
{ title: '', key: 'select', sortable: false, nowrap: true },
{ title: '學號', key: 'studentId', sortable: true, minWidth: 120, nowrap: true, cellProps: { class: 'px-1' } },
{ title: '姓名', key: 'name', sortable: true, minWidth: 120, nowrap: true, cellProps: { class: 'px-1' } },
{ title: '系所', key: 'department', sortable: true, minWidth: 140, nowrap: true, cellProps: { class: 'px-1' } },
{ title: '年級', key: 'grade', sortable: true, minWidth: 140, nowrap: true, cellProps: { class: 'px-1' } },
{ title: '入學年度', key: 'enrollYear', sortable: true, minWidth: 120, nowrap: true, cellProps: { class: 'px-1' } },
{ title: '已修學分', key: 'credits', sortable: true, minWidth: 120, nowrap: true, cellProps: { class: 'px-1' } },
{ title: '指導老師', key: 'advisor', sortable: true, minWidth: 120, nowrap: true, cellProps: { class: 'px-1' } },
{ title: 'Email', key: 'email', sortable: true, minWidth: 200, nowrap: true, cellProps: { class: 'px-1' } },
{ title: '電話', key: 'phone', sortable: true, minWidth: 150, nowrap: true, cellProps: { class: 'px-1' } },
{ title: '狀態', key: 'status', sortable: true, minWidth: 120, nowrap: true, cellProps: { class: 'px-1' } },
{ title: '操作', key: 'actions', sortable: false, width: 'auto', nowrap: true, cellProps: { class: 'bg-background' } },
{
title: '學號',
key: 'studentId',
sortable: true,
minWidth: 120,
nowrap: true,
cellProps: { class: 'px-1' },
},
{
title: '姓名',
key: 'name',
sortable: true,
minWidth: 120,
nowrap: true,
cellProps: { class: 'px-1' },
},
{
title: '系所',
key: 'department',
sortable: true,
minWidth: 140,
nowrap: true,
cellProps: { class: 'px-1' },
},
{
title: '年級',
key: 'grade',
sortable: true,
minWidth: 140,
nowrap: true,
cellProps: { class: 'px-1' },
},
{
title: '入學年度',
key: 'enrollYear',
sortable: true,
minWidth: 120,
nowrap: true,
cellProps: { class: 'px-1' },
},
{
title: '已修學分',
key: 'credits',
sortable: true,
minWidth: 120,
nowrap: true,
cellProps: { class: 'px-1' },
},
{
title: '指導老師',
key: 'advisor',
sortable: true,
minWidth: 120,
nowrap: true,
cellProps: { class: 'px-1' },
},
{
title: 'Email',
key: 'email',
sortable: true,
minWidth: 200,
nowrap: true,
cellProps: { class: 'px-1' },
},
{
title: '電話',
key: 'phone',
sortable: true,
minWidth: 150,
nowrap: true,
cellProps: { class: 'px-1' },
},
{
title: '狀態',
key: 'status',
sortable: true,
minWidth: 120,
nowrap: true,
cellProps: { class: 'px-1' },
},
{
title: '操作',
key: 'actions',
sortable: false,
width: 'auto',
nowrap: true,
cellProps: { class: 'bg-background' },
},
] as const
const TABLE_BOTTOM_GAP = 64
@@ -112,31 +189,39 @@ export function useEditableStudentGrid () {
})
const visibleStudentIds = computed(() => filteredStudents.value.map((item) => item.id))
const isAllVisibleSelected = computed(() =>
const isAllVisibleSelected = computed(
() =>
visibleStudentIds.value.length > 0 &&
visibleStudentIds.value.every((id) => selectedRowIds.value.includes(id))
)
const isPartiallyVisibleSelected = computed(() =>
const isPartiallyVisibleSelected = computed(
() =>
visibleStudentIds.value.some((id) => selectedRowIds.value.includes(id)) &&
!isAllVisibleSelected.value
)
const hasAnyChange = computed(() =>
students.value.some((item) => isRowDirty(item.id)) || studentStore.deletedIds.size > 0
const hasAnyChange = computed(
() => students.value.some((item) => isRowDirty(item.id)) || studentStore.deletedIds.size > 0
)
const hasSelectedRows = computed(() => selectedRowIds.value.length > 0)
function toggleSelectAll(checked: boolean | null) {
if (isPartiallyVisibleSelected.value) {
selectedRowIds.value = selectedRowIds.value.filter((id) => !visibleStudentIds.value.includes(id))
selectedRowIds.value = selectedRowIds.value.filter(
(id) => !visibleStudentIds.value.includes(id)
)
return
}
if (!checked) {
selectedRowIds.value = selectedRowIds.value.filter((id) => !visibleStudentIds.value.includes(id))
selectedRowIds.value = selectedRowIds.value.filter(
(id) => !visibleStudentIds.value.includes(id)
)
return
}
selectedRowIds.value = Array.from(new Set([...selectedRowIds.value, ...visibleStudentIds.value]))
selectedRowIds.value = Array.from(
new Set([...selectedRowIds.value, ...visibleStudentIds.value])
)
}
function toggleSingleRowSelection(id: number, checked: boolean | null) {
@@ -189,7 +274,8 @@ export function useEditableStudentGrid () {
const container = tableContainerRef.value
if (!container) return
const scrollParent = tableScrollParentRef.value || (container.closest('.overflow-auto') as HTMLElement | null)
const scrollParent =
tableScrollParentRef.value || (container.closest('.overflow-auto') as HTMLElement | null)
tableScrollParentRef.value = scrollParent
const parentBottom = scrollParent
src/composables/maintenance/useMaintenanceCrudFlow.ts
+4 -5
View File
@@ -50,7 +50,7 @@ interface UseMaintenanceCrudFlowResult<T extends { id: number }> {
}
export function useMaintenanceCrudFlow<T extends { id: number }>(
options: UseMaintenanceCrudFlowOptions<T>,
options: UseMaintenanceCrudFlowOptions<T>
): UseMaintenanceCrudFlowResult<T> {
const confirmCloseVisible = ref(false)
const confirmSaveVisible = ref(false)
@@ -64,16 +64,15 @@ export function useMaintenanceCrudFlow<T extends { id: number }> (
const isEditMode = computed(() => options.dialogMode.value === 'edit')
const isViewMode = computed(() => options.dialogMode.value === 'view')
const currentRecordIndex = computed(() =>
options.records.value.findIndex((item) => item.id === options.editingId.value),
options.records.value.findIndex((item) => item.id === options.editingId.value)
)
const currentEditingRecord = computed(
() => options.records.value.find((item) => item.id === options.editingId.value) || null,
() => options.records.value.find((item) => item.id === options.editingId.value) || null
)
const hasPrevRecord = computed(() => currentRecordIndex.value > 0)
const hasNextRecord = computed(
() =>
currentRecordIndex.value >= 0
&& currentRecordIndex.value < options.records.value.length - 1,
currentRecordIndex.value >= 0 && currentRecordIndex.value < options.records.value.length - 1
)
const pendingDeleteLabel = computed(() => {
if (!pendingDelete.value) return '這筆資料'
src/composables/maintenance/useStudentMaintenanceForm.ts
+11 -8
View File
@@ -53,7 +53,7 @@ function createDefaultForm (
departments: string[],
gradeOptions: GradeOption[],
enrollYears: number[],
statuses: string[],
statuses: string[]
): StudentFormState {
return {
studentId: '',
@@ -86,14 +86,17 @@ function createEmptyFieldErrors () {
export function useStudentMaintenanceForm(options: UseStudentMaintenanceFormOptions) {
const form = ref<StudentFormState>(
createDefaultForm(options.departments, options.gradeOptions, options.enrollYears, options.statuses),
createDefaultForm(
options.departments,
options.gradeOptions,
options.enrollYears,
options.statuses
)
)
const initialForm = ref<StudentFormState>({ ...form.value })
const fieldErrors = ref(createEmptyFieldErrors())
const isDirty = computed(
() => JSON.stringify(form.value) !== JSON.stringify(initialForm.value),
)
const isDirty = computed(() => JSON.stringify(form.value) !== JSON.stringify(initialForm.value))
function gradeLabel(grade: number) {
return options.gradeOptions.find((option) => option.value === grade)?.title ?? `年級 ${grade}`
@@ -124,7 +127,7 @@ export function useStudentMaintenanceForm (options: UseStudentMaintenanceFormOpt
const errorSummary = computed(() => {
const entries = Object.entries(fieldErrors.value).flatMap(([field, messages]) =>
messages.map((message) => ({ field, message })),
messages.map((message) => ({ field, message }))
)
return entries.slice(0, 3)
})
@@ -142,7 +145,7 @@ export function useStudentMaintenanceForm (options: UseStudentMaintenanceFormOpt
options.departments,
options.gradeOptions,
options.enrollYears,
options.statuses,
options.statuses
)
syncInitialForm()
clearAllErrors()
@@ -180,7 +183,7 @@ export function useStudentMaintenanceForm (options: UseStudentMaintenanceFormOpt
}
const duplicate = options.students.value.find(
(item) => item.studentId === studentId && item.id !== options.editingId.value,
(item) => item.studentId === studentId && item.id !== options.editingId.value
)
if (studentId && duplicate) {
errors.push({ field: 'studentId', message: '學號已存在，請確認是否重複' })
src/composables/useApiCall.ts
+4 -2
View File
@@ -29,8 +29,10 @@ function levelToColor (level: ToastLevel): string {
return 'info'
}
export function useApiCall <TResult, TArgs extends unknown[]>(action: (...args: TArgs) => Promise<TResult>,
options?: Options): UseApiCallResult<TResult, TArgs> {
export function useApiCall<TResult, TArgs extends unknown[]>(
action: (...args: TArgs) => Promise<TResult>,
options?: Options
): UseApiCallResult<TResult, TArgs> {
const loading = ref(false)
const data = ref<TResult | null>(null) as Ref<TResult | null>
const error = ref<ApiRequestError | null>(null)
src/main.ts
-1
View File
@@ -13,7 +13,6 @@ import { registerPlugins } from '@/plugins'
// Components
import App from './App.vue'
const app = createApp(App)
registerPlugins(app)
src/services/README.md
+2 -1
View File
@@ -46,6 +46,7 @@ interface MenuNode {
### Store 持久化
`stores/menu.ts` 提供：
- 自動 localStorage 持久化選單與收藏
- 初始化時自動還原資料
- 登出時清除快取
@@ -106,7 +107,7 @@ Store 仍然是「唯一負責更新 token 的地方」，Interceptor 只負責
- UI 不顯示取消造成的錯誤訊息
| DECISION | WHY | WHY NOT |
|---|---|---|
| -------------------------------- | -------------------------------------- | -------------------------------------------------------------------- |
| Store 呼叫 API，不是元件直接呼叫 | 狀態集中管理、可快取、易測試 | 元件直接呼叫會導致狀態散落 |
| API 模組化（userApi、orderApi） | 關注點分離、好維護 | 全塞一個檔案會變超大 |
| Interceptor 獨立檔案 | 單一職責、好測試 | 寫在 client.ts 會雜亂 |
src/services/client.ts
-1
View File
@@ -19,4 +19,3 @@ function createClient (): AxiosInstance {
}
export const httpClient = createClient()
src/services/error.ts
+1 -1
View File
@@ -113,7 +113,7 @@ export function normalizeError (error: unknown): ApiRequestError {
code,
status,
errors: apiError?.errors,
raw: error
raw: error,
})
}
src/services/http-error.ts
-1
View File
@@ -25,4 +25,3 @@ export function emitHttpError (detail: HttpErrorDetail) {
httpErrorEmitted = false
}, 0)
}
src/services/http-toast.ts
-1
View File
@@ -28,4 +28,3 @@ export function emitHttpToast (detail: HttpToastDetail) {
window.dispatchEvent(new CustomEvent<HttpToastDetail>(HTTP_TOAST_EVENT, { detail }))
}
src/services/interceptors.ts
+1 -1
View File
@@ -113,7 +113,7 @@ export function setupInterceptors (client: AxiosInstance) {
if (shouldToast) {
emitHttpToast({
level: status ? 'error' : 'warning',
message: normalized.message
message: normalized.message,
})
}
return Promise.reject(normalized)
src/services/token.ts
+1 -1
View File
@@ -21,5 +21,5 @@ export const tokenService = {
clearToken() {
tokenRef.value = null
localStorage.removeItem(storageKey)
}
},
}
src/stores/stores/breadcrumbs.ts
+4 -2
View File
@@ -35,9 +35,11 @@ function buildTrail (items: LayoutMenuItem[], targetPath: string): LayoutMenuIte
return walk(items || [], [])
}
function toBreadcrumbItems (trail: LayoutMenuItem[],
function toBreadcrumbItems(
trail: LayoutMenuItem[],
homeLabel: string,
homeIcon: string): BreadcrumbItem[] {
homeIcon: string
): BreadcrumbItem[] {
const isHomePath = (path?: string) => path === '/' || path === ''
const startsWithHome = trail.length > 0 && isHomePath(trail[0]?.path)
const crumbs: BreadcrumbItem[] = []
src/stores/stores/loginAnnouncements.ts
+1 -1
View File
@@ -107,7 +107,7 @@ async function mockFetchMobileAnnouncementsApi (): Promise<LoginMobileAnnounceme
title: '系統公告',
createdAt: '2026-02-11',
},
];
]
}
export const useLoginAnnouncementsStore = defineStore('loginAnnouncements', () => {
src/stores/stores/menu.ts
+2 -5
View File
@@ -174,12 +174,9 @@ export const useMenuStore = defineStore('menu', () => {
{ deep: true }
)
watch(
isRail,
(val) => {
watch(isRail, (val) => {
writeValue(isRailStorageKey, val)
}
)
})
const clear = () => {
menu.value = []
src/stores/stores/semesters.ts
+10 -10
View File
@@ -74,7 +74,7 @@ export function generateMockSemesters (studentId: number) {
code: `CS${1000 + idx}`,
name: subject.name,
credits: subject.credits,
score
score,
})
totalScore += score * subject.credits
@@ -87,7 +87,7 @@ export function generateMockSemesters (studentId: number) {
semesterName: sem.name,
courses,
rank: Math.floor(Math.random() * 20) + 1,
average: Number((totalScore / totalCredits).toFixed(2))
average: Number((totalScore / totalCredits).toFixed(2)),
})
}
return result
@@ -104,7 +104,7 @@ export const useSemesterStore = defineStore('semesters', () => {
// Actions
const getStudentSemesters = (studentId: number) => {
return semesters.value.filter(s => s.studentId === studentId)
return semesters.value.filter((s) => s.studentId === studentId)
}
const generateForStudent = (studentId: number) => {
@@ -113,28 +113,28 @@ export const useSemesterStore = defineStore('semesters', () => {
}
const addSemester = (studentId: number) => {
const newId = Math.max(...semesters.value.map(s => s.id), 0) + 1
const newId = Math.max(...semesters.value.map((s) => s.id), 0) + 1
const newSemester: SemesterRecord = {
id: newId,
studentId,
semesterName: '新學期',
courses: [],
rank: 0,
average: 0
average: 0,
}
semesters.value.push(newSemester)
return newSemester
}
const updateSemester = (id: number, payload: Partial<SemesterRecord>) => {
const index = semesters.value.findIndex(s => s.id === id)
const index = semesters.value.findIndex((s) => s.id === id)
if (index === -1) return
const current = semesters.value[index]
if (!current) return
// Recalculate average if courses are updated
if (payload.courses) {
const totalScore = payload.courses.reduce((sum, c) => sum + (c.score * c.credits), 0)
const totalScore = payload.courses.reduce((sum, c) => sum + c.score * c.credits, 0)
const totalCredits = payload.courses.reduce((sum, c) => sum + c.credits, 0)
payload.average = totalCredits > 0 ? Number((totalScore / totalCredits).toFixed(2)) : 0
}
@@ -143,14 +143,14 @@ export const useSemesterStore = defineStore('semesters', () => {
}
const removeSemester = (id: number) => {
const index = semesters.value.findIndex(s => s.id === id)
const index = semesters.value.findIndex((s) => s.id === id)
if (index !== -1) {
semesters.value.splice(index, 1)
}
}
const removeByStudentId = (studentId: number) => {
semesters.value = semesters.value.filter(s => s.studentId !== studentId)
semesters.value = semesters.value.filter((s) => s.studentId !== studentId)
}
return {
@@ -160,6 +160,6 @@ export const useSemesterStore = defineStore('semesters', () => {
addSemester,
updateSemester,
removeSemester,
removeByStudentId
removeByStudentId,
}
})
src/views/Analysis.vue
+7 -1
View File
@@ -13,7 +13,13 @@
</template>
<script setup lang="ts">
import { mdiAccountSchool, mdiBookOpenPageVariant, mdiChartPie, mdiCheckDecagram, mdiCloudDownload } from '@mdi/js'
import {
mdiAccountSchool,
mdiBookOpenPageVariant,
mdiChartPie,
mdiCheckDecagram,
mdiCloudDownload,
} from '@mdi/js'
import { ref } from 'vue'
import SKAnalysis from '@/components/SKAnalysis.vue'
src/views/Dashboard.vue
+14 -1
View File
@@ -10,7 +10,20 @@
</template>
<script setup lang="ts">
import { mdiAccountGroup, mdiBookOpenVariant, mdiCalendarCheck, mdiChartBar, mdiCog, mdiHammerWrench, mdiHome, mdiLayers, mdiLock, mdiMonitorShimmer, mdiSchool, mdiViewDashboard } from '@mdi/js'
import {
mdiAccountGroup,
mdiBookOpenVariant,
mdiCalendarCheck,
mdiChartBar,
mdiCog,
mdiHammerWrench,
mdiHome,
mdiLayers,
mdiLock,
mdiMonitorShimmer,
mdiSchool,
mdiViewDashboard,
} from '@mdi/js'
import { ref } from 'vue'
import SKDashboard from '@/components/SKDashboard.vue'
src/views/FncPage.vue
-1
View File
@@ -2,7 +2,6 @@
<v-sheet height="100%" width="100%">
{{ fncId }}
</v-sheet>
</template>
<script setup lang="ts">
src/views/Login.vue
+16 -8
View File
@@ -5,10 +5,17 @@
:form="form"
:header="header"
:illustration="illustration"
:layout="formPositionLayout" :mobile-announcement="mobileAnnouncement" :toolbar="toolbar"
@captcha-change="handleCaptchaChange" @captcha-refresh="handleCaptchaRefresh" @change-locale="handleChangeLocale"
@forgot-password="handleForgotPassword" @select-announcement="handleSelectAnnouncement" @submit="onLogin"
@toggle-layout="handleToggleLayout" />
:layout="formPositionLayout"
:mobile-announcement="mobileAnnouncement"
:toolbar="toolbar"
@captcha-change="handleCaptchaChange"
@captcha-refresh="handleCaptchaRefresh"
@change-locale="handleChangeLocale"
@forgot-password="handleForgotPassword"
@select-announcement="handleSelectAnnouncement"
@submit="onLogin"
@toggle-layout="handleToggleLayout"
/>
<v-dialog v-model="dialogVisible" width="360">
<v-card>
@@ -52,7 +59,10 @@ import { useRoute, useRouter } from 'vue-router'
import HyakkaouAcademyImage from '@/assets/logo.png'
import SKLogin from '@/components/SKLogin.vue'
import { useAuthStore } from '@/stores/auth'
import { type LoginAnnouncementListItem, useLoginAnnouncementsStore } from '@/stores/loginAnnouncements'
import {
type LoginAnnouncementListItem,
useLoginAnnouncementsStore,
} from '@/stores/loginAnnouncements'
import { useMenuStore } from '@/stores/menu'
import { useSnackbarStore } from '@/stores/snackbar'
@@ -71,8 +81,7 @@ const {
mobileAnnouncementConfig: mobileAnnouncement,
selectedAnnouncement,
selectedAnnouncementDetail,
} =
storeToRefs(loginAnnouncementsStore)
} = storeToRefs(loginAnnouncementsStore)
// 語系選項
const locales = ['zh-TW', 'en-US']
@@ -164,7 +173,6 @@ const form = computed(() => ({
},
}))
// 右上工具列設定（含顯示開關）
const toolbar = computed(() => ({
// 功能開關：是否顯示語系切換工具列
src/views/errors/ErrorShell.vue
+32 -8
View File
@@ -8,14 +8,27 @@
<div class="text-h5">{{ title }}</div>
<div class="text-caption text-medium-emphasis">{{ codeLabel }}</div>
<v-spacer />
<img alt="robot" class="robot-icon" height="32" src="@/assets/robot-svgrepo-com.svg" width="32" />
<img
alt="robot"
class="robot-icon"
height="32"
src="@/assets/robot-svgrepo-com.svg"
width="32"
/>
</v-card-title>
<v-card-text v-if="description" class="text-body-1 mt-4">
<p class="py-3">
{{ description }}
</p>
<v-alert v-if="backendMessage" class="mt-6" :color="color" density="compact" type="warning" variant="tonal">
<v-alert
v-if="backendMessage"
class="mt-6"
:color="color"
density="compact"
type="warning"
variant="tonal"
>
{{ backendMessage }}
</v-alert>
</v-card-text>
@@ -23,8 +36,16 @@
<v-card-actions class="mt-6">
<v-btn v-if="showBack" variant="text" @click="router.back()">返回上一頁</v-btn>
<v-spacer />
<v-btn v-if="showHome" color="primary" :to="{ name: 'home' }" variant="flat">回到首頁</v-btn>
<v-btn v-if="showLogin" class="ml-2" color="primary" :to="{ name: 'login' }" variant="outlined">
<v-btn v-if="showHome" color="primary" :to="{ name: 'home' }" variant="flat"
>回到首頁</v-btn
>
<v-btn
v-if="showLogin"
class="ml-2"
color="primary"
:to="{ name: 'login' }"
variant="outlined"
>
前往登入
</v-btn>
</v-card-actions>
@@ -56,7 +77,7 @@ const props = withDefaults(defineProps<Props>(), {
color: 'warning',
showHome: true,
showLogin: true,
showBack: true
showBack: true,
})
const route = useRoute()
@@ -76,7 +97,8 @@ const backendMessage = computed(() => {
<style scoped>
@keyframes breathe {
0%, 100% {
0%,
100% {
transform: scale(1);
opacity: 1;
}
@@ -87,7 +109,10 @@ const backendMessage = computed(() => {
}
@keyframes blink {
0%, 45%, 55%, 100% {
0%,
45%,
55%,
100% {
opacity: 1;
}
50% {
@@ -108,4 +133,3 @@ const backendMessage = computed(() => {
animation-delay: 0.1s;
}
</style>
src/views/errors/Maintenance.vue
-1
View File
@@ -13,4 +13,3 @@
import { mdiTools } from '@mdi/js'
import ErrorShell from './ErrorShell.vue'
</script>
src/views/errors/NetworkError.vue
-1
View File
@@ -12,4 +12,3 @@
import { mdiWifiOff } from '@mdi/js'
import ErrorShell from './ErrorShell.vue'
</script>
src/views/errors/ServerError.vue
-1
View File
@@ -12,4 +12,3 @@
import { mdiServer } from '@mdi/js'
import ErrorShell from './ErrorShell.vue'
</script>
src/views/errors/ServiceUnavailable.vue
-1
View File
@@ -12,4 +12,3 @@
import { mdiServerOff } from '@mdi/js'
import ErrorShell from './ErrorShell.vue'
</script>
src/views/maint/MasterDetailMnt.vue
+228 -57
View File
@@ -1,31 +1,77 @@
<template>
<mnt-page-cards
:search-panel-open="searchPanelOpen" :title="`主從資料維護示範A`"
@create="openAddDialog" @toggle-search="searchPanelOpen = !searchPanelOpen">
:search-panel-open="searchPanelOpen"
:title="`主從資料維護示範A`"
@create="openAddDialog"
@toggle-search="searchPanelOpen = !searchPanelOpen"
>
<template #search-fields>
<v-col cols="12" md="2">
<div id="search-student-id-label" class="text-body-2 text-medium-emphasis pl-2">學號</div>
<v-text-field
id="search-student-id" v-model="search.studentId" aria-labelledby="search-student-id-label" density="compact" hide-details name="searchStudentId" placeholder="例如：S2024001"
variant="outlined" />
id="search-student-id"
v-model="search.studentId"
aria-labelledby="search-student-id-label"
density="compact"
hide-details
name="searchStudentId"
placeholder="例如：S2024001"
variant="outlined"
/>
</v-col>
<v-col cols="12" md="2">
<div id="search-name-label" class="text-body-2 text-medium-emphasis pl-2">姓名</div>
<v-text-field id="search-name" v-model="search.name" aria-labelledby="search-name-label" density="compact" hide-details name="searchName" placeholder="例如：王小明" variant="outlined" />
<v-text-field
id="search-name"
v-model="search.name"
aria-labelledby="search-name-label"
density="compact"
hide-details
name="searchName"
placeholder="例如：王小明"
variant="outlined"
/>
</v-col>
<v-col cols="12" md="2">
<div id="search-department-label" class="text-body-2 text-medium-emphasis pl-2">系所</div>
<v-select id="search-department" v-model="search.department" aria-labelledby="search-department-label" density="compact" hide-details :items="departments" name="searchDepartment" variant="outlined" />
<v-select
id="search-department"
v-model="search.department"
aria-labelledby="search-department-label"
density="compact"
hide-details
:items="departments"
name="searchDepartment"
variant="outlined"
/>
</v-col>
<v-col cols="12" md="2">
<div id="search-grade-label" class="text-body-2 text-medium-emphasis pl-2">年級</div>
<v-select
id="search-grade" v-model="search.grade" aria-labelledby="search-grade-label" density="compact" hide-details item-title="title" item-value="value"
:items="gradeOptions" name="searchGrade" variant="outlined" />
id="search-grade"
v-model="search.grade"
aria-labelledby="search-grade-label"
density="compact"
hide-details
item-title="title"
item-value="value"
:items="gradeOptions"
name="searchGrade"
variant="outlined"
/>
</v-col>
<v-col cols="12" md="2">
<div id="search-status-label" class="text-body-2 text-medium-emphasis pl-2">狀態</div>
<v-select id="search-status" v-model="search.status" aria-labelledby="search-status-label" density="compact" hide-details :items="statuses" name="searchStatus" variant="outlined" />
<v-select
id="search-status"
v-model="search.status"
aria-labelledby="search-status-label"
density="compact"
hide-details
:items="statuses"
name="searchStatus"
variant="outlined"
/>
</v-col>
<v-col class="d-flex justify-end align-end flex-grow-1 ga-2" cols="12" md="auto">
<v-btn :prepend-icon="mdiBroom" variant="text" @click="resetSearch">清除</v-btn>
@@ -34,9 +80,17 @@ id="search-grade" v-model="search.grade" aria-labelledby="search-grade-label" de
</template>
<template #table>
<v-data-table
v-model:page="currentPage" class="student-table" density="compact" fixed-header :headers="tableHeaders" height="100%"
hide-default-footer :items="students" :items-per-page="itemsPerPage"
:row-props="rowProps">
v-model:page="currentPage"
class="student-table"
density="compact"
fixed-header
:headers="tableHeaders"
height="100%"
hide-default-footer
:items="students"
:items-per-page="itemsPerPage"
:row-props="rowProps"
>
<template #[`item.grade`]="{ item }">
{{ gradeLabel(item.grade) }}
</template>
@@ -47,15 +101,31 @@ v-model:page="currentPage" class="student-table" density="compact" fixed-header
</template>
<template #[`item.actions`]="{ item }">
<div class="d-flex ga-1">
<v-btn color="info" :prepend-icon="mdiEye" size="small" variant="text" @click="openViewDialog(item)">
<v-btn
color="info"
:prepend-icon="mdiEye"
size="small"
variant="text"
@click="openViewDialog(item)"
>
檢視
</v-btn>
<v-btn color="primary" :prepend-icon="mdiPencil" size="small" variant="text" @click="openEditDialog(item)">
<v-btn
color="primary"
:prepend-icon="mdiPencil"
size="small"
variant="text"
@click="openEditDialog(item)"
>
修改
</v-btn>
<v-btn
color="error" :prepend-icon="mdiDelete" size="small" variant="text"
@click="requestDeleteConfirmation(item)">
color="error"
:prepend-icon="mdiDelete"
size="small"
variant="text"
@click="requestDeleteConfirmation(item)"
>
刪除
</v-btn>
</div>
@@ -66,11 +136,35 @@ color="error" :prepend-icon="mdiDelete" size="small" variant="text"
{{ pageSummary }}
</div>
<div class="d-flex align-center ga-2">
<v-btn :disabled="currentPage <= 1" size="small" variant="text" @click="currentPage = 1">第一頁</v-btn>
<v-btn :disabled="currentPage <= 1" size="small" variant="text" @click="currentPage -= 1">上一頁</v-btn>
<v-btn
:disabled="currentPage <= 1"
size="small"
variant="text"
@click="currentPage = 1"
>第一頁</v-btn
>
<v-btn
:disabled="currentPage <= 1"
size="small"
variant="text"
@click="currentPage -= 1"
>上一頁</v-btn
>
<span class="text-body-2">{{ currentPage }} / {{ pageCount }}</span>
<v-btn :disabled="currentPage >= pageCount" size="small" variant="text" @click="currentPage += 1">下一頁</v-btn>
<v-btn :disabled="currentPage >= pageCount" size="small" variant="text" @click="currentPage = pageCount">最後頁</v-btn>
<v-btn
:disabled="currentPage >= pageCount"
size="small"
variant="text"
@click="currentPage += 1"
>下一頁</v-btn
>
<v-btn
:disabled="currentPage >= pageCount"
size="small"
variant="text"
@click="currentPage = pageCount"
>最後頁</v-btn
>
</div>
</div>
</template>
@@ -83,15 +177,21 @@ color="error" :prepend-icon="mdiDelete" size="small" variant="text"
<teleport to="body">
<!-- 包成元件需要傳高度寬度給dialog-panel -->
<v-overlay
class="dialog-overlay" :close-on-content-click="false" :model-value="dialogVisible" scrim="rgba(0, 0, 0, 0.45)"
scroll-strategy="block" @update:model-value="handleDialogVisibility">
class="dialog-overlay"
:close-on-content-click="false"
:model-value="dialogVisible"
scrim="rgba(0, 0, 0, 0.45)"
scroll-strategy="block"
@update:model-value="handleDialogVisibility"
>
<div class="dialog-panel" :class="{ 'is-mobile': isMobile }">
<!-- 子檔區塊 (Detail Card)：學期成績明細 -->
<!-- 說明：點選主檔的學期後，會從左側滑出顯示該學期的詳細課程成績 -->
<div
v-if="!isMobile || activeMobilePanel === 'detail'" class="detail-panel-wrapper"
:class="{ 'is-active': !!selectedSemesterId, 'is-mobile': isMobile }">
v-if="!isMobile || activeMobilePanel === 'detail'"
class="detail-panel-wrapper"
:class="{ 'is-active': !!selectedSemesterId, 'is-mobile': isMobile }"
>
<master-detail-semester-panel
v-model:detail-form="detailForm"
:is-detail-editing="isDetailEditing"
@@ -109,34 +209,65 @@ v-if="!isMobile || activeMobilePanel === 'detail'" class="detail-panel-wrapper"
<!-- 主檔區塊 (Master Card)：學生基本資料與學期列表 -->
<!-- 說明：固定在視窗右側，包含學生表單與學期清單 -->
<mnt-dialog-card
v-if="!isMobile || activeMobilePanel === 'master'" :dialog-subtitle="dialogSubtitle"
:dialog-title="dialogTitle" :is-edit-mode="isEditMode" :is-view-mode="isViewMode"
:width="isMobile ? '100%' : 760">
v-if="!isMobile || activeMobilePanel === 'master'"
:dialog-subtitle="dialogSubtitle"
:dialog-title="dialogTitle"
:is-edit-mode="isEditMode"
:is-view-mode="isViewMode"
:width="isMobile ? '100%' : 760"
>
<template #toolbar>
<mnt-record-nav-toolbar
:has-next-record="hasNextRecord" :has-prev-record="hasPrevRecord"
:is-edit-mode="isEditMode" :is-view-mode="isViewMode" :mobile="isMobile"
@first="openEdgeRecord('first')" @last="openEdgeRecord('last')" @next="openAdjacentRecord('next')"
@prev="openAdjacentRecord('prev')" @switch-to-edit="switchToEditMode" @switch-to-view="switchToViewMode" />
:has-next-record="hasNextRecord"
:has-prev-record="hasPrevRecord"
:is-edit-mode="isEditMode"
:is-view-mode="isViewMode"
:mobile="isMobile"
@first="openEdgeRecord('first')"
@last="openEdgeRecord('last')"
@next="openAdjacentRecord('next')"
@prev="openAdjacentRecord('prev')"
@switch-to-edit="switchToEditMode"
@switch-to-view="switchToViewMode"
/>
</template>
<template #content>
<!-- 錯誤提示：當表單驗證未通過時顯示 -->
<v-alert v-if="errorSummary.length > 0 && !isLoading" class="mb-4" type="error" variant="tonal">
<v-alert
v-if="errorSummary.length > 0 && !isLoading"
class="mb-4"
type="error"
variant="tonal"
>
<div class="text-subtitle-2 mb-2">請先修正以下問題</div>
<div class="d-flex flex-column ga-1">
<v-btn
v-for="error in errorSummary" :key="error.field" color="error" size="small" variant="text"
@click="scrollToField(error.field)">
v-for="error in errorSummary"
:key="error.field"
color="error"
size="small"
variant="text"
@click="scrollToField(error.field)"
>
{{ error.message }}
</v-btn>
</div>
</v-alert>
<!-- 載入中骨架畫面 -->
<v-skeleton-loader v-if="isLoading" class="mt-4" type="subtitle,paragraph" width="100%" />
<v-skeleton-loader
v-if="isLoading"
class="mt-4"
type="subtitle,paragraph"
width="100%"
/>
<!-- 學生主檔表單：檢視模式時會自動套用 readonly 樣式 -->
<v-form v-else :class="{ 'form-readonly': isFormReadonly }" @submit.prevent="requestSaveConfirmation">
<v-form
v-else
:class="{ 'form-readonly': isFormReadonly }"
@submit.prevent="requestSaveConfirmation"
>
<maintenance-student-form-fields
:departments="departments"
:enroll-years="enrollYears"
@@ -154,21 +285,35 @@ v-for="error in errorSummary" :key="error.field" color="error" size="small" vari
<!-- 學期成績紀錄區塊 -->
<!-- 說明：顯示該學生的所有學期紀錄，並提供新增與選取功能 -->
<master-detail-semester-list
:is-mobile="isMobile" :is-view-mode="isViewMode"
:selected-semester-id="selectedSemesterId" :semesters="studentSemesters" @add="handleAddSemester"
@select="handleSemesterSelect" />
:is-mobile="isMobile"
:is-view-mode="isViewMode"
:selected-semester-id="selectedSemesterId"
:semesters="studentSemesters"
@add="handleAddSemester"
@select="handleSemesterSelect"
/>
</v-form>
</template>
<template #actions>
<template v-if="isMobile">
<v-btn :disabled="isSaving" variant="text" @click="requestCloseDialog">取消</v-btn>
<v-btn v-if="isEditMode" color="error" :disabled="isSaving" variant="tonal" @click="requestDeleteCurrent">
<v-btn
v-if="isEditMode"
color="error"
:disabled="isSaving"
variant="tonal"
@click="requestDeleteCurrent"
>
刪除
</v-btn>
<v-btn
v-if="!isViewMode" color="primary" :disabled="!isDirty || isLoading" :loading="isSaving"
variant="flat" @click="requestSaveConfirmation">
v-if="!isViewMode"
color="primary"
:disabled="!isDirty || isLoading"
:loading="isSaving"
variant="flat"
@click="requestSaveConfirmation"
>
儲存
</v-btn>
<v-btn v-else color="primary" variant="flat" @click="requestCloseDialog">關閉</v-btn>
@@ -176,20 +321,29 @@ v-if="!isViewMode" color="primary" :disabled="!isDirty || isLoading" :loading="i
<template v-else>
<v-spacer />
<v-btn :disabled="isSaving" variant="text" @click="requestCloseDialog">取消</v-btn>
<v-btn v-if="isEditMode" color="error" :disabled="isSaving" variant="tonal" @click="requestDeleteCurrent">
<v-btn
v-if="isEditMode"
color="error"
:disabled="isSaving"
variant="tonal"
@click="requestDeleteCurrent"
>
刪除
</v-btn>
<v-btn
v-if="!isViewMode" color="primary" :disabled="!isDirty || isLoading" :loading="isSaving"
variant="flat" @click="requestSaveConfirmation">
v-if="!isViewMode"
color="primary"
:disabled="!isDirty || isLoading"
:loading="isSaving"
variant="flat"
@click="requestSaveConfirmation"
>
儲存
</v-btn>
<v-btn v-else color="primary" variant="flat" @click="requestCloseDialog">關閉</v-btn>
</template>
</template>
</mnt-dialog-card>
</div>
</v-overlay>
</teleport>
@@ -255,8 +409,20 @@ const isMobile = computed(() => !smAndUp.value)
// 表格欄位設定（含固定欄與排序）
const tableHeaders = [
{ title: '學號', key: 'studentId', sortable: true, fixed: smAndUp.value && 'start' as const, width: 120 },
{ title: '姓名', key: 'name', sortable: true, fixed: smAndUp.value && 'start' as const, width: 100 },
{
title: '學號',
key: 'studentId',
sortable: true,
fixed: smAndUp.value && ('start' as const),
width: 120,
},
{
title: '姓名',
key: 'name',
sortable: true,
fixed: smAndUp.value && ('start' as const),
width: 100,
},
{ title: '系所', key: 'department', sortable: true, width: 140 },
{ title: '年級', key: 'grade', sortable: true, width: 90 },
{ title: '入學年度', key: 'enrollYear', sortable: true, width: 110 },
@@ -265,7 +431,14 @@ const tableHeaders = [
{ title: '電話', key: 'phone', sortable: true, width: 140 },
{ title: '指導老師', key: 'advisor', sortable: true, width: 110 },
{ title: '狀態', key: 'status', sortable: true, width: 90 },
{ title: '操作', key: 'actions', sortable: false, fixed: smAndUp.value && 'end' as const, width: 'auto', cellProps: { class: 'px-0 bg-background' } },
{
title: '操作',
key: 'actions',
sortable: false,
fixed: smAndUp.value && ('end' as const),
width: 'auto',
cellProps: { class: 'px-0 bg-background' },
},
]
// 查詢條件（示意用，未接 API）
@@ -312,8 +485,8 @@ const loadSequence = ref(0)
const studentSemesters = ref<SemesterRecord[]>([])
const selectedSemesterId = ref<number | null>(null)
const activeMobilePanel = ref<'master' | 'detail'>('master')
const selectedSemester = computed(() =>
studentSemesters.value.find((s) => s.id === selectedSemesterId.value) || null
const selectedSemester = computed(
() => studentSemesters.value.find((s) => s.id === selectedSemesterId.value) || null
)
// Detail Editing State (子檔編輯狀態管理)
@@ -633,7 +806,7 @@ function handleSemesterSelect (id: number) {
return
}
selectedSemesterId.value = selectedSemesterId.value === id ? null : id;
selectedSemesterId.value = selectedSemesterId.value === id ? null : id
}
function closeDetailPanel() {
@@ -737,8 +910,6 @@ function closeDetailPanel () {
}
}
.dialog-actions {
position: sticky;
bottom: 0;
src/views/maint/MasterDetailMntB.vue
+321 -77
View File
@@ -1,31 +1,77 @@
<template>
<mnt-page-cards
:search-panel-open="searchPanelOpen" :title="`主從資料維護示範B`"
@create="openAddDialog" @toggle-search="searchPanelOpen = !searchPanelOpen">
:search-panel-open="searchPanelOpen"
:title="`主從資料維護示範B`"
@create="openAddDialog"
@toggle-search="searchPanelOpen = !searchPanelOpen"
>
<template #search-fields>
<v-col cols="12" md="2">
<div id="search-student-id-label" class="text-body-2 text-medium-emphasis pl-2">學號</div>
<v-text-field
id="search-student-id" v-model="search.studentId" aria-labelledby="search-student-id-label" density="compact" hide-details name="searchStudentId" placeholder="例如：S2024001"
variant="outlined" />
id="search-student-id"
v-model="search.studentId"
aria-labelledby="search-student-id-label"
density="compact"
hide-details
name="searchStudentId"
placeholder="例如：S2024001"
variant="outlined"
/>
</v-col>
<v-col cols="12" md="2">
<div id="search-name-label" class="text-body-2 text-medium-emphasis pl-2">姓名</div>
<v-text-field id="search-name" v-model="search.name" aria-labelledby="search-name-label" density="compact" hide-details name="searchName" placeholder="例如：王小明" variant="outlined" />
<v-text-field
id="search-name"
v-model="search.name"
aria-labelledby="search-name-label"
density="compact"
hide-details
name="searchName"
placeholder="例如：王小明"
variant="outlined"
/>
</v-col>
<v-col cols="12" md="2">
<div id="search-department-label" class="text-body-2 text-medium-emphasis pl-2">系所</div>
<v-select id="search-department" v-model="search.department" aria-labelledby="search-department-label" density="compact" hide-details :items="departments" name="searchDepartment" variant="outlined" />
<v-select
id="search-department"
v-model="search.department"
aria-labelledby="search-department-label"
density="compact"
hide-details
:items="departments"
name="searchDepartment"
variant="outlined"
/>
</v-col>
<v-col cols="12" md="2">
<div id="search-grade-label" class="text-body-2 text-medium-emphasis pl-2">年級</div>
<v-select
id="search-grade" v-model="search.grade" aria-labelledby="search-grade-label" density="compact" hide-details item-title="title" item-value="value"
:items="gradeOptions" name="searchGrade" variant="outlined" />
id="search-grade"
v-model="search.grade"
aria-labelledby="search-grade-label"
density="compact"
hide-details
item-title="title"
item-value="value"
:items="gradeOptions"
name="searchGrade"
variant="outlined"
/>
</v-col>
<v-col cols="12" md="2">
<div id="search-status-label" class="text-body-2 text-medium-emphasis pl-2">狀態</div>
<v-select id="search-status" v-model="search.status" aria-labelledby="search-status-label" density="compact" hide-details :items="statuses" name="searchStatus" variant="outlined" />
<v-select
id="search-status"
v-model="search.status"
aria-labelledby="search-status-label"
density="compact"
hide-details
:items="statuses"
name="searchStatus"
variant="outlined"
/>
</v-col>
<v-col class="d-flex justify-end align-end flex-grow-1 ga-2" cols="12" md="auto">
<v-btn :prepend-icon="mdiBroom" variant="text" @click="resetSearch">清除</v-btn>
@@ -34,9 +80,17 @@ id="search-grade" v-model="search.grade" aria-labelledby="search-grade-label" de
</template>
<template #table>
<v-data-table
v-model:page="currentPage" class="student-table" density="compact" fixed-header :headers="tableHeaders" height="100%"
hide-default-footer :items="students" :items-per-page="itemsPerPage"
:row-props="rowProps">
v-model:page="currentPage"
class="student-table"
density="compact"
fixed-header
:headers="tableHeaders"
height="100%"
hide-default-footer
:items="students"
:items-per-page="itemsPerPage"
:row-props="rowProps"
>
<template #[`item.grade`]="{ item }">
{{ gradeLabel(item.grade) }}
</template>
@@ -47,15 +101,31 @@ v-model:page="currentPage" class="student-table" density="compact" fixed-header
</template>
<template #[`item.actions`]="{ item }">
<div class="d-flex ga-2">
<v-btn color="info" :prepend-icon="mdiEye" size="small" variant="text" @click="openViewDialog(item)">
<v-btn
color="info"
:prepend-icon="mdiEye"
size="small"
variant="text"
@click="openViewDialog(item)"
>
檢視
</v-btn>
<v-btn color="primary" :prepend-icon="mdiPencil" size="small" variant="text" @click="openEditDialog(item)">
<v-btn
color="primary"
:prepend-icon="mdiPencil"
size="small"
variant="text"
@click="openEditDialog(item)"
>
修改
</v-btn>
<v-btn
color="error" :prepend-icon="mdiDelete" size="small" variant="text"
@click="requestDeleteConfirmation(item)">
color="error"
:prepend-icon="mdiDelete"
size="small"
variant="text"
@click="requestDeleteConfirmation(item)"
>
刪除
</v-btn>
</div>
@@ -66,11 +136,35 @@ color="error" :prepend-icon="mdiDelete" size="small" variant="text"
{{ pageSummary }}
</div>
<div class="d-flex align-center ga-2">
<v-btn :disabled="currentPage <= 1" size="small" variant="text" @click="currentPage = 1">第一頁</v-btn>
<v-btn :disabled="currentPage <= 1" size="small" variant="text" @click="currentPage -= 1">上一頁</v-btn>
<v-btn
:disabled="currentPage <= 1"
size="small"
variant="text"
@click="currentPage = 1"
>第一頁</v-btn
>
<v-btn
:disabled="currentPage <= 1"
size="small"
variant="text"
@click="currentPage -= 1"
>上一頁</v-btn
>
<span class="text-body-2">{{ currentPage }} / {{ pageCount }}</span>
<v-btn :disabled="currentPage >= pageCount" size="small" variant="text" @click="currentPage += 1">下一頁</v-btn>
<v-btn :disabled="currentPage >= pageCount" size="small" variant="text" @click="currentPage = pageCount">最後頁</v-btn>
<v-btn
:disabled="currentPage >= pageCount"
size="small"
variant="text"
@click="currentPage += 1"
>下一頁</v-btn
>
<v-btn
:disabled="currentPage >= pageCount"
size="small"
variant="text"
@click="currentPage = pageCount"
>最後頁</v-btn
>
</div>
</div>
</template>
@@ -83,50 +177,96 @@ color="error" :prepend-icon="mdiDelete" size="small" variant="text"
<teleport to="body">
<!-- 包成元件需要傳高度寬度給dialog-panel -->
<v-overlay
class="dialog-overlay" :close-on-content-click="false" :model-value="dialogVisible" scrim="rgba(0, 0, 0, 0.45)"
scroll-strategy="block" @update:model-value="handleDialogVisibility">
class="dialog-overlay"
:close-on-content-click="false"
:model-value="dialogVisible"
scrim="rgba(0, 0, 0, 0.45)"
scroll-strategy="block"
@update:model-value="handleDialogVisibility"
>
<div class="dialog-panel" :class="{ 'is-mobile': isMobile }">
<master-detail-b-semester-mobile-panel
v-if="isMobile && activeMobilePanel === 'detail'"
:is-form-locked="isFormLocked" :is-view-mode="isViewMode" :semester="selectedSemester"
@add-course="openAddCourseDialog" @close="closeDetailPanel" @delete-course="requestDeleteCourse"
@update-course="handleUpdateCourse" @update-semester="handleUpdateSemester" />
:is-form-locked="isFormLocked"
:is-view-mode="isViewMode"
:semester="selectedSemester"
@add-course="openAddCourseDialog"
@close="closeDetailPanel"
@delete-course="requestDeleteCourse"
@update-course="handleUpdateCourse"
@update-semester="handleUpdateSemester"
/>
<!-- 主檔區塊 (Master Card)：學生基本資料與學期列表 -->
<!-- 說明：固定在視窗右側，包含學生表單與學期清單 -->
<mnt-dialog-card
v-else :content-class="isMobile ? 'pa-3 flex-grow-1 overflow-y-auto pb-16' : 'pa-2 flex-grow-1 overflow-hidden d-flex flex-column'" :dialog-subtitle="dialogSubtitle" :dialog-title="dialogTitle"
:is-edit-mode="isEditMode" :is-view-mode="isViewMode"
width="100%">
v-else
:content-class="
isMobile
? 'pa-3 flex-grow-1 overflow-y-auto pb-16'
: 'pa-2 flex-grow-1 overflow-hidden d-flex flex-column'
"
:dialog-subtitle="dialogSubtitle"
:dialog-title="dialogTitle"
:is-edit-mode="isEditMode"
:is-view-mode="isViewMode"
width="100%"
>
<template #toolbar>
<mnt-record-nav-toolbar
:has-next-record="hasNextRecord" :has-prev-record="hasPrevRecord"
:is-edit-mode="isEditMode" :is-view-mode="isViewMode" :mobile="isMobile"
@first="openEdgeRecord('first')" @last="openEdgeRecord('last')" @next="openAdjacentRecord('next')"
@prev="openAdjacentRecord('prev')" @switch-to-edit="switchToEditMode" @switch-to-view="switchToViewMode" />
:has-next-record="hasNextRecord"
:has-prev-record="hasPrevRecord"
:is-edit-mode="isEditMode"
:is-view-mode="isViewMode"
:mobile="isMobile"
@first="openEdgeRecord('first')"
@last="openEdgeRecord('last')"
@next="openAdjacentRecord('next')"
@prev="openAdjacentRecord('prev')"
@switch-to-edit="switchToEditMode"
@switch-to-view="switchToViewMode"
/>
</template>
<template #content>
<!-- 錯誤提示：當表單驗證未通過時顯示 -->
<v-alert v-if="errorSummary.length > 0 && !isLoading" class="mb-4" type="error" variant="tonal">
<v-alert
v-if="errorSummary.length > 0 && !isLoading"
class="mb-4"
type="error"
variant="tonal"
>
<div class="text-subtitle-2 mb-2">請先修正以下問題</div>
<div class="d-flex flex-column ga-1">
<v-btn
v-for="error in errorSummary" :key="error.field" color="error" size="small" variant="text"
@click="scrollToField(error.field)">
v-for="error in errorSummary"
:key="error.field"
color="error"
size="small"
variant="text"
@click="scrollToField(error.field)"
>
{{ error.message }}
</v-btn>
</div>
</v-alert>
<!-- 載入中骨架畫面 -->
<v-skeleton-loader v-if="isLoading" class="mt-4" type="subtitle,paragraph" width="100%" />
<v-skeleton-loader
v-if="isLoading"
class="mt-4"
type="subtitle,paragraph"
width="100%"
/>
<!-- 學生主檔表單：檢視模式時會自動套用 readonly 樣式 -->
<v-form
v-else :class="[
v-else
:class="[
{ 'form-readonly': isFormReadonly },
isMobile ? '' : 'd-flex flex-column h-100',
]" @submit.prevent="requestSaveConfirmation">
]"
@submit.prevent="requestSaveConfirmation"
>
<maintenance-student-form-fields
:departments="departments"
:enroll-years="enrollYears"
@@ -142,37 +282,77 @@ v-else :class="[
<v-divider />
<master-detail-b-semester-section
:is-form-locked="isFormLocked" :is-form-readonly="isFormReadonly"
:is-mobile="isMobile" :selected-semester-id="selectedSemesterId"
:semesters="studentSemesters" @add-course="openAddCourseDialog"
@delete-course="requestDeleteCourse" @select="handleSemesterSelect"
@update-course="handleUpdateCourse" />
:is-form-locked="isFormLocked"
:is-form-readonly="isFormReadonly"
:is-mobile="isMobile"
:selected-semester-id="selectedSemesterId"
:semesters="studentSemesters"
@add-course="openAddCourseDialog"
@delete-course="requestDeleteCourse"
@select="handleSemesterSelect"
@update-course="handleUpdateCourse"
/>
</v-form>
</template>
<template #actions>
<template v-if="isMobile">
<v-btn class="flex-grow-1" :disabled="isSaving" variant="text" @click="requestCloseDialog">取消</v-btn>
<v-btn
v-if="isEditMode" class="flex-grow-1" color="error" :disabled="isSaving" variant="tonal"
@click="requestDeleteCurrent">
class="flex-grow-1"
:disabled="isSaving"
variant="text"
@click="requestCloseDialog"
>取消</v-btn
>
<v-btn
v-if="isEditMode"
class="flex-grow-1"
color="error"
:disabled="isSaving"
variant="tonal"
@click="requestDeleteCurrent"
>
刪除
</v-btn>
<v-btn
v-if="!isViewMode" class="flex-grow-1" color="primary" :disabled="!isDirty || isLoading" :loading="isSaving"
variant="flat" @click="requestSaveConfirmation">
v-if="!isViewMode"
class="flex-grow-1"
color="primary"
:disabled="!isDirty || isLoading"
:loading="isSaving"
variant="flat"
@click="requestSaveConfirmation"
>
儲存
</v-btn>
<v-btn v-else class="flex-grow-1" color="primary" variant="flat" @click="requestCloseDialog">關閉</v-btn>
<v-btn
v-else
class="flex-grow-1"
color="primary"
variant="flat"
@click="requestCloseDialog"
>關閉</v-btn
>
</template>
<template v-else>
<v-spacer />
<v-btn :disabled="isSaving" variant="text" @click="requestCloseDialog">取消</v-btn>
<v-btn v-if="isEditMode" color="error" :disabled="isSaving" variant="tonal" @click="requestDeleteCurrent">
<v-btn
v-if="isEditMode"
color="error"
:disabled="isSaving"
variant="tonal"
@click="requestDeleteCurrent"
>
刪除
</v-btn>
<v-btn
v-if="!isViewMode" color="primary" :disabled="!isDirty || isLoading" :loading="isSaving"
variant="flat" @click="requestSaveConfirmation">
v-if="!isViewMode"
color="primary"
:disabled="!isDirty || isLoading"
:loading="isSaving"
variant="flat"
@click="requestSaveConfirmation"
>
儲存
</v-btn>
<v-btn v-else color="primary" variant="flat" @click="requestCloseDialog">關閉</v-btn>
@@ -206,9 +386,13 @@ v-if="!isViewMode" color="primary" :disabled="!isDirty || isLoading" :loading="i
<!-- 刪除課程確認 -->
<common-confirm-dialog
v-model="confirmDeleteCourseVisible" confirm-color="error"
confirm-text="確定移除" :message="`確定要移除「${pendingDeleteCourseName}」嗎？`" :title="`刪除課程`"
@confirm="confirmDeleteCourse" />
v-model="confirmDeleteCourseVisible"
confirm-color="error"
confirm-text="確定移除"
:message="`確定要移除「${pendingDeleteCourseName}」嗎？`"
:title="`刪除課程`"
@confirm="confirmDeleteCourse"
/>
<!-- 加入課程對話框 -->
<v-dialog v-model="addCourseDialogVisible" max-width="420" persistent>
@@ -219,25 +403,47 @@ v-model="confirmDeleteCourseVisible" confirm-color="error"
</v-card-title>
<v-card-text>
<v-select
v-model="addCourseForm.name" class="mb-3" density="comfortable" :items="availableCourses"
label="課程名稱" variant="outlined" @update:model-value="handleAddCourseNameSelect" />
v-model="addCourseForm.name"
class="mb-3"
density="comfortable"
:items="availableCourses"
label="課程名稱"
variant="outlined"
@update:model-value="handleAddCourseNameSelect"
/>
<v-row density="compact">
<v-col cols="6">
<v-text-field
v-model.number="addCourseForm.credits" density="comfortable" hide-spin-buttons label="學分"
type="number" variant="outlined" />
v-model.number="addCourseForm.credits"
density="comfortable"
hide-spin-buttons
label="學分"
type="number"
variant="outlined"
/>
</v-col>
<v-col cols="6">
<v-text-field
v-model.number="addCourseForm.score" density="comfortable" hide-spin-buttons label="分數"
type="number" variant="outlined" />
v-model.number="addCourseForm.score"
density="comfortable"
hide-spin-buttons
label="分數"
type="number"
variant="outlined"
/>
</v-col>
</v-row>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn variant="text" @click="addCourseDialogVisible = false">取消</v-btn>
<v-btn color="primary" :disabled="!addCourseForm.name" variant="flat" @click="confirmAddCourse">加入</v-btn>
<v-btn
color="primary"
:disabled="!addCourseForm.name"
variant="flat"
@click="confirmAddCourse"
>加入</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
@@ -283,8 +489,20 @@ const isMobile = computed(() => !smAndUp.value)
// 表格欄位設定（含固定欄與排序）
const tableHeaders = [
{ title: '學號', key: 'studentId', sortable: true, fixed: smAndUp.value && 'start' as const, width: 120 },
{ title: '姓名', key: 'name', sortable: true, fixed: smAndUp.value && 'start' as const, width: 100 },
{
title: '學號',
key: 'studentId',
sortable: true,
fixed: smAndUp.value && ('start' as const),
width: 120,
},
{
title: '姓名',
key: 'name',
sortable: true,
fixed: smAndUp.value && ('start' as const),
width: 100,
},
{ title: '系所', key: 'department', sortable: true, width: 140 },
{ title: '年級', key: 'grade', sortable: true, width: 90 },
{ title: '入學年度', key: 'enrollYear', sortable: true, width: 110 },
@@ -293,7 +511,14 @@ const tableHeaders = [
{ title: '電話', key: 'phone', sortable: true, width: 140 },
{ title: '指導老師', key: 'advisor', sortable: true, width: 110 },
{ title: '狀態', key: 'status', sortable: true, width: 90 },
{ title: '操作', key: 'actions', sortable: false, fixed: smAndUp.value && 'end' as const, width: 'auto', cellProps: { class: 'px-0 bg-background' } },
{
title: '操作',
key: 'actions',
sortable: false,
fixed: smAndUp.value && ('end' as const),
width: 'auto',
cellProps: { class: 'px-0 bg-background' },
},
]
// 查詢條件（示意用，未接 API）
@@ -340,8 +565,8 @@ const loadSequence = ref(0)
const studentSemesters = ref<SemesterRecord[]>([])
const selectedSemesterId = ref<number | null>(null)
const activeMobilePanel = ref<'master' | 'detail'>('master')
const selectedSemester = computed(() =>
studentSemesters.value.find((semester) => semester.id === selectedSemesterId.value) ?? null,
const selectedSemester = computed(
() => studentSemesters.value.find((semester) => semester.id === selectedSemesterId.value) ?? null
)
// 刪除課程確認狀態
@@ -355,13 +580,29 @@ const addCourseTargetSemesterId = ref<number | null>(null)
const addCourseForm = ref({ name: '', credits: 3, score: 0 })
const availableCourses = [
'資料結構', '演算法', '作業系統', '計算機組織', '線性代數',
'機率與統計', '資料庫系統', '人工智慧導論', '網頁程式設計', '計算機網路',
'資料結構',
'演算法',
'作業系統',
'計算機組織',
'線性代數',
'機率與統計',
'資料庫系統',
'人工智慧導論',
'網頁程式設計',
'計算機網路',
]
const creditsMap: Record<string, number> = {
資料結構: 3, 演算法: 3, 作業系統: 3, 計算機組織: 3, 線性代數: 3,
機率與統計: 3, 資料庫系統: 3, 人工智慧導論: 3, 網頁程式設計: 3, 計算機網路: 3,
資料結構: 3,
演算法: 3,
作業系統: 3,
計算機組織: 3,
線性代數: 3,
機率與統計: 3,
資料庫系統: 3,
人工智慧導論: 3,
網頁程式設計: 3,
計算機網路: 3,
}
// 輔助函式：重新載入當前學生的學期資料
@@ -390,8 +631,6 @@ function handleUpdateSemester (semesterId: number, payload: Partial<SemesterReco
semesterStore.updateSemester(semesterId, payload)
}
// 請求刪除課程（開啟確認對話框）
function requestDeleteCourse(semesterId: number, courseIndex: number, courseName: string) {
pendingDeleteCourseKey.value = { semesterId, courseIndex }
@@ -432,7 +671,9 @@ function handleAddCourseNameSelect (name: string) {
// 確認加入課程
function confirmAddCourse() {
if (!addCourseTargetSemesterId.value || !addCourseForm.value.name) return
const semester = studentSemesters.value.find((item) => item.id === addCourseTargetSemesterId.value)
const semester = studentSemesters.value.find(
(item) => item.id === addCourseTargetSemesterId.value
)
if (!semester) return
semesterStore.updateSemester(addCourseTargetSemesterId.value, {
courses: [
@@ -449,16 +690,19 @@ function confirmAddCourse () {
addCourseDialogVisible.value = false
}
function handleUpdateCourse (semesterId: number, courseIndex: number, payload: Partial<CourseRecord>) {
function handleUpdateCourse(
semesterId: number,
courseIndex: number,
payload: Partial<CourseRecord>
) {
const semester = studentSemesters.value.find((item) => item.id === semesterId)
if (!semester) return
const nextCourses = semester.courses.map((course, idx) =>
idx === courseIndex ? { ...course, ...payload } : course,
idx === courseIndex ? { ...course, ...payload } : course
)
semesterStore.updateSemester(semesterId, { courses: nextCourses })
}
const {
errorSummary,
fieldErrors,
src/views/maint/MasterDetailMntC.vue
+296 -73
View File
@@ -1,31 +1,77 @@
<template>
<mnt-page-cards
:search-panel-open="searchPanelOpen" :title="`主從資料維護示範C`"
@create="openAddDialog" @toggle-search="searchPanelOpen = !searchPanelOpen">
:search-panel-open="searchPanelOpen"
:title="`主從資料維護示範C`"
@create="openAddDialog"
@toggle-search="searchPanelOpen = !searchPanelOpen"
>
<template #search-fields>
<v-col cols="12" md="2">
<div id="search-student-id-label" class="text-body-2 text-medium-emphasis pl-2">學號</div>
<v-text-field
id="search-student-id" v-model="search.studentId" aria-labelledby="search-student-id-label" density="compact" hide-details name="searchStudentId" placeholder="例如：S2024001"
variant="outlined" />
id="search-student-id"
v-model="search.studentId"
aria-labelledby="search-student-id-label"
density="compact"
hide-details
name="searchStudentId"
placeholder="例如：S2024001"
variant="outlined"
/>
</v-col>
<v-col cols="12" md="2">
<div id="search-name-label" class="text-body-2 text-medium-emphasis pl-2">姓名</div>
<v-text-field id="search-name" v-model="search.name" aria-labelledby="search-name-label" density="compact" hide-details name="searchName" placeholder="例如：王小明" variant="outlined" />
<v-text-field
id="search-name"
v-model="search.name"
aria-labelledby="search-name-label"
density="compact"
hide-details
name="searchName"
placeholder="例如：王小明"
variant="outlined"
/>
</v-col>
<v-col cols="12" md="2">
<div id="search-department-label" class="text-body-2 text-medium-emphasis pl-2">系所</div>
<v-select id="search-department" v-model="search.department" aria-labelledby="search-department-label" density="compact" hide-details :items="departments" name="searchDepartment" variant="outlined" />
<v-select
id="search-department"
v-model="search.department"
aria-labelledby="search-department-label"
density="compact"
hide-details
:items="departments"
name="searchDepartment"
variant="outlined"
/>
</v-col>
<v-col cols="12" md="2">
<div id="search-grade-label" class="text-body-2 text-medium-emphasis pl-2">年級</div>
<v-select
id="search-grade" v-model="search.grade" aria-labelledby="search-grade-label" density="compact" hide-details item-title="title" item-value="value"
:items="gradeOptions" name="searchGrade" variant="outlined" />
id="search-grade"
v-model="search.grade"
aria-labelledby="search-grade-label"
density="compact"
hide-details
item-title="title"
item-value="value"
:items="gradeOptions"
name="searchGrade"
variant="outlined"
/>
</v-col>
<v-col cols="12" md="2">
<div id="search-status-label" class="text-body-2 text-medium-emphasis pl-2">狀態</div>
<v-select id="search-status" v-model="search.status" aria-labelledby="search-status-label" density="compact" hide-details :items="statuses" name="searchStatus" variant="outlined" />
<v-select
id="search-status"
v-model="search.status"
aria-labelledby="search-status-label"
density="compact"
hide-details
:items="statuses"
name="searchStatus"
variant="outlined"
/>
</v-col>
<v-col class="d-flex justify-end align-end flex-grow-1 ga-2" cols="12" md="auto">
<v-btn :prepend-icon="mdiBroom" variant="text" @click="resetSearch">清除</v-btn>
@@ -34,9 +80,17 @@ id="search-grade" v-model="search.grade" aria-labelledby="search-grade-label" de
</template>
<template #table>
<v-data-table
v-model:page="currentPage" class="student-table" density="compact" fixed-header :headers="tableHeaders" height="100%"
hide-default-footer :items="students" :items-per-page="itemsPerPage"
:row-props="rowProps">
v-model:page="currentPage"
class="student-table"
density="compact"
fixed-header
:headers="tableHeaders"
height="100%"
hide-default-footer
:items="students"
:items-per-page="itemsPerPage"
:row-props="rowProps"
>
<template #[`item.grade`]="{ item }">
{{ gradeLabel(item.grade) }}
</template>
@@ -47,15 +101,31 @@ v-model:page="currentPage" class="student-table" density="compact" fixed-header
</template>
<template #[`item.actions`]="{ item }">
<div class="d-flex ga-2">
<v-btn color="info" :prepend-icon="mdiEye" size="small" variant="text" @click="openViewDialog(item)">
<v-btn
color="info"
:prepend-icon="mdiEye"
size="small"
variant="text"
@click="openViewDialog(item)"
>
檢視
</v-btn>
<v-btn color="primary" :prepend-icon="mdiPencil" size="small" variant="text" @click="openEditDialog(item)">
<v-btn
color="primary"
:prepend-icon="mdiPencil"
size="small"
variant="text"
@click="openEditDialog(item)"
>
修改
</v-btn>
<v-btn
color="error" :prepend-icon="mdiDelete" size="small" variant="text"
@click="requestDeleteConfirmation(item)">
color="error"
:prepend-icon="mdiDelete"
size="small"
variant="text"
@click="requestDeleteConfirmation(item)"
>
刪除
</v-btn>
</div>
@@ -66,11 +136,35 @@ color="error" :prepend-icon="mdiDelete" size="small" variant="text"
{{ pageSummary }}
</div>
<div class="d-flex align-center ga-2">
<v-btn :disabled="currentPage <= 1" size="small" variant="text" @click="currentPage = 1">第一頁</v-btn>
<v-btn :disabled="currentPage <= 1" size="small" variant="text" @click="currentPage -= 1">上一頁</v-btn>
<v-btn
:disabled="currentPage <= 1"
size="small"
variant="text"
@click="currentPage = 1"
>第一頁</v-btn
>
<v-btn
:disabled="currentPage <= 1"
size="small"
variant="text"
@click="currentPage -= 1"
>上一頁</v-btn
>
<span class="text-body-2">{{ currentPage }} / {{ pageCount }}</span>
<v-btn :disabled="currentPage >= pageCount" size="small" variant="text" @click="currentPage += 1">下一頁</v-btn>
<v-btn :disabled="currentPage >= pageCount" size="small" variant="text" @click="currentPage = pageCount">最後頁</v-btn>
<v-btn
:disabled="currentPage >= pageCount"
size="small"
variant="text"
@click="currentPage += 1"
>下一頁</v-btn
>
<v-btn
:disabled="currentPage >= pageCount"
size="small"
variant="text"
@click="currentPage = pageCount"
>最後頁</v-btn
>
</div>
</div>
</template>
@@ -83,50 +177,95 @@ color="error" :prepend-icon="mdiDelete" size="small" variant="text"
<teleport to="body">
<!-- 包成元件需要傳高度寬度給dialog-panel -->
<v-overlay
class="dialog-overlay" :close-on-content-click="false" :model-value="dialogVisible" scrim="rgba(0, 0, 0, 0.45)"
scroll-strategy="block" @update:model-value="handleDialogVisibility">
class="dialog-overlay"
:close-on-content-click="false"
:model-value="dialogVisible"
scrim="rgba(0, 0, 0, 0.45)"
scroll-strategy="block"
@update:model-value="handleDialogVisibility"
>
<div class="dialog-panel" :class="{ 'is-mobile': isMobile }">
<master-detail-c-course-mobile-panel
v-if="isMobile && activeMobilePanel === 'detail'"
:is-form-locked="isFormLocked" :is-view-mode="isViewMode" :semester="selectedSemester"
@add-course="openAddCourseDialog" @close="closeDetailPanel" @delete-course="removeCourseFromSemester"
@update-course="handleUpdateCourse" />
:is-form-locked="isFormLocked"
:is-view-mode="isViewMode"
:semester="selectedSemester"
@add-course="openAddCourseDialog"
@close="closeDetailPanel"
@delete-course="removeCourseFromSemester"
@update-course="handleUpdateCourse"
/>
<!-- 主檔區塊 (Master Card)：學生基本資料與學期列表 -->
<!-- 說明：固定在視窗右側，包含學生表單與學期清單 -->
<mnt-dialog-card
v-else :content-class="isMobile ? 'pa-3 flex-grow-1 overflow-y-auto pb-16' : 'pa-2 flex-grow-1 overflow-hidden d-flex flex-column'" :dialog-subtitle="dialogSubtitle" :dialog-title="dialogTitle"
:is-edit-mode="isEditMode" :is-view-mode="isViewMode"
width="100%">
v-else
:content-class="
isMobile
? 'pa-3 flex-grow-1 overflow-y-auto pb-16'
: 'pa-2 flex-grow-1 overflow-hidden d-flex flex-column'
"
:dialog-subtitle="dialogSubtitle"
:dialog-title="dialogTitle"
:is-edit-mode="isEditMode"
:is-view-mode="isViewMode"
width="100%"
>
<template #toolbar>
<mnt-record-nav-toolbar
:has-next-record="hasNextRecord" :has-prev-record="hasPrevRecord"
:is-edit-mode="isEditMode" :is-view-mode="isViewMode" :mobile="isMobile"
@first="openEdgeRecord('first')" @last="openEdgeRecord('last')" @next="openAdjacentRecord('next')"
@prev="openAdjacentRecord('prev')" @switch-to-edit="switchToEditMode" @switch-to-view="switchToViewMode" />
:has-next-record="hasNextRecord"
:has-prev-record="hasPrevRecord"
:is-edit-mode="isEditMode"
:is-view-mode="isViewMode"
:mobile="isMobile"
@first="openEdgeRecord('first')"
@last="openEdgeRecord('last')"
@next="openAdjacentRecord('next')"
@prev="openAdjacentRecord('prev')"
@switch-to-edit="switchToEditMode"
@switch-to-view="switchToViewMode"
/>
</template>
<template #content>
<!-- 錯誤提示：當表單驗證未通過時顯示 -->
<v-alert v-if="errorSummary.length > 0 && !isLoading" class="mb-4" type="error" variant="tonal">
<v-alert
v-if="errorSummary.length > 0 && !isLoading"
class="mb-4"
type="error"
variant="tonal"
>
<div class="text-subtitle-2 mb-2">請先修正以下問題</div>
<div class="d-flex flex-column ga-1">
<v-btn
v-for="error in errorSummary" :key="error.field" color="error" size="small" variant="text"
@click="scrollToField(error.field)">
v-for="error in errorSummary"
:key="error.field"
color="error"
size="small"
variant="text"
@click="scrollToField(error.field)"
>
{{ error.message }}
</v-btn>
</div>
</v-alert>
<!-- 載入中骨架畫面 -->
<v-skeleton-loader v-if="isLoading" class="mt-4" type="subtitle,paragraph" width="100%" />
<v-skeleton-loader
v-if="isLoading"
class="mt-4"
type="subtitle,paragraph"
width="100%"
/>
<!-- 學生主檔表單：檢視模式時會自動套用 readonly 樣式 -->
<v-form
v-else :class="[
v-else
:class="[
{ 'form-readonly': isFormReadonly },
isMobile ? '' : 'd-flex flex-column h-100',
]" @submit.prevent="requestSaveConfirmation">
]"
@submit.prevent="requestSaveConfirmation"
>
<maintenance-student-form-fields
:departments="departments"
:enroll-years="enrollYears"
@@ -141,37 +280,77 @@ v-else :class="[
<v-divider />
<master-detail-c-course-section
:is-form-locked="isFormLocked" :is-form-readonly="isFormReadonly"
:is-mobile="isMobile" :selected-semester-id="selectedSemesterId"
:semesters="studentSemesters" @add-course="openAddCourseDialog"
@delete-course="removeCourseFromSemester" @select-semester="handleSemesterSelect"
@update-course="handleUpdateCourse" />
:is-form-locked="isFormLocked"
:is-form-readonly="isFormReadonly"
:is-mobile="isMobile"
:selected-semester-id="selectedSemesterId"
:semesters="studentSemesters"
@add-course="openAddCourseDialog"
@delete-course="removeCourseFromSemester"
@select-semester="handleSemesterSelect"
@update-course="handleUpdateCourse"
/>
</v-form>
</template>
<template #actions>
<template v-if="isMobile">
<v-btn class="flex-grow-1" :disabled="isSaving" variant="text" @click="requestCloseDialog">取消</v-btn>
<v-btn
v-if="isEditMode" class="flex-grow-1" color="error" :disabled="isSaving" variant="tonal"
@click="requestDeleteCurrent">
class="flex-grow-1"
:disabled="isSaving"
variant="text"
@click="requestCloseDialog"
>取消</v-btn
>
<v-btn
v-if="isEditMode"
class="flex-grow-1"
color="error"
:disabled="isSaving"
variant="tonal"
@click="requestDeleteCurrent"
>
刪除
</v-btn>
<v-btn
v-if="!isViewMode" class="flex-grow-1" color="primary" :disabled="!isDirty || isLoading" :loading="isSaving"
variant="flat" @click="requestSaveConfirmation">
v-if="!isViewMode"
class="flex-grow-1"
color="primary"
:disabled="!isDirty || isLoading"
:loading="isSaving"
variant="flat"
@click="requestSaveConfirmation"
>
儲存
</v-btn>
<v-btn v-else class="flex-grow-1" color="primary" variant="flat" @click="requestCloseDialog">關閉</v-btn>
<v-btn
v-else
class="flex-grow-1"
color="primary"
variant="flat"
@click="requestCloseDialog"
>關閉</v-btn
>
</template>
<template v-else>
<v-spacer />
<v-btn :disabled="isSaving" variant="text" @click="requestCloseDialog">取消</v-btn>
<v-btn v-if="isEditMode" color="error" :disabled="isSaving" variant="tonal" @click="requestDeleteCurrent">
<v-btn
v-if="isEditMode"
color="error"
:disabled="isSaving"
variant="tonal"
@click="requestDeleteCurrent"
>
刪除
</v-btn>
<v-btn
v-if="!isViewMode" color="primary" :disabled="!isDirty || isLoading" :loading="isSaving"
variant="flat" @click="requestSaveConfirmation">
v-if="!isViewMode"
color="primary"
:disabled="!isDirty || isLoading"
:loading="isSaving"
variant="flat"
@click="requestSaveConfirmation"
>
儲存
</v-btn>
<v-btn v-else color="primary" variant="flat" @click="requestCloseDialog">關閉</v-btn>
@@ -217,22 +396,46 @@ v-if="!isViewMode" color="primary" :disabled="!isDirty || isLoading" :loading="i
</v-card-title>
<v-card-text>
<v-select
v-model="addCourseForm.semesterId" class="mb-3" density="comfortable" item-title="label"
item-value="value" :items="semesterOptions" label="學期" variant="outlined" />
v-model="addCourseForm.semesterId"
class="mb-3"
density="comfortable"
item-title="label"
item-value="value"
:items="semesterOptions"
label="學期"
variant="outlined"
/>
<v-select
v-model="addCourseForm.courseName" class="mb-3" density="comfortable" :items="availableCourses"
label="課程名稱" variant="outlined" @update:model-value="handleCourseSelect" />
v-model="addCourseForm.courseName"
class="mb-3"
density="comfortable"
:items="availableCourses"
label="課程名稱"
variant="outlined"
@update:model-value="handleCourseSelect"
/>
<v-text-field
v-model.number="addCourseForm.credits" class="mb-3" density="comfortable" label="學分"
type="number" variant="outlined" />
v-model.number="addCourseForm.credits"
class="mb-3"
density="comfortable"
label="學分"
type="number"
variant="outlined"
/>
<v-text-field
v-model.number="addCourseForm.score" density="comfortable" label="分數" type="number"
variant="outlined" />
v-model.number="addCourseForm.score"
density="comfortable"
label="分數"
type="number"
variant="outlined"
/>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn variant="text" @click="addCourseDialogVisible = false">取消</v-btn>
<v-btn color="primary" :disabled="!canAddCourse" variant="flat" @click="confirmAddCourse">新增</v-btn>
<v-btn color="primary" :disabled="!canAddCourse" variant="flat" @click="confirmAddCourse"
>新增</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
@@ -272,8 +475,20 @@ const isMobile = computed(() => !smAndUp.value)
// 表格欄位設定（含固定欄與排序）
const tableHeaders = [
{ title: '學號', key: 'studentId', sortable: true, fixed: smAndUp.value && 'start' as const, width: 120 },
{ title: '姓名', key: 'name', sortable: true, fixed: smAndUp.value && 'start' as const, width: 100 },
{
title: '學號',
key: 'studentId',
sortable: true,
fixed: smAndUp.value && ('start' as const),
width: 120,
},
{
title: '姓名',
key: 'name',
sortable: true,
fixed: smAndUp.value && ('start' as const),
width: 100,
},
{ title: '系所', key: 'department', sortable: true, width: 140 },
{ title: '年級', key: 'grade', sortable: true, width: 90 },
{ title: '入學年度', key: 'enrollYear', sortable: true, width: 110 },
@@ -282,7 +497,14 @@ const tableHeaders = [
{ title: '電話', key: 'phone', sortable: true, width: 140 },
{ title: '指導老師', key: 'advisor', sortable: true, width: 110 },
{ title: '狀態', key: 'status', sortable: true, width: 90 },
{ title: '操作', key: 'actions', sortable: false, fixed: smAndUp.value && 'end' as const, width: 'auto', cellProps: { class: 'px-0 bg-background' } },
{
title: '操作',
key: 'actions',
sortable: false,
fixed: smAndUp.value && ('end' as const),
width: 'auto',
cellProps: { class: 'px-0 bg-background' },
},
]
// 查詢條件（示意用，未接 API）
@@ -330,7 +552,7 @@ const studentSemesters = ref<SemesterRecord[]>([])
const selectedSemesterId = ref<number | null>(null)
const activeMobilePanel = ref<'master' | 'detail'>('master')
const selectedSemester = computed(
() => studentSemesters.value.find((item) => item.id === selectedSemesterId.value) ?? null,
() => studentSemesters.value.find((item) => item.id === selectedSemesterId.value) ?? null
)
// 新增成績對話框狀態
@@ -361,7 +583,7 @@ const semesterOptions = computed(() =>
studentSemesters.value.map((sem) => ({
value: sem.id,
label: sem.semesterName,
})),
}))
)
// 是否可以新增
@@ -369,7 +591,7 @@ const canAddCourse = computed(
() =>
addCourseForm.value.semesterId !== null &&
addCourseForm.value.courseName !== '' &&
addCourseForm.value.credits > 0,
addCourseForm.value.credits > 0
)
// 開啟新增成績對話框
@@ -407,9 +629,7 @@ function handleCourseSelect (courseName: string) {
function confirmAddCourse() {
if (!addCourseForm.value.semesterId || !addCourseForm.value.courseName) return
const semester = studentSemesters.value.find(
(sem) => sem.id === addCourseForm.value.semesterId,
)
const semester = studentSemesters.value.find((sem) => sem.id === addCourseForm.value.semesterId)
if (!semester) return
semesterStore.updateSemester(addCourseForm.value.semesterId, {
@@ -450,11 +670,15 @@ function closeDetailPanel () {
selectedSemesterId.value = null
}
function handleUpdateCourse (semesterId: number, courseIndex: number, payload: Partial<CourseRecord>) {
function handleUpdateCourse(
semesterId: number,
courseIndex: number,
payload: Partial<CourseRecord>
) {
const semester = studentSemesters.value.find((item) => item.id === semesterId)
if (!semester) return
const nextCourses = semester.courses.map((course, idx) =>
idx === courseIndex ? { ...course, ...payload } : course,
idx === courseIndex ? { ...course, ...payload } : course
)
semesterStore.updateSemester(semesterId, { courses: nextCourses })
}
@@ -467,7 +691,6 @@ function removeCourseFromSemester (semesterId: number, courseIndex: number) {
})
}
const {
errorSummary,
fieldErrors,