图标组件

components/IconCom.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+// 定义 props 的类型
+interface IconComProps {
+    type?: string;
+    width?: number | string;
+    height?: number | string;
+    fill?: string;
+    _style?: React.CSSProperties;
+}
+const IconCom: React.FC<IconComProps> = (props: IconComProps = {}) => {
+    // 样式content无效, https://www.iconfont.cn/collections/detail?spm=a313x.collections_index.i1.d9df05512.6d153a81fkRhvT&cid=9402
+    const {
+        type = "",
+        width = 20,
+        height = 20,
+        fill = "#1677FF",
+        _style = {},
+    } = props;
+    return (
+        <div style={_style}>
+            {type == "user" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1937" width={width} height={height}><path d="M498.602667 191.744a204.714667 204.714667 0 0 1 116.906666 372.8c133.162667 47.317333 229.077333 173.290667 231.893334 322.026667l0.085333 6.784h-64c0-157.333333-127.573333-284.885333-284.885333-284.885334-155.136 0-281.301333 123.968-284.821334 278.250667l-0.085333 6.613333h-64c0-151.68 96.810667-280.746667 232-328.810666a204.714667 204.714667 0 0 1 116.906667-372.8z m0 64a140.714667 140.714667 0 1 0 0 281.450667 140.714667 140.714667 0 0 0 0-281.450667z" fill={fill} p-id="1938"></path></svg>}
+            {type == "code" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2088" width={width} height={height}><path d="M234.666667 149.333333v704H170.666667V149.333333h64z m640 0v704h-42.666667V149.333333h42.666667zM576 789.333333v64h-42.666667v-64h42.666667z m-106.666667 0v64h-64v-64h64z m-128 0v64h-42.666666v-64h42.666666z m426.666667 0v64h-128v-64h128zM576 149.333333v576h-42.666667V149.333333h42.666667z m-106.666667 0v576h-64V149.333333h64z m-128 0v576h-42.666666V149.333333h42.666666z m426.666667 0v576h-128V149.333333h128z" fill={fill} p-id="2089"></path></svg>}
+            {type == "search" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1419" width={width} height={height}><path d="M782.08 476.330667A305.706667 305.706667 0 1 0 170.666667 476.416a305.706667 305.706667 0 0 0 611.413333-0.085333z m42.666667 0a348.416 348.416 0 1 1-696.832-0.042667 348.416 348.416 0 0 1 696.789333 0.042667z" fill={fill} p-id="1420"></path><path d="M476.373333 281.898667c48.384 0 92.16 19.626667 123.861334 51.328a21.333333 21.333333 0 1 1-30.165334 30.165333 132.096 132.096 0 0 0-93.696-38.826667c-36.608 0-69.76 14.805333-93.738666 38.826667a21.333333 21.333333 0 0 1-30.208-30.165333 174.805333 174.805333 0 0 1 123.946666-51.328zM696.32 696.362667a21.333333 21.333333 0 0 1 30.208 0l163.2 163.2a21.333333 21.333333 0 1 1-30.165333 30.165333l-163.2-163.2a21.333333 21.333333 0 0 1 0-30.165333z" fill={fill} p-id="1421"></path></svg>}
+            {type == "sure" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8530" width={width} height={height}><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8c12.7 17.7 39 17.7 51.7 0l210.6-292c3.9-5.3 0.1-12.7-6.4-12.7z" p-id="8531" fill={fill}></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8532" fill={fill}></path></svg>}
+            {type == "error" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8678" width={width} height={height}><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 0.3L512 465.6l-99.3-118.4-66.1-0.3c-4.4 0-8 3.5-8 8 0 1.9 0.7 3.7 1.9 5.2l130.1 155L340.5 670c-1.2 1.5-1.9 3.3-1.9 5.2 0 4.4 3.6 8 8 8l66.1-0.3L512 564.4l99.3 118.4 66 0.3c4.4 0 8-3.5 8-8 0-1.9-0.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z" p-id="8679" fill={fill}></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8680" fill={fill}></path></svg>}
+            {type == "warn" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8826" width={width} height={height}><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8827"></path><path d="M512 336m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="8828" fill={fill}></path><path d="M536 448h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" p-id="8829" fill={fill}></path></svg>}
+            {type == "info" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8975" width={width} height={height}><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8976" fill={fill}></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7c0-19.7 12.4-37.7 30.9-44.8 59-22.7 97.1-74.7 97.1-132.5 0.1-39.3-17.1-76-48.3-103.3z" p-id="8977" fill={fill}></path><path d="M512 732m-40 0a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z" p-id="8978" fill={fill}></path></svg>}
+
+        </div>
+    )
+}
+
+export default IconCom

entrypoints/popup/pages/DesignPic.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { Button, Table, Input, Message, Loading, Radio, Balloon } from '@alifd/next';
 import { CustomMessage } from '@/components/CustomMessage'
 import { urlToFile } from './utils';
+import IconCom from '@/components/IconCom';
 const RadioGroup = Radio.Group
 
 export default function DesignPic() {
@@ -746,7 +747,7 @@ export default function DesignPic() {
           <Table.Column title="文字" cell={text_render} align="center" />
           <Table.Column title="图片" cell={pic_render} align="center" />
           <Table.Column title={<div className='flex justify-center items-center'>
-            <div>操作</div><Balloon v2 closable={false} trigger={<a style={{ marginLeft: 5, display: "block", width: 20, height: 20, borderRadius: "50%", border: "1px solid", padding: 3, textDecoration: 'none' }}>?</a>} align="t" triggerType="hover" style={{ width: 300 }}>
+            <div>操作</div><Balloon v2 closable={false} trigger={<a><IconCom type="info" _style={{cursor:'pointer', marginLeft: 5}} /></a>} align="t" triggerType="hover" style={{ width: 300 }}>
               图片上传失败时,请重新点击上传定制信息按钮
             </Balloon>
           </div>} cell={option_render} align="center" />