标签加气泡

dashboard/src/components/corpus/ChapterAppendTag.tsx

@@ -1,10 +1,7 @@
 import { useState, useEffect } from "react";
-import { Button, List, Popover } from "antd";
+import { Button, Popover } from "antd";
 
 import { get } from "../../request";
-import { IChapterData, IChapterListResponse } from "../api/Corpus";
-import ChapterCard from "./ChapterCard";
-import type { ChapterData } from "./ChapterCard";
 import type { ChannelFilterProps } from "../channel/ChannelList";
 import { ITagData } from "./ChapterTag";
 import TagArea from "../tag/TagArea";

dashboard/src/components/corpus/ChapterCard.tsx

@@ -8,7 +8,7 @@ import TagArea from "../tag/TagArea";
 import type { IChannelApiData } from "../api/Channel";
 import ChannelListItem from "../channel/ChannelListItem";
 import { IStudio } from "../auth/StudioName";
-import { ITagData } from "./ChapterTagList";
+import { ITagData } from "./ChapterTag";
 
 const { Title, Paragraph, Text } = Typography;
 

dashboard/src/components/corpus/ChapterTagList.tsx

@@ -1,15 +1,11 @@
-import { message, Tag } from "antd";
+import { message } from "antd";
 import { useState, useEffect } from "react";
 
 import { get } from "../../request";
 import { IApiChapterTag, IApiResponseChapterTagList } from "../api/Corpus";
 
-export interface ITagData {
-  title: string;
-  key: string;
-  color?: string;
-  description?: string;
-}
+import ChapterTag, { ITagData } from "./ChapterTag";
+
 interface IWidget {
   max?: number;
   onTagClick?: Function;
@@ -30,7 +26,8 @@ const Widget = ({ max, onTagClick }: IWidget) => {
         let newTags: ITagData[] = tags.map((item) => {
           return {
             key: item.name,
-            title: `${item.name}(${item.count})`,
+            title: item.name,
+            count: item.count,
           };
         });
         setTableData(newTags);
@@ -47,17 +44,15 @@ const Widget = ({ max, onTagClick }: IWidget) => {
     <>
       {tableData.map((item, id) => {
         return (
-          <Tag
+          <ChapterTag
+            data={item}
             key={id}
-            style={{ cursor: "pointer" }}
-            onClick={() => {
+            onTagClick={(key: string) => {
               if (typeof onTagClick !== "undefined") {
-                onTagClick(item.key);
+                onTagClick(key);
               }
             }}
-          >
-            {item.title}
-          </Tag>
+          />
         );
       })}
     </>

dashboard/src/components/tag/TagArea.tsx

@@ -1,5 +1,4 @@
-import { Tag } from "antd";
-import { ITagData } from "../corpus/ChapterTagList";
+import ChapterTag, { ITagData } from "../corpus/ChapterTag";
 
 interface IWidget {
   data: ITagData[];
@@ -9,18 +8,16 @@ const Widget = ({ data, onTagClick }: IWidget) => {
   // TODO
   const tags = data.map((item, id) => {
     return (
-      <Tag
+      <ChapterTag
         color="green"
         key={id}
-        style={{ cursor: "pointer" }}
-        onClick={() => {
+        data={item}
+        onTagClick={(key: string) => {
           if (typeof onTagClick !== "undefined") {
-            onTagClick(item.key);
+            onTagClick(key);
           }
         }}
-      >
-        {item.title}
-      </Tag>
+      />
     );
   });
   return <>{tags}</>;