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,72 @@
+<template>
+  <div class="d-flex justify-end py-0 py-sm-2">
+    <v-btn
+class="d-none d-md-block" color="grey-darken-1" icon="mdi-palette-outline" size="small" variant="text"
+      @click="toggleTheme"></v-btn>
+    <!-- <v-btn icon="mdi-dock-window" variant="text" size="small" color="grey-darken-1" @click="handleToggleLayout"></v-btn> -->
+    <v-menu location="bottom end">
+      <template #activator="{ props: menuActivatorProps }">
+        <v-btn
+v-bind="menuActivatorProps" color="grey-darken-1" icon="mdi-translate" size="small"
+          variant="text"></v-btn>
+      </template>
+      <v-list density="compact">
+        <v-list-item
+v-for="locale in localeOptions" :key="locale" :active="locale === props.locale"
+          @click="handleSelectLocale(locale)">
+          <v-list-item-title>{{ localeLabels[locale] ?? locale }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+    <!-- <v-btn icon="mdi-weather-night" variant="text" size="small" color="grey-darken-1"></v-btn> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useTheme } from 'vuetify'
+import { getNextThemeName } from '@/utils/theme'
+
+interface Props {
+  locale?: string
+  locales?: string[]
+  localeLabels?: Record<string, string>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  locale: 'zh-TW',
+  locales: () => ['zh-TW', 'en-US'],
+  localeLabels: () => ({
+    'en-US': 'English',
+    'zh-TW': '中文',
+  }),
+})
+
+const emit = defineEmits(['change-locale', 'toggle-layout'])
+
+const theme = useTheme()
+
+const availableThemeNames = computed(() =>
+  Object.keys(theme.themes.value ?? {}).filter((name) => name.startsWith('theme'))
+)
+
+function toggleTheme () {
+  const names = availableThemeNames.value
+  if (names.length === 0) return
+
+  const current = theme.global.name.value
+  const next = getNextThemeName(names, current)
+  if (!next) return
+  theme.change(next)
+}
+
+const localeOptions = computed(() =>
+  props.locales.length > 0 ? props.locales : ['zh-TW', 'en-US']
+)
+
+function handleSelectLocale (locale: string) {
+  if (locale === props.locale) return
+  emit('change-locale', locale)
+}
+
+</script>