3909f614d2
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.
77 lines
2.0 KiB
Vue
77 lines
2.0 KiB
Vue
<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>
|