refactor(app): extract page logic into composable drivers

src/views/FncPage.vue

@@ -1,13 +1,10 @@
-<template>
-  <v-sheet height="100%" width="100%">
-    {{ fncId }}
-  </v-sheet>
-</template>
-
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
+import PageFunction from '@/components/pages/PageFunction.vue'
+import { useFunctionPage } from '@/composables/page-drivers/useFunctionPage'
 
-const route = useRoute()
-const fncId = computed(() => String(route.params.fncId ?? ''))
+const { pageModel } = useFunctionPage()
 </script>
+
+<template>
+  <PageFunction :page="pageModel" />
+</template>

src/views/Home.vue

@@ -1,83 +1,17 @@
+<script setup lang="ts">
+import PageHome from '@/components/pages/PageHome.vue'
+import { useHomePage } from '@/composables/page-drivers/useHomePage'
+
+const page = useHomePage()
+</script>
+
 <template>
-  <page-index
-    :is-news-dialog-open="isNewsDialogOpen"
-    :news-items="newsItems"
-    :quick-items="quickItems"
-    :selected-news="selectedNews"
-    @message-center="handleMessageCenter"
-    @news="handleNews"
-    @quick="handleQuick"
-    @update:is-news-dialog-open="isNewsDialogOpen = $event"
+  <PageHome
+    v-model:news-dialog-open="page.isNewsDialogOpen.value"
+    :page="page.pageModel.value"
+    :selected-news="page.selectedNews.value"
+    @message-center="page.handleMessageCenter"
+    @news="page.handleNews"
+    @quick="page.handleQuick"
   />
 </template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import PageIndex from '@/components/PageIndex.vue'
-import { useMessageStore } from '@/stores/messages'
-import { useSnackbarStore } from '@/stores/snackbar'
-
-const snackbar = useSnackbarStore()
-const messageStore = useMessageStore()
-
-const newsItems = [
-  {
-    id: 1,
-    date: '29',
-    month: '1月',
-    title: '113學年度第2學期加退選開始',
-    desc: '加退選時間為1月29日至2月9日止，請同學把握時間完成選課作業。',
-    dept: '教務處',
-    views: '1,234',
-    isNew: true,
-  },
-  {
-    id: 2,
-    date: '27',
-    month: '1月',
-    title: '場地借用系統維護通知',
-    desc: '系統將於本週六凌晨01:00-05:00進行維護，期間暫停服務。',
-    dept: '總務處',
-    views: '856',
-    isNew: false,
-  },
-  {
-    id: 3,
-    date: '25',
-    month: '1月',
-    title: '112學年度第1學期期末成績已開放查詢',
-    desc: '同學可至「查詢 > 教務資訊查詢 > 學期成績查詢」查看本學期成績。',
-    dept: '教務處',
-    views: '3,567',
-    isNew: false,
-  },
-]
-
-type NewsItem = (typeof newsItems)[number]
-
-const quickItems = [
-  { icon: '➕', title: '線上加選' },
-  { icon: '➖', title: '線上退選' },
-  { icon: '📊', title: '成績查詢' },
-  { icon: '📅', title: '個人課表' },
-  { icon: '📝', title: '網路請假' },
-  { icon: '🏢', title: '場地借用' },
-]
-
-const selectedNews = ref<NewsItem | null>(null)
-const isNewsDialogOpen = ref(false)
-
-function handleNews(item: NewsItem) {
-  selectedNews.value = item
-  isNewsDialogOpen.value = true
-}
-
-// 點擊首頁「訊息中心」卡片，開啟共用的訊息清單 dialog
-function handleMessageCenter() {
-  messageStore.open()
-}
-
-function handleQuick(item: (typeof quickItems)[number]) {
-  snackbar.show({ message: `前往：${item.title}`, color: 'info' })
-}
-</script>

src/views/Settings.vue

@@ -1,5 +1,10 @@
-<template>
-  <div>設定頁面</div>
-</template>
+<script setup lang="ts">
+import PageSettings from '@/components/pages/PageSettings.vue'
+import { useSettingsPage } from '@/composables/page-drivers/useSettingsPage'
 
-<script setup lang="ts"></script>
+const { pageModel } = useSettingsPage()
+</script>
+
+<template>
+  <PageSettings :page="pageModel" />
+</template>