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.

src/components/sections/SectionDataTable.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { mdiDelete, mdiEye, mdiPencil } from '@mdi/js'
+import type { StudentRecord } from '@/models/student'
+
+defineProps<{
+  currentPage: number
+  gradeLabel: (grade: number) => string
+  headers: any[]
+  items: StudentRecord[]
+  itemsPerPage: number
+  pageCount: number
+  pageSummary: string
+  rowProps: (data: { item: StudentRecord }) => Record<string, string>
+  statusColor: (status: string) => string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:currentPage', page: number): void
+  (e: 'view', record: StudentRecord): void
+  (e: 'edit', record: StudentRecord): void
+  (e: 'delete', record: StudentRecord): void
+}>()
+</script>
+
+<template>
+  <v-data-table
+    class="student-table"
+    density="compact"
+    fixed-header
+    :headers="headers"
+    height="100%"
+    hide-default-footer
+    :items="items"
+    :items-per-page="itemsPerPage"
+    :page="currentPage"
+    :row-props="rowProps"
+    @update:page="emit('update:currentPage', $event)"
+  >
+    <template #[`item.grade`]="{ item }">
+      {{ gradeLabel(item.grade) }}
+    </template>
+    <template #[`item.status`]="{ item }">
+      <v-chip :color="statusColor(item.status)" size="small" variant="tonal">
+        {{ item.status }}
+      </v-chip>
+    </template>
+    <template #[`item.actions`]="{ item }">
+      <div class="d-flex ga-2">
+        <v-btn
+          color="info"
+          :prepend-icon="mdiEye"
+          size="small"
+          variant="text"
+          @click="emit('view', item)"
+        >
+          檢視
+        </v-btn>
+        <v-btn
+          color="primary"
+          :prepend-icon="mdiPencil"
+          size="small"
+          variant="text"
+          @click="emit('edit', item)"
+        >
+          修改
+        </v-btn>
+        <v-btn
+          color="error"
+          :prepend-icon="mdiDelete"
+          size="small"
+          variant="text"
+          @click="emit('delete', item)"
+        >
+          刪除
+        </v-btn>
+      </div>
+    </template>
+    <template #bottom>
+      <div class="d-flex align-center justify-space-between px-4 py-3">
+        <div class="text-body-2 text-medium-emphasis">
+          {{ pageSummary }}
+        </div>
+        <div class="d-flex align-center ga-2">
+          <v-btn
+            :disabled="currentPage <= 1"
+            size="small"
+            variant="text"
+            @click="emit('update:currentPage', 1)"
+          >
+            第一頁
+          </v-btn>
+          <v-btn
+            :disabled="currentPage <= 1"
+            size="small"
+            variant="text"
+            @click="emit('update:currentPage', currentPage - 1)"
+          >
+            上一頁
+          </v-btn>
+          <span class="text-body-2">{{ currentPage }} / {{ pageCount }}</span>
+          <v-btn
+            :disabled="currentPage >= pageCount"
+            size="small"
+            variant="text"
+            @click="emit('update:currentPage', currentPage + 1)"
+          >
+            下一頁
+          </v-btn>
+          <v-btn
+            :disabled="currentPage >= pageCount"
+            size="small"
+            variant="text"
+            @click="emit('update:currentPage', pageCount)"
+          >
+            最後頁
+          </v-btn>
+        </div>
+      </div>
+    </template>
+  </v-data-table>
+</template>
+
+<style scoped>
+.student-table {
+  overflow: auto;
+}
+
+.student-table :deep(table) {
+  min-width: 1400px;
+}
+
+.student-table :deep(th),
+.student-table :deep(td) {
+  white-space: nowrap;
+}
+
+.student-table :deep(.v-data-table-column--fixed),
+.student-table :deep(.v-data-table-column--fixed-end) {
+  background: rgb(var(--v-theme-surface));
+}
+
+.student-table :deep(.v-data-table-column--fixed-last-start)::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: -5px;
+  bottom: 0;
+  width: 5px;
+  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
+}
+
+.student-table :deep(.v-data-table-footer) {
+  padding: 4px 0 0;
+}
+
+tbody tr.is-highlighted {
+  animation: row-highlight 1.6s ease-out;
+}
+
+@keyframes row-highlight {
+  0% {
+    background-color: rgba(var(--v-theme-primary), 0.18);
+  }
+
+  100% {
+    background-color: transparent;
+  }
+}
+</style>