feat: 重構主佈局及相關元件，更新命名規則並新增功能

2026-03-30 15:14:12 +08:00
parent 79b20ded3b
commit d7ebbda3d3
10 changed files with 27 additions and 27 deletions
@@ -0,0 +1,91 @@
+<template>
+  <v-col
+    v-if="features.showBreadcrumb && breadcrumbBarVisible && !isMobile"
+    class="d-flex align-center justify-space-between pr-2 pl-3 py-1 bg-surface"
+  >
+    <v-breadcrumbs class="pa-0" density="compact" :items="breadcrumbItems">
+      <template #prepend>
+        <v-btn
+          v-if="features.showFavorites && !showFavoritesBar"
+          class="mr-2"
+          color="primary"
+          size="small"
+          variant="outlined"
+          @click="emit('toggle-favorites-bar', true)"
+        >
+          常用
+        </v-btn>
+      </template>
+      <template #item="{ item }">
+        <div class="d-flex align-center ga-1">
+          <v-icon
+            v-if="getBreadcrumbIcon(item)"
+            class="mr-1"
+            size="14"
+            :icon="getBreadcrumbIcon(item)"
+          />
+          <span class="text-caption text-no-wrap">{{ getBreadcrumbTitle(item) }}</span>
+        </div>
+      </template>
+      <template #divider>
+        <v-icon color="primary-variant" size="12" :icon="mdiChevronRight" />
+      </template>
+    </v-breadcrumbs>
+    <div class="page-actions">
+      <slot name="breadcrumb-actions"></slot>
+    </div>
+  </v-col>
+</template>
+
+<script setup lang="ts">
+import type { AdminLayoutBreadcrumbItem, AdminLayoutFeatures } from './types'
+import { mdiChevronRight } from '@mdi/js'
+
+interface Props {
+  features?: AdminLayoutFeatures
+  breadcrumbBarVisible?: boolean
+  isMobile?: boolean
+  breadcrumbItems?: AdminLayoutBreadcrumbItem[]
+  showFavoritesBar?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  features: () => ({
+    showThemeToggle: false,
+    showFavorites: true,
+    showBreadcrumb: true,
+    showSearch: true,
+    showToolbarActions: true,
+    showUserInfo: true,
+  }),
+  breadcrumbBarVisible: true,
+  isMobile: false,
+  breadcrumbItems: () => [],
+  showFavoritesBar: true,
+})
+
+const emit = defineEmits<{
+  'toggle-favorites-bar': [value: boolean]
+}>()
+
+function getBreadcrumbItem(item: unknown): AdminLayoutBreadcrumbItem | null {
+  if (typeof item !== 'object' || item === null) return null
+
+  if ('title' in item) {
+    return item as AdminLayoutBreadcrumbItem
+  }
+
+  const raw = (item as { raw?: unknown }).raw
+  if (typeof raw !== 'object' || raw === null || !('title' in raw)) return null
+
+  return raw as AdminLayoutBreadcrumbItem
+}
+
+function getBreadcrumbIcon(item: unknown) {
+  return getBreadcrumbItem(item)?.icon
+}
+
+function getBreadcrumbTitle(item: unknown) {
+  return getBreadcrumbItem(item)?.title ?? ''
+}
+</script>