feat: add SingleRecordMnt component for student record maintenance with search, add, edit, view, and delete functionalities

2026-03-26 11:24:37 +08:00
parent 507afcc99c
commit 069141794e
116 changed files with 15247 additions and 107 deletions
@@ -0,0 +1,251 @@
+<template>
+  <v-app>
+    <v-navigation-drawer v-model="drawer">
+      <v-list v-model:opened="opened" color="primary" density="compact" prepend-gap="8">
+        <!-- 收藏項目區塊 -->
+        <template v-if="favoriteItems?.length">
+          <v-list-subheader class="bg-primary-variant" color="on-primary">
+            <div class="d-flex align-center w-100">
+              <span class="flex-grow-1">{{ favoriteHeaderLabel }}</span>
+              <v-btn
+density="compact" icon="mdi-unfold-less-horizontal" :ripple="false" variant="text"
+                @click.stop="collapseFavoriteGroups" />
+            </div>
+          </v-list-subheader>
+          <template v-for="item in favoriteItems" :key="item.path ?? item.title">
+            <!-- 第一層：有子項目的群組 -->
+            <v-list-group v-if="item.subItems?.length" :value="`fav:${item.path ?? item.title}`">
+              <template #activator="{ props }">
+                <v-list-item v-bind="props" :link="isNavigable(item)" :to="isNavigable(item) ? item.path : undefined">
+                  <!-- 第一層 title（父層） -->
+                  <template #title>
+                    <span class="text-body-2 nav-text-overflow">{{ item.title }}</span>
+                  </template>
+                </v-list-item>
+              </template>
+              <template v-for="subItem in item.subItems" :key="subItem.path ?? subItem.title">
+                <!-- 第二層：無子項目的單一項目 -->
+                <v-list-item :link="!!subItem.path" :to="subItem.path">
+                  <!-- 第二層 title（葉節點） -->
+                  <template #title>
+                    <v-tooltip location="end" :text="subItem.title">
+                      <template #activator="{ props: tooltipProps }">
+                        <span v-bind="tooltipProps" class="text-body-2 nav-text-overflow">{{ subItem.title }}</span>
+                      </template>
+                    </v-tooltip>
+                  </template>
+                </v-list-item>
+              </template>
+            </v-list-group>
+            <!-- 第一層：無子項目的單一項目 -->
+            <v-list-item v-else :link="!!item.path" :to="item.path">
+              <!-- 第一層 title（葉節點） -->
+              <template #title>
+                <v-tooltip location="end" :text="item.title">
+                  <template #activator="{ props: tooltipProps }">
+                    <span v-bind="tooltipProps" class="text-body-2 nav-text-overflow">{{ item.title }}</span>
+                  </template>
+                </v-tooltip>
+              </template>
+            </v-list-item>
+          </template>
+        </template>
+
+        <v-list-subheader class="bg-primary" color="on-primary">
+          <div class="d-flex align-center w-100">
+            <span class="flex-grow-1">{{ menuHeaderLabel }}</span>
+            <v-btn
+density="compact" icon="mdi-unfold-less-horizontal" :ripple="false" variant="text"
+              @click.stop="collapseMenuGroups" />
+          </div>
+        </v-list-subheader>
+        <!-- 主選單區塊 -->
+        <template v-for="item in menuItems" :key="item.path ?? item.title">
+          <!-- 第一層：有子項目的群組 -->
+          <v-list-group v-if="item.subItems?.length" :value="`menu:${item.path ?? item.title}`">
+            <template #activator="{ props }">
+              <v-list-item
+v-bind="props" :link="isNavigable(item) && !!item.path"
+                :to="isNavigable(item) ? item.path : undefined">
+                <!-- 第一層 title（父層） -->
+                <template #title>
+                  <span class="text-body-2 nav-text-overflow">{{ item.title }}</span>
+                </template>
+              </v-list-item>
+            </template>
+            <template v-for="subItem in item.subItems" :key="subItem.path ?? subItem.title">
+              <!-- 第二層：有子項目的群組 -->
+              <v-list-group
+v-if="subItem.subItems?.length"
+                :value="`menu:${item.path ?? item.title}::${subItem.path ?? subItem.title}`">
+                <template #activator="{ props: subProps }">
+                  <v-list-item
+v-bind="subProps" :link="isNavigable(subItem)"
+                    :to="isNavigable(subItem) ? subItem.path : undefined">
+                    <!-- 第二層 title（父層） -->
+                    <template #title>
+                      <span class="text-body-2 nav-text-overflow">{{ subItem.title }}</span>
+                    </template>
+                  </v-list-item>
+                </template>
+
+                <!-- 第三層：最底層項目 -->
+                <v-list-item
+v-for="subSubItem in subItem.subItems" :key="subSubItem.path ?? subSubItem.title"
+                  :link="!!subSubItem.path" :to="subSubItem.path">
+                  <!-- 第三層 title（葉節點） -->
+                  <template #title>
+                    <v-tooltip location="end" :text="subSubItem.title">
+                      <template #activator="{ props: tooltipProps }">
+                        <span v-bind="tooltipProps" class="text-body-2 nav-text-overflow">{{ subSubItem.title }}</span>
+                      </template>
+                    </v-tooltip>
+                  </template>
+                </v-list-item>
+              </v-list-group>
+
+              <!-- 第二層：無子項目的單一項目 -->
+              <v-list-item v-else :link="!!subItem.path" :to="subItem.path">
+                <!-- 第二層 title（葉節點） -->
+                <template #title>
+                  <v-tooltip location="end" :text="subItem.title">
+                    <template #activator="{ props: tooltipProps }">
+                      <span v-bind="tooltipProps" class="text-body-2 nav-text-overflow">{{ subItem.title }}</span>
+                    </template>
+                  </v-tooltip>
+                </template>
+              </v-list-item>
+            </template>
+          </v-list-group>
+          <!-- 第一層：無子項目的單一項目 -->
+          <v-list-item v-else :link="!!item.path" :to="item.path">
+            <!-- 第一層 title（葉節點） -->
+            <template #title>
+              <v-tooltip location="end" :text="item.title">
+                <template #activator="{ props: tooltipProps }">
+                  <span v-bind="tooltipProps" class="text-body-2 nav-text-overflow">{{ item.title }}</span>
+                </template>
+              </v-tooltip>
+            </template>
+          </v-list-item>
+        </template>
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-app-bar density="compact">
+      <v-app-bar-nav-icon @click="drawer = !drawer" />
+      <v-toolbar-title>{{ systemTitle }}</v-toolbar-title>
+      <v-spacer />
+      <v-tooltip location="bottom" :text="themeToggleLabel">
+        <template #activator="{ props }">
+          <v-btn v-bind="props" :aria-label="themeToggleLabel" icon="mdi-palette" variant="text" @click="toggleTheme" />
+        </template>
+      </v-tooltip>
+
+      <v-tooltip location="bottom" :text="logoutLabel">
+        <template #activator="{ props }">
+          <v-btn v-bind="props" :aria-label="logoutLabel" icon="mdi-logout" variant="text" @click="$emit('logout')" />
+        </template>
+      </v-tooltip>
+    </v-app-bar>
+
+    <v-main>
+      <v-container class="pa-2" fluid height="100%">
+        <slot></slot>
+      </v-container>
+    </v-main>
+  </v-app>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { useTheme } from 'vuetify'
+import { getNextThemeName } from '@/utils/theme'
+
+defineEmits(['logout'])
+
+defineProps({
+  systemTitle: { type: String, default: '管理系統' },
+  themeToggleLabel: { type: String, default: '切換主題' },
+  logoutLabel: { type: String, default: '登出' },
+  favoriteHeaderLabel: { type: String, default: '我的最愛' },
+  menuHeaderLabel: { type: String, default: '選單' },
+  favoriteItems: {
+    type: Array,
+    default: () => [],
+  },
+  menuItems: {
+    type: Array,
+    default: () => [
+      { title: '首頁', path: '/' },
+      { title: '設定', path: '/settings' },
+    ],
+  },
+})
+
+const drawer = ref(true)
+
+const opened = ref([])
+
+const theme = useTheme()
+
+const availableThemeNames = computed(() =>
+  Object.keys(theme.themes.value ?? {}).filter((name) => name.startsWith('theme'))
+)
+
+function toggleTheme () {
+  const names = availableThemeNames.value
+  if (names.length === 0) return
+
+  const current = theme.global.name.value
+  const next = getNextThemeName(names, current)
+  if (!next) return
+  theme.change(next)
+}
+
+function collapseFavoriteGroups () {
+  opened.value = opened.value.filter((key) => !String(key).startsWith('fav:'))
+}
+
+function collapseMenuGroups () {
+  opened.value = opened.value.filter((key) => !String(key).startsWith('menu:'))
+}
+
+const isNavigable = (item) => item?.navigable !== false
+</script>
+
+<style scoped>
+.nav-text-overflow {
+  display: inline-block;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 確保 v-list-group 的 activator 也有 hover 效果 */
+:deep(.v-list-group > .v-list-item) {
+  cursor: pointer;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+:deep(.v-list-group > .v-list-item:hover) {
+  background: rgb(var(--v-theme-on-surface-variant));
+  color: rgb(var(--v-theme-on-surface));
+}
+
+/* 為所有 v-list-item 加上 transition */
+:deep(.v-list-item) {
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+:deep(.v-navigation-drawer__content) {
+  scrollbar-gutter: stable;
+}
+
+@supports not (scrollbar-gutter: stable) {
+  :deep(.v-navigation-drawer__content) {
+    overflow-y: scroll;
+  }
+}
+</style>