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:
54
app/layouts/default.vue
Normal file
54
app/layouts/default.vue
Normal 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>
|
||||
Reference in New Issue
Block a user