feat:添加tag组件

src/_test.tsx

@@ -5,6 +5,7 @@ import Upload from "./components/upload/upload";
 import Tab from "./components/tab/tab";
 import * as GOJI from "goji_ui";
 import Input from "./components/input";
+import Tag from "./components/tag";
 
 function App() {
   const [visible, setVisible] = useState(false);
@@ -18,6 +19,89 @@ function App() {
 
   return (
     <div>
+      <div style={{ margin: "10px", display: "flex" }}>
+        <Tag
+          background="success"
+          icon={
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="icon icon-tabler icon-tabler-chevron-down"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M6 9l6 6l6 -6"></path>
+            </svg>
+          }
+        >
+          Success
+        </Tag>
+        <Tag
+          background="error"
+          icon={
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="icon icon-tabler icon-tabler-square-x"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path>
+              <path d="M10 10l4 4m0 -4l-4 4"></path>
+            </svg>
+          }
+        >
+          Error
+        </Tag>
+        <Tag background="processing">Processing</Tag>
+        <Tag background="waring">Waring</Tag>
+        <Tag
+          closable={true}
+          closeIcon={
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="icon icon-tabler icon-tabler-x"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M18 6l-12 12"></path>
+              <path d="M6 6l12 12"></path>
+            </svg>
+          }
+          onClose={(e) => {
+            console.log("eeee", e);
+          }}
+        >
+          Delete
+        </Tag>
+        <Tag
+          background="red"
+          color="#fff"
+          onClick={(e) => console.log("e====>", e)}
+        >
+          tag
+        </Tag>
+      </div>
+
       <Input
         defaultValue={"undefinedssss"}
         maxLength={10}

src/components/tag/index.css

@@ -0,0 +1,50 @@
+.tag {
+  display: inline-block;
+  border-radius: 5px;
+  font-size: 12px;
+  border: 1px solid #eee;
+  margin-inline-end: 5px;
+}
+.tag .tagIconAndTagText {
+  padding: 2px 4px;
+  display: flex;
+}
+.tag .tagIconAndTagText .tagIcon {
+  display: inline-flex;
+  align-items: center;
+}
+.tag .tagIconAndTagText .tagText {
+  margin-inline-start: 3px;
+}
+.tag .tagIconAndTagText .deleteIcon {
+  display: inline-flex;
+  align-items: center;
+  color: #505050;
+}
+.tag .tagIconAndTagText .deleteIcon:hover {
+  cursor: pointer;
+  color: #000000;
+}
+.bordered {
+  border: none;
+}
+.success {
+  color: #52c41a;
+  background: #f6ffed;
+  border-color: #b7eb8f;
+}
+.processing {
+  color: #1677ff;
+  background: #e6f4ff;
+  border-color: #91caff;
+}
+.error {
+  color: #ff4d4f;
+  background: #fff2f0;
+  border-color: #ffccc7;
+}
+.waring {
+  color: #faad14;
+  background: #fffbe6;
+  border-color: #ffe58f;
+}

src/components/tag/index.less

@@ -0,0 +1,60 @@
+.tag {
+  display: inline-block;
+  border-radius: 5px;
+  font-size: 12px;
+  border: 1px solid #eee;
+  margin-inline-end: 5px;
+
+  .tagIconAndTagText {
+    padding: 2px 4px;
+    display: flex;
+
+    .tagIcon {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .tagText {
+      margin-inline-start: 3px;
+    }
+
+    .deleteIcon {
+      display: inline-flex;
+      align-items: center;
+      color: #505050;
+    }
+
+    .deleteIcon:hover {
+      cursor: pointer;
+      color: #000000;
+    }
+  }
+}
+
+.bordered {
+  border: none;
+}
+
+.success {
+  color: #52c41a;
+  background: #f6ffed;
+  border-color: #b7eb8f;
+}
+
+.processing {
+  color: #1677ff;
+  background: #e6f4ff;
+  border-color: #91caff;
+}
+
+.error {
+  color: #ff4d4f;
+  background: #fff2f0;
+  border-color: #ffccc7;
+}
+
+.waring {
+  color: #faad14;
+  background: #fffbe6;
+  border-color: #ffe58f;
+}

src/components/tag/index.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import "./index.less";
+import classnames from "classnames";
+
+type tagsBackgroundColor =
+  | "success"
+  | "default"
+  | "waring"
+  | "error"
+  | "processing"
+  | string
+  | undefined;
+
+interface ITagProps extends React.DOMAttributes<HTMLSpanElement> {
+  className?: string | undefined;
+  style?: React.CSSProperties | undefined;
+  children: React.ReactNode;
+  color?: string | undefined;
+  background?: tagsBackgroundColor;
+  bordered?: boolean | undefined;
+  icon?: React.ReactNode | undefined;
+  closeIcon?: React.ReactNode | undefined;
+  closable?: boolean | undefined;
+  onClose?: (e: React.MouseEvent<HTMLElement>) => void;
+}
+
+const Tag = (props: ITagProps) => {
+  const {
+    className,
+    style,
+    children,
+    color,
+    background,
+    icon,
+    closeIcon,
+    bordered = true,
+    closable,
+    onClose
+  } = props;
+
+  const TagColor = (background: tagsBackgroundColor) => {
+    switch (background) {
+      case "success":
+        return "success";
+      case "waring":
+        return "waring";
+      case "error":
+        return "error";
+      case "processing":
+        return "processing";
+      default:
+        break;
+    }
+  };
+
+  return (
+    <span
+      className={classnames(
+        `tag ${className} ${!bordered && "bordered"} ${TagColor(background)}`
+      )}
+      style={{ background: `${background}`, color: `${color}`, ...style }}
+      {...props}
+    >
+      <div className="tagIconAndTagText">
+        {!closable && <span className="tagIcon">{icon}</span>}
+        <span className="tagText">{children}</span>
+        <span className="deleteIcon" onClick={onClose}>
+          {closable && closeIcon}
+        </span>
+      </div>
+    </span>
+  );
+};
+
+export default Tag;