显示更多

dashboard/src/components/tag/TagsArea.tsx

@@ -1,14 +1,16 @@
-import { Tag } from "antd";
+import { Badge, Popover, Tag } from "antd";
 import { ITagMapData } from "../api/Tag";
 import { useEffect, useState } from "react";
 import { useAppSelector } from "../../hooks";
 import { tagList } from "../../reducers/discussion-count";
 import { numToHex } from "./TagList";
+import TagSelectButton from "./TagSelectButton";
 
 interface IWidget {
   data?: ITagMapData[];
   max?: number;
   resId?: string;
+  resType?: string;
   onTagClose?: Function;
   onTagClick?: Function;
 }
@@ -16,6 +18,7 @@ const TagsAreaWidget = ({
   data = [],
   max = 5,
   resId,
+  resType,
   onTagClose,
   onTagClick,
 }: IWidget) => {
@@ -39,7 +42,37 @@ const TagsAreaWidget = ({
       </Tag>
     ) : undefined;
   });
-  return <div style={{ width: "100%", lineHeight: "2em" }}>{currTags}</div>;
+
+  const extraTags = tags?.map((item, id) => {
+    return id >= max ? (
+      <Tag key={id} color={"#" + numToHex(item.color ?? 13684944)}>
+        {item.name}
+      </Tag>
+    ) : undefined;
+  });
+  let extra = 0;
+  if (tags && typeof max !== "undefined") {
+    extra = tags.length - max;
+  }
+  if (extra < 0) {
+    extra = 0;
+  }
+
+  return (
+    <div style={{ width: "100%", lineHeight: "2em" }}>
+      <TagSelectButton
+        resId={resId}
+        resType={resType}
+        trigger={<span style={{ cursor: "pointer" }}>{currTags}</span>}
+      />
+      <Popover content={<div>{extraTags}</div>}>
+        <Badge
+          count={extra}
+          style={{ backgroundColor: "#52c41a", cursor: "pointer" }}
+        />
+      </Popover>
+    </div>
+  );
 };
 
 export default TagsAreaWidget;