675704e4da
This commit introduces the ability to delete items. A new `ItemDeleteModal` component provides a confirmation step before removal. - Adds a 'Delete' option to the action menu in the items table. - Refactors the `useItems` composable to ensure reactivity with `useLocalStorage` by creating new array references on add/remove operations. - Renames `AddModal` to `EditModal` to better align with its future role in both adding and editing items.
55 lines
1.1 KiB
Vue
55 lines
1.1 KiB
Vue
<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: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>
|