feat(ui): implement dashboard layout and refactor pages

This commit replaces the previous simple layout with a comprehensive dashboard interface using Nuxt UI Pro components.

- Introduced a new default layout with `UDashboardSidebar` and `UDashboardPanel`.
- Refactored the main page (`index.vue`) by splitting it into `ItemManageStatistics` and `ItemManageTable` components.
- Added new computed stats for monthly growth and total images, and displayed them in new statistic cards.
- Reorganized components from `item/` to a new `itemManage/` directory.
- Added custom primary and secondary theme colors.

app/assets/css/main.css

@@ -1,6 +1,11 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 
+@theme {
+  --color-primary: #3a4dfb;
+  --color-secondary: #919cfc;
+}
+
 .router-link-exact-active {
   @apply text-blue-600 bg-blue-50;
 }

app/components/itemManage/Statistics.vue

@@ -0,0 +1,76 @@
+<template>
+  <!-- 统计 -->
+  <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+    <UCard v-for="stat in statistics" :key="stat.label">
+      <div class="space-y-2">
+        <div class="flex items-center justify-between">
+          <p class="text-sm text-gray-500 dark:text-gray-400">
+            {{ stat.label }}
+          </p>
+          <UIcon
+            :name="stat.icon"
+            :style="`color: ${stat.color}`"
+            class="size-5 text-gray-400"
+          />
+        </div>
+        <p class="text-3xl font-bold">{{ stat.value }}</p>
+        <div v-if="stat.percentage" class="flex items-center gap-1 text-sm">
+          <UIcon
+            :name="stat.percentageIcon"
+            :class="['size-4', stat.percentageColor]"
+          />
+          <span :class="['font-medium', stat.percentageColor]">{{
+            stat.percentageChange
+          }}</span>
+          <span class="text-gray-500">{{ stat.percentageLabel }}</span>
+        </div>
+      </div>
+    </UCard>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { stats } = useItemsStore();
+
+// 统计
+const statistics = [
+  {
+    icon: "lucide:box",
+    label: "总物品数",
+    value: stats.totalItems,
+    color: "blue",
+  },
+  {
+    icon: "lucide:package-plus",
+    label: "本月新增",
+    value: stats.addedThisMonth,
+    color: "green",
+    percentage: true,
+    percentageChange:
+      stats.comparedToLastMonth.value >= 0
+        ? `+${stats.comparedToLastMonth.value}%`
+        : `${stats.comparedToLastMonth.value}%`,
+    percentageLabel: "from last month",
+    percentageIcon:
+      stats.comparedToLastMonth.value >= 0
+        ? "i-lucide-trending-up"
+        : "i-lucide-trending-down",
+    percentageColor:
+      stats.comparedToLastMonth.value >= 0 ? "text-green-500" : "text-red-500",
+  },
+  {
+    icon: "lucide:history",
+    label: "历史记录",
+    value: computed(() => 0),
+    color: "orange",
+  },
+  {
+    icon: "lucide:image",
+    label: "图片总数",
+    value: stats.totalImages,
+    color: "purple",
+  },
+];
+</script>
+
+<style></style>

app/components/itemManage/Table.vue

