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/pages/index.vue

@@ -46,7 +46,7 @@
           </div>
 
           <div>
-            <ItemEditModal />
+            <ItemEditModal ref="itemEditModal" />
           </div>
         </div>
 
@@ -55,6 +55,14 @@
           :data="items"
           :columns="itemColumns"
         >
+          <template #select-cell="{ row }">
+            <UCheckbox
+              :model-value="row.getIsSelected()"
+              @update:model-value="(value: boolean | 'indeterminate') => row.toggleSelected(!!value)"
+              aria-label="Select row"
+            />
+          </template>
+
           <template #name-cell="{ row }">
             <div class="flex items-center gap-3">
               <UAvatar
@@ -110,12 +118,15 @@
 import type { TableColumn, DropdownMenuItem } from "@nuxt/ui";
 import type { Row } from "@tanstack/vue-table";
 
+const UCheckbox = resolveComponent("UCheckbox");
 const UBadge = resolveComponent("UBadge");
 const UAvatar = resolveComponent("UAvatar");
 const toast = useToast();
 
 const { items, stats } = useItemsStore();
 
+const itemEditModal = ref<any>(null);
+
 const deleteModal = reactive<{
   open: boolean;
   selectedItem: Item | null;
@@ -155,6 +166,18 @@ const statistics = [
 ];
 
 const itemColumns: TableColumn<Item>[] = [
+  {
+    id: "select",
+    header: ({ table }) =>
+      h(UCheckbox, {
+        modelValue: table.getIsSomePageRowsSelected()
+          ? "indeterminate"
+          : table.getIsAllPageRowsSelected(),
+        "onUpdate:modelValue": (value: boolean | "indeterminate") =>
+          table.toggleAllPageRowsSelected(!!value),
+        ariaLabel: "Select all",
+      }),
+  },
   {
     accessorKey: "id",
     header: "#",
@@ -182,8 +205,10 @@ function getRowItems(row: Row<Item>): DropdownMenuItem[] {
       color: "primary",
       icon: "lucide:pencil-line",
       onSelect() {
+        itemEditModal.value?.openModal(row.original);
         toast.add({
-          title: `Editing ${row.original.name}...`,
+          title: `编辑 ${row.original.name}`,
+          description: "已打开编辑模态框。",
           color: "warning",
           icon: "lucide:pencil-line",
         });