refactor(app): extract page logic into composable drivers

2026-05-19 16:38:08 +08:00
parent 2b780a12c2
commit 51fbbd7101
13 changed files with 576 additions and 692 deletions
@@ -0,0 +1,280 @@
+import {
+  mdiCloseCircle,
+  mdiCog,
+  mdiFileDocumentOutline,
+  mdiFileTreeOutline,
+  mdiHome,
+  mdiPlusCircle,
+  mdiTableEdit,
+} from '@mdi/js'
+import { computed, onBeforeUnmount, onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { SESSION_FORCE_LOGOUT_EVENT } from '@/services/session'
+import { useAuthStore } from '@/stores/auth'
+import { useBreadcrumbStore } from '@/stores/breadcrumbs'
+import { useFavoritesStore } from '@/stores/favorites'
+import { useMenuStore, type LayoutMenuItem } from '@/stores/menu'
+import { useMessageStore } from '@/stores/messages'
+import { useSnackbarStore } from '@/stores/snackbar'
+
+const fixedMenuItems: LayoutMenuItem[] = [
+  {
+    title: '資料維護',
+    navigable: false,
+    subItems: [
+      { title: '單筆資料維護', icon: mdiFileDocumentOutline, path: '/single-record-maintenance' },
+      { title: '主從資料維護A', icon: mdiFileTreeOutline, path: '/master-detail-maintenance' },
+      { title: '主從資料維護B', icon: mdiFileTreeOutline, path: '/master-detail-maintenance-b' },
+      { title: '主從資料維護C', icon: mdiFileTreeOutline, path: '/master-detail-maintenance-c' },
+      { title: '可編輯表格維護', icon: mdiTableEdit, path: '/editable-grid-maintenance' },
+    ],
+  },
+  { title: '登入頁', path: '/login' },
+]
+
+const menuItemsExample: LayoutMenuItem[] = [
+  { title: '首頁', icon: mdiHome, path: '/' },
+  {
+    title: '設定',
+    icon: mdiCog,
+    path: '/settings',
+    navigable: false,
+  },
+  ...fixedMenuItems,
+]
+
+function buildMergedMenuItems(items: LayoutMenuItem[]) {
+  const flatPaths = new Set<string>()
+  const collectPaths = (list: LayoutMenuItem[]) => {
+    for (const item of list || []) {
+      if (item?.path) flatPaths.add(item.path)
+      if (item?.subItems?.length) collectPaths(item.subItems)
+    }
+  }
+
+  collectPaths(items)
+
+  const mergeFixedItems = (list: LayoutMenuItem[]) => {
+    return (list || []).map((item) => {
+      if (!item?.subItems?.length) return item
+      const subItems = item.subItems.filter((sub) => !sub?.path || !flatPaths.has(sub.path))
+      return { ...item, subItems }
+    })
+  }
+
+  const filteredFixedItems = mergeFixedItems(fixedMenuItems).filter((item) => {
+    if (!item?.subItems?.length) return !item?.path || !flatPaths.has(item.path)
+    return item.subItems.length > 0
+  })
+
+  return [...(items || []), ...filteredFixedItems]
+}
+
+type UseAppShellOptions = {
+  onLogout?: () => void
+}
+
+export function useAppShell(options: UseAppShellOptions = {}) {
+  const route = useRoute()
+  const router = useRouter()
+  const snackbar = useSnackbarStore()
+  const authStore = useAuthStore()
+  const menuStore = useMenuStore()
+  const breadcrumbStore = useBreadcrumbStore()
+  const favoritesStore = useFavoritesStore()
+  const messageStore = useMessageStore()
+
+  const mergedMenuItems = computed(() => buildMergedMenuItems(menuStore.menuItems))
+
+  const mergedFavoriteItems = computed(() => {
+    const combined = [...menuStore.favoriteItems, ...favoritesStore.layoutItems]
+    const seen = new Set<string>()
+    return combined.filter((item) => {
+      const key = item.path ?? item.title
+      if (!key) return false
+      if (seen.has(key)) return false
+      seen.add(key)
+      return true
+    })
+  })
+
+  const layoutProps = computed(() => {
+    const layout = route.meta.layout
+    if (layout === 'default') {
+      return {
+        systemTitle: '測試環境',
+        favoriteItems: mergedFavoriteItems.value,
+        menuItems: mergedMenuItems.value,
+        breadcrumbItems: breadcrumbStore.breadcrumbItems,
+      }
+    }
+    return {}
+  })
+
+  function handleSelect(item: LayoutMenuItem) {
+    if (item.path) {
+      router.push(item.path)
+    }
+  }
+
+  function recursiveFindTitle(path: string, items: LayoutMenuItem[]): string | null {
+    for (const item of items) {
+      if (item.path === path) return item.title
+      if (item.subItems?.length) {
+        const found = recursiveFindTitle(path, item.subItems)
+        if (found) return found
+      }
+    }
+    return null
+  }
+
+  function findTitle(path: string) {
+    const menuTitle = recursiveFindTitle(path, menuStore.menuItems)
+    if (menuTitle) return menuTitle
+
+    const favoriteTitle = recursiveFindTitle(path, menuStore.favoriteItems)
+    if (favoriteTitle) return favoriteTitle
+
+    const exampleTitle = recursiveFindTitle(path, menuItemsExample)
+    if (exampleTitle) return exampleTitle
+
+    if (path === '/') return '首頁'
+
+    return path
+  }
+
+  function findMenuItem(path: string) {
+    const recursiveFind = (items: LayoutMenuItem[]): LayoutMenuItem | null => {
+      for (const item of items) {
+        if (item.path === path) return item
+        if (item.subItems?.length) {
+          const found = recursiveFind(item.subItems)
+          if (found) return found
+        }
+      }
+      return null
+    }
+
+    return recursiveFind(mergedMenuItems.value)
+  }
+
+  const currentFavoriteInfo = computed(() => {
+    const path = route.path
+    const menuItem = findMenuItem(path)
+    const title =
+      menuItem?.title ||
+      (typeof route.meta?.title === 'string' ? route.meta.title : null) ||
+      findTitle(path)
+    return {
+      title,
+      path,
+      icon: menuItem?.icon,
+    }
+  })
+
+  const isCurrentFavorite = computed(() => favoritesStore.isFavorite(route.path))
+  const isFavoriteActionDisabled = computed(
+    () => !currentFavoriteInfo.value?.path || route.path === '/'
+  )
+  const favoriteActionLabel = computed(() => (isCurrentFavorite.value ? '移除常用' : '加入常用'))
+  const favoriteActionIcon = computed(() =>
+    isCurrentFavorite.value ? mdiCloseCircle : mdiPlusCircle
+  )
+
+  function toggleFavoriteItem(item: LayoutMenuItem) {
+    if (!item?.path || item.path === '/') return
+    favoritesStore.toggle({
+      title: item.title || findTitle(item.path),
+      path: item.path,
+      icon: item.icon,
+    })
+  }
+
+  function toggleFavorite() {
+    toggleFavoriteItem(currentFavoriteInfo.value)
+  }
+
+  function handleRemoveFavorite(item: LayoutMenuItem) {
+    toggleFavoriteItem(item)
+  }
+
+  function goHome() {
+    router.push('/')
+  }
+
+  function updateBreadcrumbs() {
+    const resolvedTitle = findTitle(route.path)
+    const fallbackTitle =
+      resolvedTitle && resolvedTitle !== route.path
+        ? resolvedTitle
+        : typeof route.meta?.title === 'string'
+          ? route.meta.title
+          : null
+
+    breadcrumbStore.setBreadcrumbs({
+      path: route.path,
+      menuItems: mergedMenuItems.value,
+      favoriteItems: mergedFavoriteItems.value,
+      fallbackTitle,
+      homeLabel: '首頁',
+      homeIcon: mdiHome,
+    })
+  }
+
+  function handleLayoutAction(type: string) {
+    if (type === 'messages') {
+      messageStore.open()
+    }
+  }
+
+  function performLogout(feedback: { message: string; color: string }) {
+    authStore.logout()
+    options.onLogout?.()
+    snackbar.show(feedback)
+    router.replace({ name: 'login' })
+  }
+
+  function handleLogout() {
+    performLogout({ message: '登出成功', color: 'success' })
+  }
+
+  function handleForceLogout(event: Event) {
+    const message = (event as CustomEvent)?.detail?.message || '請重新登入'
+    performLogout({ message, color: 'warning' })
+  }
+
+  watch(
+    [
+      () => route.path,
+      () => menuStore.menuItems,
+      () => menuStore.favoriteItems,
+      () => favoritesStore.items,
+    ],
+    () => updateBreadcrumbs(),
+    { immediate: true, deep: true }
+  )
+
+  onMounted(() => {
+    window.addEventListener(SESSION_FORCE_LOGOUT_EVENT, handleForceLogout)
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener(SESSION_FORCE_LOGOUT_EVENT, handleForceLogout)
+  })
+
+  return {
+    favoriteActionIcon,
+    favoriteActionLabel,
+    favoritesStore,
+    goHome,
+    handleLayoutAction,
+    handleLogout,
+    handleRemoveFavorite,
+    handleSelect,
+    isFavoriteActionDisabled,
+    layoutProps,
+    menuStore,
+    mergedMenuItems,
+    toggleFavorite,
+  }
+}
@@ -0,0 +1,18 @@
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+export interface FunctionPageModel {
+  fncId: string
+}
+
+export function useFunctionPage() {
+  const route = useRoute()
+
+  const pageModel = computed<FunctionPageModel>(() => ({
+    fncId: String(route.params.fncId ?? ''),
+  }))
+
+  return {
+    pageModel,
+  }
+}
@@ -0,0 +1,101 @@
+import { computed, ref } from 'vue'
+import { useMessageStore } from '@/stores/messages'
+import { useSnackbarStore } from '@/stores/snackbar'
+
+export interface HomeNewsItem {
+  id: number
+  date: string
+  month: string
+  title: string
+  desc: string
+  dept: string
+  views: string
+  isNew: boolean
+}
+
+export interface HomeQuickItem {
+  icon: string
+  title: string
+}
+
+export interface HomePageModel {
+  type: 'home'
+  newsItems: HomeNewsItem[]
+  quickItems: HomeQuickItem[]
+}
+
+const newsItems: HomeNewsItem[] = [
+  {
+    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,
+  },
+]
+
+const quickItems: HomeQuickItem[] = [
+  { icon: '➕', title: '線上加選' },
+  { icon: '➖', title: '線上退選' },
+  { icon: '📊', title: '成績查詢' },
+  { icon: '📅', title: '個人課表' },
+  { icon: '📝', title: '網路請假' },
+  { icon: '🏢', title: '場地借用' },
+]
+
+export function useHomePage() {
+  const snackbar = useSnackbarStore()
+  const messageStore = useMessageStore()
+  const selectedNews = ref<HomeNewsItem | null>(null)
+  const isNewsDialogOpen = ref(false)
+  const pageModel = computed<HomePageModel>(() => ({
+    type: 'home',
+    newsItems,
+    quickItems,
+  }))
+
+  function handleNews(item: HomeNewsItem) {
+    selectedNews.value = item
+    isNewsDialogOpen.value = true
+  }
+
+  function handleMessageCenter() {
+    messageStore.open()
+  }
+
+  function handleQuick(item: HomeQuickItem) {
+    snackbar.show({ message: `前往：${item.title}`, color: 'info' })
+  }
+
+  return {
+    pageModel,
+    selectedNews,
+    isNewsDialogOpen,
+    handleNews,
+    handleMessageCenter,
+    handleQuick,
+  }
+}
@@ -0,0 +1,13 @@
+import { computed } from 'vue'
+
+export interface SettingsPageModel {
+  title: string
+}
+
+export function useSettingsPage() {
+  const pageModel = computed<SettingsPageModel>(() => ({
+    title: '設定頁面',
+  }))
+
+  return { pageModel }
+}