@@ -0,0 +1,215 @@
+<template>
+  <!-- 列表 -->
+  <div class="flex flex-col flex-1 w-full">
+    <div
+      class="flex justify-between items-center gap-2 overflow-x-auto px-4 py-3.5 border-b border-accented"
+    >
+      <div>
+        <UInput
+          v-model="globalFilter"
+          class="max-w-sm"
+          placeholder="Search..."
+          icon="lucide:search"
+        />
+      </div>
+
+      <div>
+        <ItemManageEditModal ref="itemEditModal" />
+      </div>
+    </div>
+
+    <!-- 给 UTable 一个 key（tableKey）用于在需要时强制重挂载 -->
+    <UTable
+      :key="tableKey"
+      sticky
+      v-model:global-filter="globalFilter"
+      :data="itemsList"
+      :columns="itemColumns"
+      class="max-h-[640px]"
+    >
+      <template #select-cell="{ row }">
+        <UCheckbox
+          :model-value="row.getIsSelected()"
+          @update:model-value="(value: boolean | 'indeterminate') => row.toggleSelected(!!value)"
+          aria-label="Select row"
+        />
+      </template>
+
+      <template #name-cell="{ row }">
+        <div class="flex items-center gap-3">
+          <UAvatar
+            :src="row.original.imageUrl"
+            size="lg"
+            :alt="row.original.name"
+          />
+          <div>
+            <p class="font-medium text-highlighted">
+              <strong>{{ row.original.brand }}</strong>
+              {{ row.original.name }}
+            </p>
+          </div>
+        </div>
+      </template>
+
+      <!-- tags 空值兜底，并加 key 避免重复 key 警告 -->
+      <template #tags-cell="{ row }">
+        <div class="flex gap-2">
+          <UBadge
+            v-for="(tag, idx) in row.original.tags ?? []"
+            :key="`${row.original.id}-tag-${idx}`"
+            variant="subtle"
+          >
+            {{ tag }}
+          </UBadge>
+        </div>
+      </template>
+
+      <template #actions-cell="{ row }">
+        <div class="text-right">
+          <UDropdownMenu
+            :items="getRowItems(row)"
+            :content="{ align: 'end' }"
+            aria-label="Actions dropdown"
+          >
+            <UButton
+              icon="i-lucide-ellipsis-vertical"
+              color="neutral"
+              variant="ghost"
+              class="ml-auto"
+              aria-label="Actions dropdown"
+            />
+          </UDropdownMenu>
+        </div>
+      </template>
+    </UTable>
+
+    <ItemManageDeleteModal
+      v-model:open="deleteModal.open"
+      :item="deleteModal.selectedItem"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, reactive, watch } from "vue";
+import type { TableColumn, DropdownMenuItem } from "@nuxt/ui";
+import type { Row } from "@tanstack/vue-table";
+
+const UCheckbox = resolveComponent("UCheckbox");
+const UBadge = resolveComponent("UBadge");
+const UAvatar = resolveComponent("UAvatar");
+const toast = useToast();
+
+const { items } = useItemsStore();
+
+const itemEditModal = ref<any>(null);
+
+const deleteModal = reactive<{ open: boolean; selectedItem: Item | null }>({
+  open: false,
+  selectedItem: null,
+});
+
+const globalFilter = ref<string>("");
+
+// --- computed 包装，保证传给 UTable 的始终是响应式且值随 items 变化
+const itemsList = computed(() => items.value ?? []);
+
+// --- 强制表格重挂载的 key（当 items 改变时递增）
+const tableKey = ref(0);
+// 深度监听 items（数组）变化：每次 items 内容或引用变化都让 tableKey++，从而触发 UTable 重新挂载
+watch(
+  items,
+  () => {
+    tableKey.value += 1;
+    // Console debug（运行时可在浏览器控制台查看）
+    console.debug(
+      "[items watch] tableKey ->",
+      tableKey.value,
+      "items.length ->",
+      (items.value ?? []).length
+    );
+  },
+  { deep: true }
+);
+
+const itemColumns: TableColumn<Item>[] = [
+  {
+    id: "select",
+    header: ({ table }) =>
+      h(UCheckbox, {
+        modelValue: table.getIsSomePageRowsSelected()
+          ? "indeterminate"
+          : table.getIsAllPageRowsSelected(),
+        "onUpdate:modelValue": (value: boolean | "indeterminate") =>
+          table.toggleAllPageRowsSelected(!!value),
+        ariaLabel: "Select all",
+      }),
+  },
+  {
+    accessorKey: "id",
+    header: "#",
+    cell: ({ row }) => `#${row.getValue("id")}`,
+  },
+  // 新增一个 brand 列 —— 让它参与全局搜索，但不实际渲染内容（brand 已在 name-cell 中显示）
+  {
+    accessorKey: "brand",
+    header: "", // 留空，避免影响布局
+    // 明确允许全局过滤（通常是默认 true，但写上更明确）
+    enableGlobalFilter: true,
+    // 不在表格中重复显示 brand（因为你在 name-cell 已经显示了）
+    cell: () => null,
+  },
+  {
+    accessorKey: "name",
+    header: "标品名称",
+  },
+  {
+    accessorKey: "tags",
+    header: "标签",
+    accessorFn: (row: Item) => (row.tags ?? []).join(" "), // <-- 关键：把数组转成字符串
+    enableGlobalFilter: true,
+    // 注意：你仍然使用 template #tags-cell 来渲染标签外观（badge），slot 会优先显示
+  },
+  {
+    id: "actions",
+    header: "", // 不需要标题
+  },
+];
+
+function getRowItems(row: Row<Item>): DropdownMenuItem[] {
+  return [
+    { type: "label", label: "操作" },
+    {
+      label: "编辑",
+      color: "primary",
+      icon: "lucide:pencil-line",
+      onSelect() {
+        itemEditModal.value?.openModal(row.original);
+        toast.add({
+          title: `编辑 ${row.original.name}`,
+          description: "已打开编辑模态框。",
+          color: "warning",
+          icon: "lucide:pencil-line",
+        });
+      },
+    },
+    { type: "separator" },
+    {
+      label: "删除",
+      color: "error",
+      icon: "lucide:trash-2",
+      onSelect() {
+        deleteModal.selectedItem = row.original;
+        deleteModal.open = true;
+        toast.add({
+          title: `Deleting ${row.original.name}...`,
+          color: "error",
+          icon: "lucide:trash-2",
+        });
+      },
+    },
+  ] as const;
+}
+</script>
+
+<style></style>

