Explorar el Código

添加自定义图标。dict term

visuddhinanda hace 3 años
padre
commit
77220ac37e

+ 38 - 0
dashboard/src/assets/icon/index.tsx

@@ -0,0 +1,38 @@
+import Icon from "@ant-design/icons";
+import type { CustomIconComponentProps } from "@ant-design/icons/lib/components/Icon";
+
+const DictSvg = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 32 32"
+  >
+    <g transform="translate(-4 -4)">
+      <path
+        d="M24.4,2,17.9,7.85v14.3l6.5-5.85V2M8.15,5.9A12.09,12.09,0,0,0,1,7.85V26.908a.7.7,0,0,0,.65.65c.13,0,.195-.091.325-.091A15.85,15.85,0,0,1,8.15,26.05,12.09,12.09,0,0,1,15.3,28a15.659,15.659,0,0,1,7.15-1.95,13.241,13.241,0,0,1,6.175,1.378.565.565,0,0,0,.325.039.7.7,0,0,0,.65-.65V7.85A8.867,8.867,0,0,0,27,6.55V24.1a15.106,15.106,0,0,0-4.55-.65A15.659,15.659,0,0,0,15.3,25.4V7.85A12.09,12.09,0,0,0,8.15,5.9Z"
+        transform="translate(5 4)"
+      />
+    </g>
+  </svg>
+);
+
+const TermSvg = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z" />
+  </svg>
+);
+
+export const DictIcon = (props: Partial<CustomIconComponentProps>) => (
+  <Icon component={DictSvg} {...props} />
+);
+export const TermIcon = (props: Partial<CustomIconComponentProps>) => (
+  <Icon component={TermSvg} {...props} />
+);

+ 29 - 10
dashboard/src/components/library/article/ProTabs.tsx

@@ -1,14 +1,11 @@
 import { useRef, useState } from "react";
 import { Switch } from "antd";
 import { Radio, Space } from "antd";
-import {
-  SettingOutlined,
-  ProfileOutlined,
-  ShoppingCartOutlined,
-} from "@ant-design/icons";
+import { SettingOutlined, ShoppingCartOutlined } from "@ant-design/icons";
 import SettingArticle from "../../auth/setting/SettingArticle";
 import DictComponent from "../../dict/DictComponent";
 import TermCreate from "../../studio/term/TermCreate";
+import { DictIcon, TermIcon } from "../../../assets/icon";
 
 const setting = (
   <>
@@ -30,6 +27,7 @@ const Widget = () => {
   const divSetting = useRef<HTMLDivElement>(null);
   const divDict = useRef<HTMLDivElement>(null);
   const divTerm = useRef<HTMLDivElement>(null);
+  const divCart = useRef<HTMLDivElement>(null);
   const divPanel = useRef<HTMLDivElement>(null);
   const rightBarWidth = "40px";
   const closeAll = () => {
@@ -37,7 +35,7 @@ const Widget = () => {
       divPanel.current.style.display = "none";
     }
   };
-  const openPannel = () => {
+  const openPanel = () => {
     if (divPanel.current) {
       divPanel.current.style.display = "block";
     }
@@ -59,6 +57,7 @@ const Widget = () => {
         <div ref={divTerm} style={stylePanel}>
           <TermCreate type="inline" />
         </div>
+        <div ref={divCart} style={stylePanel}></div>
       </div>
       <div
         style={{
@@ -82,25 +81,34 @@ const Widget = () => {
             if (divTerm.current) {
               divTerm.current.style.display = "none";
             }
+            if (divCart.current) {
+              divCart.current.style.display = "none";
+            }
             switch (e.target.value) {
               case "setting":
                 if (divSetting.current) {
                   divSetting.current.style.display = "block";
                 }
-                openPannel();
+                openPanel();
                 break;
               case "dict":
                 if (divDict.current) {
                   divDict.current.style.display = "block";
                 }
-                openPannel();
+                openPanel();
 
                 break;
               case "term":
                 if (divTerm.current) {
                   divTerm.current.style.display = "block";
                 }
-                openPannel();
+                openPanel();
+                break;
+              case "cart":
+                if (divCart.current) {
+                  divCart.current.style.display = "block";
+                }
+                openPanel();
                 break;
               default:
                 break;
@@ -129,7 +137,7 @@ const Widget = () => {
                 }
               }}
             >
-              <ProfileOutlined />
+              <DictIcon />
             </Radio>
             <Radio
               value="term"
@@ -139,6 +147,17 @@ const Widget = () => {
                   closeAll();
                 }
               }}
+            >
+              <TermIcon />
+            </Radio>
+            <Radio
+              value="cart"
+              onClick={() => {
+                if (value2 === "cart") {
+                  setValue2("close");
+                  closeAll();
+                }
+              }}
             >
               <ShoppingCartOutlined />
             </Radio>