feat(item): implement item editing functionality

This commit introduces the capability to edit existing items. The `ItemEditModal` has been refactored to support both creation and editing modes.

- The modal UI (title, buttons) and submission logic now adapt based on whether an item is being added or edited.
- A new `editItem` function is added to the `useItemsStore` to handle the update logic.
- Form validation for the item name is enhanced to correctly check for uniqueness during edits.
- The table's row action menu now opens the modal in edit mode, pre-populating the form.
- The `latestId` generation logic is improved for robustness.
- Additionally, this commit adds row selection checkboxes to the items table.

app/components/item/EditModal.vue

@@ -1,11 +1,19 @@
 <template>
-  <UModal v-model:open="open" title="新增物品" description="新增一件新的物品">
-    <UButton label="新增" icon="lucide:plus" />
+  <UModal
+    v-model:open="open"
+    :title="isEditMode ? '编辑物品' : '新增物品'"
+    :description="isEditMode ? '修改现有物品信息' : '新增一件新的物品'"
+  >
+    <UButton
+      label="新增"
+      icon="lucide:plus"
+      @click="openModal()"
+    />
 
     <template #body>
       <UForm
         ref="itemForm"
-        :schema="itemSchema"
+        :schema="formSchema"
         :state="itemState"
         @submit="onSubmit"
         class="space-y-4"
@@ -59,7 +67,7 @@
           @click="open = false"
         />
         <UButton
-          label="创建"
+          :label="isEditMode ? '保存修改' : '创建'"
           color="primary"
           variant="solid"
           @click="itemForm.submit()"
@@ -75,20 +83,34 @@ import * as z from "zod";
 
 const itemForm = ref();
 const open = ref<boolean>(false);
-const toast = useToast();
-const { stats, isNameAvailable, addItem } = useItemsStore();
+const isEditMode = ref<boolean>(false);
+const currentId = ref<number | null>(null);
 
-const itemSchema = z.object({
-  name: z
-    .string()
-    .min(1, "名称不能为空")
-    .refine(isNameAvailable, "该名称已被占用，请更换一个"),
+const toast = useToast();
+const { stats, isNameAvailable, addItem, editItem, items } = useItemsStore();
+
+// 🧩 基础校验（动态 schema）
+const baseSchema = z.object({
+  name: z.string().min(1, "名称不能为空"),
   imageUrl: z.string().nullable().optional(),
   description: z.string().nullable().optional(),
   tags: z.string().nullable().optional(),
 });
 
-type ItemSchema = z.output<typeof itemSchema>;
+// ⚙️ 根据模式动态生成 Schema（编辑模式允许当前名称）
+const formSchema = computed(() =>
+  baseSchema.refine(
+    (data) =>
+      isEditMode.value
+        ? !items.value.some(
+            (i) => i.name === data.name && i.id !== currentId.value
+          )
+        : isNameAvailable(data.name),
+    "该名称已被占用，请更换一个"
+  )
+);
+
+type ItemSchema = z.output<typeof baseSchema>;
 
 const itemState = reactive<ItemSchema>({
   name: "",
@@ -97,27 +119,74 @@ const itemState = reactive<ItemSchema>({
   tags: null,
 });
 
+/** 🔧 打开 Modal（新增 / 编辑） */
+const openModal = (item?: Item) => {
+  if (item) {
+    // 编辑模式
+    isEditMode.value = true;
+    currentId.value = item.id;
+    itemState.name = item.name;
+    itemState.imageUrl = item.imageUrl ?? null;
+    itemState.description = item.description ?? null;
+    itemState.tags = item.tags?.join(", ") ?? null;
+  } else {
+    // 新增模式
+    isEditMode.value = false;
+    currentId.value = null;
+    itemState.name = "";
+    itemState.imageUrl = null;
+    itemState.description = null;
+    itemState.tags = null;
+  }
+  open.value = true;
+};
+
 const onSubmit = async (event: FormSubmitEvent<ItemSchema>) => {
-  const item: Item = {
-    id: stats.latestId.value,
-    name: event.data.name,
-    imageUrl: event.data.imageUrl,
-    description: event.data.description,
-    tags: event.data.tags?.split(",").map((tag) => tag.trim()),
-    createdAt: new Date(),
-    updatedAt: new Date(),
-  };
+  if (isEditMode.value && currentId.value !== null) {
+    // ✅ 编辑模式
+    const updatedItem: Item = {
+      id: currentId.value,
+      name: event.data.name,
+      imageUrl: event.data.imageUrl,
+      description: event.data.description,
+      tags: event.data.tags?.split(",").map((tag) => tag.trim()),
+      createdAt:
+        items.value.find((i) => i.id === currentId.value)?.createdAt ??
+        new Date(),
+      updatedAt: new Date(),
+    };
 
-  // TODO: Check is add or edit
-  addItem(item);
+    editItem(updatedItem);
+    toast.add({
+      title: "已保存修改",
+      description: `${event.data.name} 的信息已更新`,
+      color: "success",
+    });
+  } else {
+    // ✅ 新增模式
+    const newItem: Item = {
+      id: stats.latestId.value,
+      name: event.data.name,
+      imageUrl: event.data.imageUrl,
+      description: event.data.description,
+      tags: event.data.tags?.split(",").map((tag) => tag.trim()),
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+
+    addItem(newItem);
+    toast.add({
+      title: "成功",
+      description: `${event.data.name} 已添加到数据库中`,
+      color: "success",
+    });
+  }
 
-  toast.add({
-    title: "成功",
-    description: `${event.data.name} 已被添加到数据库中`,
-    color: "success",
-  });
   open.value = false;
 };
+
+// expose method so parent can call modal.openModal(item)
+defineExpose({ openModal });
 </script>
 
 <style></style>