diff --git a/frontend/src/components/AddTagPopover.tsx b/frontend/src/components/AddTagPopover.tsx
index 2b240ce5..900df369 100644
--- a/frontend/src/components/AddTagPopover.tsx
+++ b/frontend/src/components/AddTagPopover.tsx
@@ -4,7 +4,7 @@ import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 interface Tag {
-  id: number;
+  id: string;
   name: string;
   color: string;
 }
diff --git a/frontend/src/components/DetailHeader.tsx b/frontend/src/components/DetailHeader.tsx
index c918944a..51915102 100644
--- a/frontend/src/components/DetailHeader.tsx
+++ b/frontend/src/components/DetailHeader.tsx
@@ -1,6 +1,6 @@
 import React, { useLayoutEffect, useEffect, useRef, useState, useCallback, useMemo } from "react";
 import { Database } from "lucide-react";
-import { Card, Button, Tag, Tooltip, Modal } from "antd";
+import { Card, Button, Tag, Tooltip, Modal, Popover } from "antd";
 import type { ItemType } from "antd/es/menu/interface";
 import AddTagPopover from "./AddTagPopover";
 import ActionDropdown from "./ActionDropdown";
@@ -32,9 +32,9 @@ interface OperationItem {
 
 interface TagConfig {
   showAdd: boolean;
-  tags: Array<{ id: number; name: string; color: string } | string>;
+  tags: Array<{ id: string; name: string; color: string } | string>;
   onFetchTags?: () => Promise<{
-    data: { id: number; name: string; color: string }[];
+    data: { id: string; name: string; color: string }[];
   }>;
   onAddTag?: (tag: string) => void;
   onCreateAndTag?: (tagName: string) => void;
@@ -48,7 +48,7 @@ interface DetailHeaderProps<T> {
 }
 
 // 标签单行渲染组件
-const TagsInline = ({ tags }: { tags: Array<{ id: number; name: string; color: string } | string> }) => {
+const TagsInline = ({ tags }: { tags: Array<{ id: string; name: string; color: string } | string> }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const tagsAreaRef = useRef<HTMLDivElement>(null);
   const [visibleTags, setVisibleTags] = useState<typeof tags>([]);