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.
67 lines
1.5 KiB
Vue
67 lines
1.5 KiB
Vue
<template>
|
|
<div>
|
|
<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>
|
|
|
|
<template #default="{ collapsed }">
|
|
<UDashboardSearchButton
|
|
:collapsed="collapsed"
|
|
icon="mdi:magnify"
|
|
class="bg-transparent ring-default"
|
|
/>
|
|
|
|
<UNavigationMenu
|
|
:collapsed="collapsed"
|
|
:items="items"
|
|
orientation="vertical"
|
|
tooltip
|
|
popover
|
|
/>
|
|
</template>
|
|
|
|
<template #footer="{ collapsed }">
|
|
<UColorModeButton />
|
|
</template>
|
|
</UDashboardSidebar>
|
|
|
|
<UDashboardSearch :groups="groups" />
|
|
|
|
<slot />
|
|
</UDashboardGroup>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { NavigationMenuItem } from "@nuxt/ui";
|
|
|
|
const route = useRoute();
|
|
|
|
const sidebarOpen = ref(false);
|
|
const groups = ref([]);
|
|
|
|
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>
|