feat(item): add delete functionality

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.

app/pages/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <UPageHero
+    <!-- <UPageHero
       title="智能物品管理系统"
       description="专业的物品数据库管理工具，支持图片记录、CSV导出和历史价格追踪"
       headline="New release"
-    />
+    /> -->
     <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <!-- 统计 -->
       <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
@@ -46,7 +46,7 @@
           </div>
 
           <div>
-            <ItemAddModal />
+            <ItemEditModal />
           </div>
         </div>
 
@@ -97,6 +97,11 @@
           </template>
         </UTable>
       </div>
+
+      <ItemDeleteModal
+        v-model:open="deleteModal.open"
+        :item="deleteModal.selectedItem"
+      />
     </main>
   </div>
 </template>
@@ -104,15 +109,23 @@
 <script lang="ts" setup>
 import type { TableColumn, DropdownMenuItem } from "@nuxt/ui";
 import type { Row } from "@tanstack/vue-table";
-import { useClipboard } from "@vueuse/core";
 
 const UBadge = resolveComponent("UBadge");
 const UAvatar = resolveComponent("UAvatar");
 const toast = useToast();
-const { copy } = useClipboard();
 
 const { items, stats } = useItemsStore();
 
+const deleteModal = reactive<{
+  open: boolean;
+  selectedItem: Item | null;
+}>({
+  open: false,
+  selectedItem: null,
+});
+
+const globalFilter = ref<string>("");
+
 // 统计
 const statistics = [
   {
@@ -141,8 +154,6 @@ const statistics = [
   },
 ];
 
-const globalFilter = ref<string>("");
-
 const itemColumns: TableColumn<Item>[] = [
   {
     accessorKey: "id",
@@ -171,16 +182,28 @@ function getRowItems(row: Row<Item>): DropdownMenuItem[] {
       color: "primary",
       icon: "lucide:pencil-line",
       onSelect() {
-        copy(row.original.id.toString());
         toast.add({
-          title: "Payment ID copied to clipboard!",
-          color: "success",
-          icon: "i-lucide-circle-check",
+          title: `Editing ${row.original.name}...`,
+          color: "warning",
+          icon: "lucide:pencil-line",
         });
       },
     },
     { type: "separator" },
-    { label: "删除", color: "error", icon: "lucide:trash-2" },
+    {
+      label: "删除",
+      color: "error",
+      icon: "lucide:trash-2",
+      onSelect() {
+        deleteModal.selectedItem = row.original;
+        deleteModal.open = true; // 👈 打开 Modal！
+        toast.add({
+          title: `Deleting ${row.original.name}...`,
+          color: "error",
+          icon: "lucide:trash-2",
+        });
+      },
+    },
   ] as const;
 }