feat(item): add brand field to items

This commit introduces an optional 'brand' field to the item model, allowing for better organization and
differentiation.

- The Add/Edit modal now includes a form field to select or create a brand.
- The item list on the main page now displays the brand next to the item name.
- Name uniqueness validation is now brand-aware. An item name must be unique within the context of its brand.
- The `addItem` logic is centralized in the `useItemsStore` to handle ID and timestamp generation.

app/composables/items.ts

@@ -2,12 +2,13 @@ import { useLocalStorage, createSharedComposable } from "@vueuse/core";
 
 export type Item = {
   id: number;
+  brand?: string;
   name: string;
   imageUrl?: string | null;
   description?: string | null;
   tags?: string[] | null;
-  createdAt: Date;
-  updatedAt: Date;
+  createdAt?: Date;
+  updatedAt?: Date;
 };
 
 const _useItems = () => {
@@ -56,21 +57,64 @@ const _useItems = () => {
       const thisYear = now.getFullYear();
       return (items.value ?? []).filter(
         (item) =>
-          item.createdAt.getMonth() === thisMonth &&
-          item.createdAt.getFullYear() === thisYear
+          item.createdAt?.getMonth() === thisMonth &&
+          item.createdAt?.getFullYear() === thisYear
       ).length;
     }),
-    latestId: computed(() => {
-      const arr = items.value ?? [];
-      if (arr.length === 0) return 1;
-      return Math.max(...arr.map((i) => i.id)) + 1;
-    }),
   };
 
-  const isNameAvailable = (name: string) =>
-    !(items.value ?? []).some((item) => item.name === name);
+  const utils = {
+    // Get all brandings as array of strings
+    allBrands: ref<string[]>(
+      (() => {
+        const brands = new Set<string>();
+        (items.value ?? []).forEach((item) => {
+          if (item.brand) {
+            brands.add(item.brand);
+          }
+        });
+        return Array.from(brands).sort((a, b) => a.localeCompare(b));
+      })()
+    ),
+    // Get all tags as array of strings
+    getAllTags: () => {
+      const tags = new Set<string>();
+      (items.value ?? []).forEach((item) => {
+        if (item.tags) {
+          item.tags.forEach((tag) => tags.add(tag));
+        }
+      });
+      return Array.from(tags).sort((a, b) => a.localeCompare(b));
+    },
+  };
+
+  const latestId = computed(() => {
+    const arr = items.value ?? [];
+    if (arr.length === 0) return 1;
+    return Math.max(...arr.map((i) => i.id)) + 1;
+  });
+
+  const isNameAvailable = (id: number | null, name: string, brand?: string) => {
+    const list = items.value ?? [];
+
+    return !list.some((item) => {
+      // 跳过自己（编辑时）
+      if (id && item.id === id) return false;
+
+      // 有品牌时需同时匹配品牌
+      if (brand) {
+        return item.name === name && item.brand === brand;
+      }
+
+      // 没品牌时只比较名字
+      return item.name === name;
+    });
+  };
 
   const addItem = (item: Item) => {
+    item.id = latestId.value;
+    item.createdAt = new Date();
+    item.updatedAt = new Date();
     items.value = [...(items.value ?? []), item];
     console.debug("[addItem] new length:", (items.value ?? []).length);
   };
@@ -98,7 +142,15 @@ const _useItems = () => {
     );
   };
 
-  return { items, stats, isNameAvailable, addItem, editItem, removeItem };
+  return {
+    items,
+    stats,
+    utils,
+    isNameAvailable,
+    addItem,
+    editItem,
+    removeItem,
+  };
 };
 
 export const useItemsStore = createSharedComposable(_useItems);