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
2025-10-21 14:16:27 +08:00
parent 802c4460a7
commit 3909f614d2
10 changed files with 451 additions and 296 deletions

View File

@@ -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 = {