feat(items): implement initial item management system

This commit introduces the foundational structure and core features for the item management application.

Key features implemented:
- **Item Listing:** A main page displaying all items in a searchable UTable.
- **Item Creation:** An "Add Item" modal with a UForm for input and validation using Zod.
- **State Management:** A `useItemsStore` composable built with `@vueuse/core`'s `useLocalStorage` to persist item data
in the browser.
- **UI Framework:** Integrated Nuxt UI for components like tables, modals, forms, and the overall layout.
- **Application Shell:** Established a default layout with a header, navigation menu, and placeholders for Export and
History pages.
- **Project Setup:** Configured pnpm workspace, Tailwind CSS, and VSCode editor settings for an improved development
experience.
This commit is contained in:
xiaomai
2025-10-14 09:36:59 +08:00
parent c0ba7ac0ff
commit e05c41eb07
13 changed files with 493 additions and 4 deletions

54
app/layouts/default.vue Normal file
View 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:home-alt-3",
},
{
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>