docs: reorganize architecture strategy documentation

Split current project diagnostics into a dedicated analysis document and trim the main architecture strategy to focus on core guidance. This makes the documentation easier to navigate and separates observed issues from recommended architectural principles.docs: reorganize architecture strategy documentation Split current project diagnostics into a dedicated analysis document and trim the main architecture strategy to focus on core guidance. This makes the documentation easier to navigate and separates observed issues from recommended architectural principles.
2026-05-19 14:13:10 +08:00
parent 9ae91418e0
commit 96b96bcaaa
12 changed files with 1373 additions and 1077 deletions
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { mdiBroom, mdiMagnify } from '@mdi/js'
+
+interface GradeOption {
+  title: string
+  value: number
+}
+
+interface SearchState {
+  studentId: string
+  name: string
+  department: string
+  grade: number | null
+  status: string
+}
+
+defineProps<{
+  departments: string[]
+  gradeOptions: GradeOption[]
+  statuses: string[]
+}>()
+
+const search = defineModel<SearchState>({ required: true })
+
+defineEmits<{
+  (e: 'reset'): void
+}>()
+</script>
+
+<template>
+  <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"
+    />
+  </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-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-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"
+    />
+  </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-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="$emit('reset')">清除</v-btn>
+    <v-btn color="primary" disabled :prepend-icon="mdiMagnify" variant="tonal">查詢</v-btn>
+  </v-col>
+</template>