events filter

app/components/ui/TagSelector.tsx

@@ -46,18 +46,47 @@ export function TagSelector({
   const [isOpen, setIsOpen] = useState(false);
   const selectorRef = useRef<HTMLDivElement>(null);
 
-  // Initialize selected tags based on value prop
-  useEffect(() => {
-    if (value) {
-      if (Array.isArray(value)) {
-        setSelectedIds(value);
-      } else {
-        setSelectedIds(value ? [value] : []);
-      }
-    } else {
-      setSelectedIds([]);
+  // 标签名称与ID的映射函数
+  const getTagIdByName = (name: string): string | undefined => {
+    const tag = tags.find(t => t.name === name);
+    return tag?.id;
+  };
+
+  const getTagNameById = (id: string): string | undefined => {
+    const tag = tags.find(t => t.id === id);
+    return tag?.name;
+  };
+
+  // 从标签名称转换为标签ID
+  const nameToId = (nameOrNames: string | string[] | undefined): string[] => {
+    if (!nameOrNames) return [];
+    if (Array.isArray(nameOrNames)) {
+      return nameOrNames
+        .map(name => getTagIdByName(name))
+        .filter((id): id is string => !!id);
     }
-  }, [value]);
+    const id = getTagIdByName(nameOrNames);
+    return id ? [id] : [];
+  };
+
+  // 从标签ID转换为标签名称
+  const idToName = (idOrIds: string | string[] | undefined): string[] => {
+    if (!idOrIds) return [];
+    if (Array.isArray(idOrIds)) {
+      return idOrIds
+        .map(id => getTagNameById(id))
+        .filter((name): name is string => !!name);
+    }
+    const name = getTagNameById(idOrIds);
+    return name ? [name] : [];
+  };
+
+  // 初始化已选择的标签 - 从传入的名称转换为ID
+  useEffect(() => {
+    if (tags.length > 0 && value) {
+      setSelectedIds(nameToId(value));
+    }
+  }, [value, tags]);
 
   // Add click outside listener to close dropdown
   useEffect(() => {
@@ -167,8 +196,10 @@ export function TagSelector({
     
     setSelectedIds(newSelected);
     
+    // 传递标签名称而不是ID
     if (onChange) {
-      onChange(multiple ? newSelected : newSelected[0] || '');
+      const tagNames = idToName(newSelected);
+      onChange(multiple ? tagNames : tagNames[0] || '');
     }
   };
 
@@ -176,8 +207,11 @@ export function TagSelector({
     e.stopPropagation();
     const newSelected = selectedIds.filter(id => id !== tagId);
     setSelectedIds(newSelected);
+    
+    // 传递标签名称而不是ID
     if (onChange) {
-      onChange(multiple ? newSelected : newSelected[0] || '');
+      const tagNames = idToName(newSelected);
+      onChange(multiple ? tagNames : tagNames[0] || '');
     }
   };
 
@@ -214,6 +248,7 @@ export function TagSelector({
     );
   }
 
+  // 根据已选择的ID筛选出已选择的标签
   const selectedTags = tags.filter(tag => selectedIds.includes(tag.id));
 
   return (