app/composables/items.ts

@@ -61,6 +61,45 @@ const _useItems = () => {
           item.createdAt?.getFullYear() === thisYear
       ).length;
     }),
+    // Compared to last month
+    comparedToLastMonth: computed(() => {
+      const now = new Date();
+      const thisMonth = now.getMonth();
+      const thisYear = now.getFullYear();
+
+      const lastMonthDate = new Date(now);
+      lastMonthDate.setMonth(thisMonth - 1);
+      const lastMonth = lastMonthDate.getMonth();
+      const lastMonthYear = lastMonthDate.getFullYear();
+
+      const thisMonthCount = (items.value ?? []).filter(
+        (item) =>
+          item.createdAt?.getMonth() === thisMonth &&
+          item.createdAt?.getFullYear() === thisYear
+      ).length;
+
+      const lastMonthCount = (items.value ?? []).filter(
+        (item) =>
+          item.createdAt?.getMonth() === lastMonth &&
+          item.createdAt?.getFullYear() === lastMonthYear
+      ).length;
+
+      // if (lastMonthCount === 0) {
+      //   return thisMonthCount === 0 ? 0 : 100;
+      // }
+
+      // return ((thisMonthCount - lastMonthCount) / lastMonthCount) * 100;
+      if (lastMonthCount === 0) {
+        // 上个月为 0，本月不为 0 → 直接视为无限增长（返回 100 * thisMonthCount）
+        return thisMonthCount === 0 ? 0 : thisMonthCount * 100;
+      }
+
+      // 允许超过 100% 的差值百分比
+      return ((thisMonthCount - lastMonthCount) / lastMonthCount) * 100;
+    }),
+    totalImages: computed(() => {
+      return (items.value ?? []).filter((item) => item.imageUrl).length;
+    }),
   };
 
   const utils = {

app/layouts/default.vue

@@ -1,29 +1,38 @@
 <template>
   <div>
-    <!-- 导航栏 -->
+    <UDashboardGroup>
-    <UHeader>
+      <UDashboardSidebar id="default" :open="sidebarOpen" collapsible resizable>
-      <template #title>物品数据库</template>
+        <template #header="{ collapsed }">
+          <div class="font-bold flex items-center">
+            <span class="ml-2" v-if="!collapsed">物品数据库</span>
+          </div>
+        </template>
 
-      <UNavigationMenu :items="items" />
+        <template #default="{ collapsed }">
-
+          <UDashboardSearchButton
-      <template #right>
+            :collapsed="collapsed"
-        <UColorModeButton />
+            icon="mdi:magnify"
-
+            class="bg-transparent ring-default"
-        <UTooltip text="Open on GitHub" :kbds="['meta', 'G']">
-          <UButton
-            color="neutral"
-            variant="ghost"
-            to="https://github.com/nuxt/ui"
-            target="_blank"
-            icon="i-simple-icons-github"
-            aria-label="GitHub"
           />
-        </UTooltip>
-      </template>
-    </UHeader>
 
-    <!-- 页面内容插槽 -->
+          <UNavigationMenu
-    <slot />
+            :collapsed="collapsed"
+            :items="items"
+            orientation="vertical"
+            tooltip
+            popover
+          />
+        </template>
+
+        <template #footer="{ collapsed }">
+          <UColorModeButton />
+        </template>
+      </UDashboardSidebar>
+
+      <UDashboardSearch :groups="groups" />
+
+      <slot />
+    </UDashboardGroup>
   </div>
 </template>
 
@@ -32,6 +41,9 @@ import type { NavigationMenuItem } from "@nuxt/ui";
 
 const route = useRoute();
 
+const sidebarOpen = ref(false);
+const groups = ref([]);
+
 const items = computed<NavigationMenuItem[]>(() => [
   {
     label: "物品管理",

app/layouts/normal.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <!-- 导航栏 -->
+    <UHeader>
+      <template #title>物品数据库</template>
+
+      <UNavigationMenu :items="items" />
+
+      <template #right>
+        <UColorModeButton />
+
+        <UTooltip text="Open on GitHub" :kbds="['meta', 'G']">
+          <UButton
+            color="neutral"
+            variant="ghost"
+            to="https://github.com/nuxt/ui"
+            target="_blank"
+            icon="i-simple-icons-github"
+            aria-label="GitHub"
+          />
+        </UTooltip>
+      </template>
+    </UHeader>
+
+    <!-- 页面内容插槽 -->
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { NavigationMenuItem } from "@nuxt/ui";
+
+const route = useRoute();
+
+const items = computed<NavigationMenuItem[]>(() => [
+  {
+    label: "物品管理",
+    to: "/",
+    icon: "marketeq:box",
+  },
+  {
+    label: "导出配置",
+    to: "/export",
+    active: route.path.startsWith("/export"),
+    icon: "marketeq:export-2",
+  },
+  {
+    label: "历史记录",
+    to: "/history",
+    active: route.path.startsWith("/history"),
+    icon: "marketeq:chart-line-alt-1",
+  },
+]);
+</script>

app/pages/export/index.vue

@@ -1,6 +1,14 @@
 <template>
-  <div>
+  <UDashboardPanel>
-    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <template #header>
+      <UDashboardNavbar :title="pageTitle" toggle>
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </template>
+      </UDashboardNavbar>
+    </template>
+
+    <template #body>
       <div class="space-y-4">
         <div class="flex gap-4">
           <!-- 物品列表 -->
@@ -174,11 +182,13 @@
       <div>
         <ExportEditModal ref="biddingItemEditModal" />
       </div>
-    </main>
+    </template>
-  </div>
+  </UDashboardPanel>
 </template>
 
 <script lang="ts" setup>
+const pageTitle = "导出配置";
+
 import type { TableColumn, TableRow } from "@nuxt/ui";
 import type { Table, Row } from "@tanstack/table-core";
 import { useSortable } from "@vueuse/integrations/useSortable";
@@ -189,7 +199,7 @@ const { items } = useItemsStore();
 const itemsList = computed(() => items.value ?? []);
 
 const { biddingItems, addBiddingItem, removeBiddingItem } = useBiddingItems();
-const biddingItemList = biddingItems
+const biddingItemList = biddingItems;
 
 const biddingItemEditModal = ref<any>(null);
 

app/pages/index.vue

@@ -1,279 +1,23 @@
 <template>
-  <div>
+  <UDashboardPanel>
-    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <template #header>
-      <!-- 统计 -->
+      <UDashboardNavbar :title="pageTitle" toggle>
-      <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+        <template #leading>
-        <div
+          <UDashboardSidebarCollapse />
-          v-for="stat in statistics"
+        </template>
-          :key="stat.label"
+      </UDashboardNavbar>
-          class="bg-white rounded-xl p-6 shadow-sm border border-gray-100"
+    </template>
-        >
-          <div class="flex items-center">
-            <div
-              :class="`p-3 rounded-lg flex bg-${stat.color}-100 items-center`"
-            >
-              <Icon
-                class="w-6 h-6"
-                :name="stat.icon"
-                :style="`color: ${stat.color}`"
-              />
-            </div>
-            <div class="ml-4">
-              <p class="text-sm font-medium text-gray-600">{{ stat.label }}</p>
-              <p class="text-2xl font-bold text-gray-900">{{ stat.value }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
 
-      <!-- 列表 -->
+    <template #body>
-      <div class="flex flex-col flex-1 w-full">
+      <ItemManageStatistics />
-        <div
-          class="flex justify-between items-center gap-2 overflow-x-auto px-4 py-3.5 border-b border-accented"
-        >
-          <div>
-            <UInput
-              v-model="globalFilter"
-              class="max-w-sm"
-              placeholder="Search..."
-              icon="lucide:search"
-            />
-          </div>
 
-          <div>
+      <ItemManageTable />
-            <ItemEditModal ref="itemEditModal" />
+    </template>
-          </div>
+  </UDashboardPanel>
-        </div>
-
-        <!-- 给 UTable 一个 key（tableKey）用于在需要时强制重挂载 -->
-        <UTable
-          :key="tableKey"
-          sticky
-          v-model:global-filter="globalFilter"
-          :data="itemsList"
-          :columns="itemColumns"
-          class="max-h-[640px]"
-        >
-          <template #select-cell="{ row }">
-            <UCheckbox
-              :model-value="row.getIsSelected()"
-              @update:model-value="(value: boolean | 'indeterminate') => row.toggleSelected(!!value)"
-              aria-label="Select row"
-            />
-          </template>
-
-          <template #name-cell="{ row }">
-            <div class="flex items-center gap-3">
-              <UAvatar
-                :src="row.original.imageUrl"
-                size="lg"
-                :alt="row.original.name"
-              />
-              <div>
-                <p class="font-medium text-highlighted">
-                  <strong>{{ row.original.brand }}</strong>
-                  {{ row.original.name }}
-                </p>
-              </div>
-            </div>
-          </template>
-
-          <!-- tags 空值兜底，并加 key 避免重复 key 警告 -->
-          <template #tags-cell="{ row }">
-            <div class="flex gap-2">
-              <UBadge
-                v-for="(tag, idx) in row.original.tags ?? []"
-                :key="`${row.original.id}-tag-${idx}`"
-                variant="subtle"
-              >
-                {{ tag }}
-              </UBadge>
-            </div>
-          </template>
-
-          <template #actions-cell="{ row }">
-            <div class="text-right">
-              <UDropdownMenu
-                :items="getRowItems(row)"
-                :content="{ align: 'end' }"
-                aria-label="Actions dropdown"
-              >
-                <UButton
-                  icon="i-lucide-ellipsis-vertical"
-                  color="neutral"
-                  variant="ghost"
-                  class="ml-auto"
-                  aria-label="Actions dropdown"
-                />
-              </UDropdownMenu>
-            </div>
-          </template>
-        </UTable>
-      </div>
-
-      <ItemDeleteModal
-        v-model:open="deleteModal.open"
-        :item="deleteModal.selectedItem"
-      />
-    </main>
-  </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, reactive, watch } from "vue";
+const pageTitle = "物品管理";
-import type { TableColumn, DropdownMenuItem } from "@nuxt/ui";
-import type { Row } from "@tanstack/vue-table";
-
-const UCheckbox = resolveComponent("UCheckbox");
-const UBadge = resolveComponent("UBadge");
-const UAvatar = resolveComponent("UAvatar");
-const toast = useToast();
-
-const { items, stats } = useItemsStore();
-
-const itemEditModal = ref<any>(null);
-
-const deleteModal = reactive<{ open: boolean; selectedItem: Item | null }>({
-  open: false,
-  selectedItem: null,
-});
-
-const globalFilter = ref<string>("");
-
-// --- computed 包装，保证传给 UTable 的始终是响应式且值随 items 变化
-const itemsList = computed(() => items.value ?? []);
-
-// --- 强制表格重挂载的 key（当 items 改变时递增）
-const tableKey = ref(0);
-// 深度监听 items（数组）变化：每次 items 内容或引用变化都让 tableKey++，从而触发 UTable 重新挂载
-watch(
-  items,
-  () => {
-    tableKey.value += 1;
-    // Console debug（运行时可在浏览器控制台查看）
-    console.debug(
-      "[items watch] tableKey ->",
-      tableKey.value,
-      "items.length ->",
-      (items.value ?? []).length
-    );
-  },
-  { deep: true }
-);
-
-// 统计
-const statistics = [
-  {
-    icon: "lucide:box",
-    label: "总物品数",
-    value: stats.totalItems,
-    color: "blue",
-  },
-  {
-    icon: "lucide:package-plus",
-    label: "本月新增",
-    value: stats.addedThisMonth,
-    color: "green",
-  },
-  {
-    icon: "lucide:history",
-    label: "历史记录",
-    value: computed(() => 0),
-    color: "orange",
-  },
-  {
-    icon: "lucide:image",
-    label: "图片总数",
-    value: computed(() => 0),
-    color: "purple",
-  },
-];
-
-const itemColumns: TableColumn<Item>[] = [
-  {
-    id: "select",
-    header: ({ table }) =>
-      h(UCheckbox, {
-        modelValue: table.getIsSomePageRowsSelected()
-          ? "indeterminate"
-          : table.getIsAllPageRowsSelected(),
-        "onUpdate:modelValue": (value: boolean | "indeterminate") =>
-          table.toggleAllPageRowsSelected(!!value),
-        ariaLabel: "Select all",
-      }),
-  },
-  {
-    accessorKey: "id",
-    header: "#",
-    cell: ({ row }) => `#${row.getValue("id")}`,
-  },
-  // 新增一个 brand 列 —— 让它参与全局搜索，但不实际渲染内容（brand 已在 name-cell 中显示）
-  {
-    accessorKey: "brand",
-    header: "", // 留空，避免影响布局
-    // 明确允许全局过滤（通常是默认 true，但写上更明确）
-    enableGlobalFilter: true,
-    // 不在表格中重复显示 brand（因为你在 name-cell 已经显示了）
-    cell: () => null,
-  },
-  {
-    accessorKey: "name",
-    header: "标品名称",
-  },
-  {
-    accessorKey: "tags",
-    header: "标签",
-    accessorFn: (row: Item) => (row.tags ?? []).join(" "), // <-- 关键：把数组转成字符串
-    enableGlobalFilter: true,
-    // 注意：你仍然使用 template #tags-cell 来渲染标签外观（badge），slot 会优先显示
-  },
-  {
-    id: "actions",
-    header: "", // 不需要标题
-  },
-];
-
-function getRowItems(row: Row<Item>): DropdownMenuItem[] {
-  return [
-    { type: "label", label: "操作" },
-    {
-      label: "编辑",
-      color: "primary",
-      icon: "lucide:pencil-line",
-      onSelect() {
-        itemEditModal.value?.openModal(row.original);
-        toast.add({
-          title: `编辑 ${row.original.name}`,
-          description: "已打开编辑模态框。",
-          color: "warning",
-          icon: "lucide:pencil-line",
-        });
-      },
-    },
-    { type: "separator" },
-    {
-      label: "删除",
-      color: "error",
-      icon: "lucide:trash-2",
-      onSelect() {
-        deleteModal.selectedItem = row.original;
-        deleteModal.open = true;
-        toast.add({
-          title: `Deleting ${row.original.name}...`,
-          color: "error",
-          icon: "lucide:trash-2",
-        });
-      },
-    },
-  ] as const;
-}
-
-// Define Shortcut
-defineShortcuts({
-  meta_i: () => {
-    console.log("Shortcut works!");
-  },
-});
 </script>
 
 <style></style>