diff --git a/app/assets/css/main.css b/app/assets/css/main.css index 6379526..f7e0e8c 100644 --- a/app/assets/css/main.css +++ b/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; } diff --git a/app/components/item/DeleteModal.vue b/app/components/itemManage/DeleteModal.vue similarity index 100% rename from app/components/item/DeleteModal.vue rename to app/components/itemManage/DeleteModal.vue diff --git a/app/components/item/EditModal.vue b/app/components/itemManage/EditModal.vue similarity index 100% rename from app/components/item/EditModal.vue rename to app/components/itemManage/EditModal.vue diff --git a/app/components/itemManage/Statistics.vue b/app/components/itemManage/Statistics.vue new file mode 100644 index 0000000..9751017 --- /dev/null +++ b/app/components/itemManage/Statistics.vue @@ -0,0 +1,76 @@ + + + + + + + + {{ stat.label }} + + + + {{ stat.value }} + + + {{ + stat.percentageChange + }} + {{ stat.percentageLabel }} + + + + + + + + + diff --git a/app/components/itemManage/Table.vue b/app/components/itemManage/Table.vue new file mode 100644 index 0000000..4647cf4 --- /dev/null +++ b/app/components/itemManage/Table.vue @@ -0,0 +1,215 @@ + + + + + + + + + + + + + + + + + row.toggleSelected(!!value)" + aria-label="Select row" + /> + + + + + + + + {{ row.original.brand }} + {{ row.original.name }} + + + + + + + + + + {{ tag }} + + + + + + + + + + + + + + + + + + + + diff --git a/app/composables/items.ts b/app/composables/items.ts index f5326ad..fb35cbb 100644 --- a/app/composables/items.ts +++ b/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 = { diff --git a/app/layouts/default.vue b/app/layouts/default.vue index 3ab660b..d585d11 100644 --- a/app/layouts/default.vue +++ b/app/layouts/default.vue @@ -1,29 +1,38 @@ - - - 物品数据库 + + + + + 物品数据库 + + - - - - - - - + - - - - - + + + + + + + + + + + + @@ -32,6 +41,9 @@ import type { NavigationMenuItem } from "@nuxt/ui"; const route = useRoute(); +const sidebarOpen = ref(false); +const groups = ref([]); + const items = computed(() => [ { label: "物品管理", diff --git a/app/layouts/normal.vue b/app/layouts/normal.vue new file mode 100644 index 0000000..3ab660b --- /dev/null +++ b/app/layouts/normal.vue @@ -0,0 +1,54 @@ + + + + + 物品数据库 + + + + + + + + + + + + + + + + + + diff --git a/app/pages/export/index.vue b/app/pages/export/index.vue index ad3e5c9..00962dd 100644 --- a/app/pages/export/index.vue +++ b/app/pages/export/index.vue @@ -1,6 +1,14 @@ - - + + + + + + + + + + @@ -174,11 +182,13 @@ - - + +
+ {{ stat.label }} +
{{ stat.value }}
+ {{ row.original.brand }} + {{ row.original.name }} +