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.
This commit is contained in:
xiaomai
@@ -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;
|
||||
}
|
||||
|
||||
76
app/components/itemManage/Statistics.vue
Normal file
76
app/components/itemManage/Statistics.vue
Normal file
@@ -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>
|
||||
215
app/components/itemManage/Table.vue
Normal file
215
app/components/itemManage/Table.vue
Normal file
@@ -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>
|
||||
@@ -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 = {
|
||||
|
||||
@@ -1,29 +1,38 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 导航栏 -->
|
||||
<UHeader>
|
||||
<template #title>物品数据库</template>
|
||||
<UDashboardGroup>
|
||||
<UDashboardSidebar id="default" :open="sidebarOpen" collapsible resizable>
|
||||
<template #header="{ collapsed }">
|
||||
<div class="font-bold flex items-center">
|
||||
<span class="ml-2" v-if="!collapsed">物品数据库</span>
|
||||
</div>
|
||||
</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"
|
||||
<template #default="{ collapsed }">
|
||||
<UDashboardSearchButton
|
||||
:collapsed="collapsed"
|
||||
icon="mdi:magnify"
|
||||
class="bg-transparent ring-default"
|
||||
/>
|
||||
</UTooltip>
|
||||
</template>
|
||||
</UHeader>
|
||||
|
||||
<!-- 页面内容插槽 -->
|
||||
<slot />
|
||||
<UNavigationMenu
|
||||
: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: "物品管理",
|
||||
|
||||
54
app/layouts/normal.vue
Normal file
54
app/layouts/normal.vue
Normal file
@@ -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>
|
||||
@@ -1,6 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<UDashboardPanel>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
</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);
|
||||
|
||||
|
||||
@@ -1,279 +1,23 @@
|
||||
<template>
|
||||
<div>
|
||||
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<!-- 统计 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||
<div
|
||||
v-for="stat in statistics"
|
||||
:key="stat.label"
|
||||
class="bg-white rounded-xl p-6 shadow-sm border border-gray-100"
|
||||
>
|
||||
<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>
|
||||
<UDashboardPanel>
|
||||
<template #header>
|
||||
<UDashboardNavbar :title="pageTitle" toggle>
|
||||
<template #leading>
|
||||
<UDashboardSidebarCollapse />
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
</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>
|
||||
<template #body>
|
||||
<ItemManageStatistics />
|
||||
|
||||
<div>
|
||||
<ItemEditModal 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>
|
||||
</div>
|
||||
|
||||
<ItemDeleteModal
|
||||
v-model:open="deleteModal.open"
|
||||
:item="deleteModal.selectedItem"
|
||||
/>
|
||||
</main>
|
||||
</div>
|
||||
<ItemManageTable />
|
||||
</template>
|
||||
</UDashboardPanel>
|
||||
</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, 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!");
|
||||
},
|
||||
});
|
||||
const pageTitle = "物品管理";
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
||||
Reference in New Issue
Block a user