perf: UI美化

web/src/components/ChannelsTable.js

@@ -1,6 +1,4 @@
 import React, {useEffect, useState} from 'react';
-import {Input, Label, Message, Popup} from 'semantic-ui-react';
-import {Link} from 'react-router-dom';
 import {
     API,
     isMobile,
@@ -389,23 +387,15 @@ const ChannelsTable = () => {
                 return <Tag size='large' color='green'>已启用</Tag>;
             case 2:
                 return (
-                    <Popup
+                    <Tag size='large' color='yellow'>
-                        trigger={<Tag size='large' color='red'>
                         已禁用
-                        </Tag>}
+                    </Tag>
-                        content='本渠道被手动禁用'
-                        basic
-                    />
                 );
             case 3:
                 return (
-                    <Popup
+                    <Tag size='large' color='yellow'>
-                        trigger={<Tag size='large' color='yellow'>
+                        自动禁用
-                            已禁用
+                    </Tag>
-                        </Tag>}
-                        content='本渠道被程序自动禁用'
-                        basic
-                    />
                 );
             default:
                 return (
@@ -657,7 +647,7 @@ const ChannelsTable = () => {
                 </Space>
             </div>
 
-            <Table columns={columns} dataSource={pageData} pagination={{
+            <Table style={{marginTop: 15}} columns={columns} dataSource={pageData} pagination={{
                 currentPage: activePage,
                 pageSize: pageSize,
                 total: channelCount,

web/src/components/LogsTable.js

@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react';
 import {Label} from 'semantic-ui-react';
 import {API, copy, isAdmin, showError, showSuccess, timestamp2string} from '../helpers';
 
-import {Table, Avatar, Tag, Form, Button, Layout, Select, Popover, Modal} from '@douyinfe/semi-ui';
+import {Table, Avatar, Tag, Form, Button, Layout, Select, Popover, Modal, Spin} from '@douyinfe/semi-ui';
 import {ITEMS_PER_PAGE} from '../constants';
 import {renderNumber, renderQuota, stringToColor} from '../helpers/render';
 import {
@@ -194,7 +194,8 @@ const LogsTable = () => {
 
     const [logs, setLogs] = useState([]);
     const [showStat, setShowStat] = useState(false);
-    const [loading, setLoading] = useState(true);
+    const [loading, setLoading] = useState(false);
+    const [loadingStat, setLoadingStat] = useState(false);
     const [activePage, setActivePage] = useState(1);
     const [logCount, setLogCount] = useState(ITEMS_PER_PAGE);
     const [searchKeyword, setSearchKeyword] = useState('');
@@ -247,14 +248,14 @@ const LogsTable = () => {
     };
 
     const handleEyeClick = async () => {
-        if (!showStat) {
+        setLoadingStat(true);
         if (isAdminUser) {
             await getLogStat();
         } else {
             await getLogSelfStat();
         }
-        }
+        setShowStat(true);
-        setShowStat(!showStat);
+        setLoadingStat(false);
     };
 
     const showUserInfo = async (userId) => {
@@ -396,12 +397,12 @@ const LogsTable = () => {
         <>
             <Layout>
                 <Header>
+                    <Spin spinning={loadingStat}>
                         <h3>使用明细（总消耗额度：
-                        {showStat && renderQuota(stat.quota)}
+                            <span onClick={handleEyeClick} style={{cursor: 'pointer', color: 'gray'}}>{showStat?renderQuota(stat.quota):"点击查看"}</span>
-                        {!showStat &&
-                            <span onClick={handleEyeClick} style={{cursor: 'pointer', color: 'gray'}}>点击查看</span>}
                             ）
                         </h3>
+                    </Spin>
                 </Header>
                 <Form layout='horizontal' style={{marginTop: 10}}>
                     <>
@@ -434,17 +435,17 @@ const LogsTable = () => {
                         }
                         <Form.Section>
                             <Button label='查询' type="primary" htmlType="submit" className="btn-margin-right"
-                                    onClick={refresh}>查询</Button>
+                                    onClick={refresh} loading={loading}>查询</Button>
                         </Form.Section>
                     </>
                 </Form>
-                <Table columns={columns} dataSource={pageData} pagination={{
+                <Table style={{marginTop: 5}} columns={columns} dataSource={pageData} pagination={{
                     currentPage: activePage,
                     pageSize: ITEMS_PER_PAGE,
                     total: logCount,
                     pageSizeOpts: [10, 20, 50, 100],
                     onPageChange: handlePageChange,
-                }} loading={loading}/>
+                }}/>
                 <Select defaultValue="0" style={{width: 120}} onChange={
                     (value) => {
                         setLogType(parseInt(value));

web/src/components/MjLogsTable.js

@@ -13,7 +13,7 @@ import {
     Popover,
     Modal,
     ImagePreview,
-    Typography
+    Typography, Progress
 } from '@douyinfe/semi-ui';
 import {ITEMS_PER_PAGE} from '../constants';
 import {renderNumber, renderQuota, stringToColor} from '../helpers/render';
@@ -88,7 +88,6 @@ const renderTimestamp = (timestampInSeconds) => {
 };
 
 
-
 const LogsTable = () => {
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [modalContent, setModalContent] = useState('');
@@ -112,7 +111,7 @@ const LogsTable = () => {
                 return (
 
                     <div>
-                                <Tag color={colors[parseInt(text) % colors.length]} size='large' onClick={()=>{
+                        <Tag color={colors[parseInt(text) % colors.length]} size='large' onClick={() => {
                             copyText(text); // 假设copyText是用于文本复制的函数
                         }}> {text} </Tag>
                     </div>
@@ -172,7 +171,11 @@ const LogsTable = () => {
             render: (text, record, index) => {
                 return (
                     <div>
-                     {<span> {text} </span>}
+                        {
+                            // 转换例如100%为数字100，如果text未定义，返回0
+                            <Progress percent={text ? parseInt(text.replace('%', '')) : 0} showInfo={true}
+                                      aria-label="drawing progress"/>
+                        }
                     </div>
                 );
             },
@@ -207,8 +210,8 @@ const LogsTable = () => {
 
                 return (
                     <Typography.Text
-                      ellipsis={{ showTooltip: true }}
+                        ellipsis={{showTooltip: true}}
-                      style={{ width: 100 }}
+                        style={{width: 100}}
                         onClick={() => {
                             setModalContent(text);
                             setIsModalOpen(true);
@@ -230,8 +233,8 @@ const LogsTable = () => {
 
                 return (
                     <Typography.Text
-                      ellipsis={{ showTooltip: true }}
+                        ellipsis={{showTooltip: true}}
-                      style={{ width: 100 }}
+                        style={{width: 100}}
                         onClick={() => {
                             setModalContent(text);
                             setIsModalOpen(true);
@@ -253,8 +256,8 @@ const LogsTable = () => {
 
                 return (
                     <Typography.Text
-                      ellipsis={{ showTooltip: true }}
+                        ellipsis={{showTooltip: true}}
-                      style={{ width: 100 }}
+                        style={{width: 100}}
                         onClick={() => {
                             setModalContent(text);
                             setIsModalOpen(true);
@@ -298,7 +301,6 @@ const LogsTable = () => {
     };
 
 
-
     const setLogsFormat = (logs) => {
         for (let i = 0; i < logs.length; i++) {
             logs[i].timestamp2string = timestamp2string(logs[i].created_at);
@@ -368,8 +370,6 @@ const LogsTable = () => {
     }, [logType]);
 
 
-
-
     return (
         <>
 
@@ -400,7 +400,7 @@ const LogsTable = () => {
                         </Form.Section>
                     </>
                 </Form>
-                <Table columns={columns} dataSource={pageData} pagination={{
+                <Table style={{marginTop: 5}} columns={columns} dataSource={pageData} pagination={{
                     currentPage: activePage,
                     pageSize: ITEMS_PER_PAGE,
                     total: logCount,
@@ -412,10 +412,10 @@ const LogsTable = () => {
                     onOk={() => setIsModalOpen(false)}
                     onCancel={() => setIsModalOpen(false)}
                     closable={null}
-                    bodyStyle={{ height: '400px', overflow: 'auto' }} // 设置模态框内容区域样式
+                    bodyStyle={{height: '400px', overflow: 'auto'}} // 设置模态框内容区域样式
                     width={800} // 设置模态框宽度
                 >
-                    <p style={{ whiteSpace: 'pre-line' }}>{modalContent}</p>
+                    <p style={{whiteSpace: 'pre-line'}}>{modalContent}</p>
                 </Modal>
                 <ImagePreview
                     src={modalImageUrl}