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,99 @@
+<template>
+  <v-col
+    v-if="features.showFavorites && showFavoritesBar && !isMobile"
+    class="d-flex align-center pr-2 pl-3 py-1 bg-surface"
+  >
+    <div class="favorites-label text-body-2 text-no-wrap pe-2">
+      {{ favoritesConfig.label }}
+    </div>
+    <div class="favorites-list flex-grow-1 d-flex flex-wrap ga-2">
+      <transition-group class="d-flex flex-wrap ga-2" name="favorite-list" tag="div">
+        <v-chip
+          v-for="item in favoriteItems"
+          :key="item.path ?? item.title"
+          class="favorite-item"
+          closable
+          color="secondary"
+          size="small"
+          variant="outlined"
+          @click="emit('select', item)"
+          @click:close="emit('remove-favorite', item)"
+        >
+          <v-icon v-if="item.icon" class="me-1" size="16" :icon="item.icon" />
+          <span class="text-caption">{{ item.title }}</span>
+        </v-chip>
+      </transition-group>
+      <v-btn
+        v-if="favoritesConfig.showAdd"
+        class="favorite-add"
+        color="primary"
+        size="small"
+        variant="outlined"
+        @click="emit('add-favorite')"
+      >
+        <v-icon class="mr-1" size="16" :icon="mdiPlus" />
+        <span class="text-caption">{{ favoritesConfig.addLabel }}</span>
+      </v-btn>
+    </div>
+    <v-btn color="grey" size="small" variant="text" @click="emit('toggle-favorites-bar', false)">
+      <v-icon :icon="mdiEyeOff" />
+    </v-btn>
+  </v-col>
+</template>
+
+<script setup lang="ts">
+import type { AdminLayoutFavoritesConfig, AdminLayoutFeatures, AdminLayoutMenuItem } from './types'
+import { mdiEyeOff, mdiPlus } from '@mdi/js'
+
+interface Props {
+  features?: AdminLayoutFeatures
+  showFavoritesBar?: boolean
+  isMobile?: boolean
+  favoritesConfig?: AdminLayoutFavoritesConfig
+  favoriteItems?: AdminLayoutMenuItem[]
+}
+
+withDefaults(defineProps<Props>(), {
+  features: () => ({
+    showThemeToggle: false,
+    showFavorites: true,
+    showBreadcrumb: true,
+    showSearch: true,
+    showToolbarActions: true,
+    showUserInfo: true,
+  }),
+  showFavoritesBar: true,
+  isMobile: false,
+  favoritesConfig: () => ({
+    label: '',
+    addLabel: '',
+    showAdd: false,
+  }),
+  favoriteItems: () => [],
+})
+
+const emit = defineEmits<{
+  select: [item: AdminLayoutMenuItem]
+  'add-favorite': []
+  'remove-favorite': [item: AdminLayoutMenuItem]
+  'toggle-favorites-bar': [value: boolean]
+}>()
+</script>
+
+<style scoped>
+.favorite-item {
+  text-transform: none;
+}
+
+.favorite-list-enter-active,
+.favorite-list-leave-active,
+.favorite-list-move {
+  transition: all 0.2s ease;
+}
+
+.favorite-list-enter-from,
+.favorite-list-leave-to {
+  opacity: 0;
+  transform: scale(0.92);
+}
+</style>