From d04d2a6c4dfb79ca109d5064c7695e1f8e8e4c74 Mon Sep 17 00:00:00 2001
From: CaIon <1808837298@qq.com>
Date: Wed, 10 Jan 2024 18:32:44 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20UI=E7=BE=8E=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/ChannelsTable.js |  24 +-
 web/src/components/LogsTable.js     |  37 +--
 web/src/components/MjLogsTable.js   | 344 ++++++++++++++--------------
 3 files changed, 198 insertions(+), 207 deletions(-)

diff --git a/web/src/components/ChannelsTable.js b/web/src/components/ChannelsTable.js
index f194660..acea6ba 100644
--- a/web/src/components/ChannelsTable.js
+++ b/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
-                        trigger={<Tag size='large' color='red'>
-                            已禁用
-                        </Tag>}
-                        content='本渠道被手动禁用'
-                        basic
-                    />
+                    <Tag size='large' color='yellow'>
+                        已禁用
+                    </Tag>
                 );
             case 3:
                 return (
-                    <Popup
-                        trigger={<Tag size='large' color='yellow'>
-                            已禁用
-                        </Tag>}
-                        content='本渠道被程序自动禁用'
-                        basic
-                    />
+                    <Tag size='large' color='yellow'>
+                        自动禁用
+                    </Tag>
                 );
             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,
diff --git a/web/src/components/LogsTable.js b/web/src/components/LogsTable.js
index 2e9ef45..c4c72f0 100644
--- a/web/src/components/LogsTable.js
+++ b/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) {
-            if (isAdminUser) {
-                await getLogStat();
-            } else {
-                await getLogSelfStat();
-            }
+        setLoadingStat(true);
+        if (isAdminUser) {
+            await getLogStat();
+        } else {
+            await getLogSelfStat();
         }
-        setShowStat(!showStat);
+        setShowStat(true);
+        setLoadingStat(false);
     };
 
     const showUserInfo = async (userId) => {
@@ -396,12 +397,12 @@ const LogsTable = () => {
         <>
             <Layout>
                 <Header>
-                    <h3>使用明细（总消耗额度：
-                        {showStat && renderQuota(stat.quota)}
-                        {!showStat &&
-                            <span onClick={handleEyeClick} style={{cursor: 'pointer', color: 'gray'}}>点击查看</span>}
-                        ）
-                    </h3>
+                    <Spin spinning={loadingStat}>
+                        <h3>使用明细（总消耗额度：
+                            <span onClick={handleEyeClick} style={{cursor: 'pointer', color: 'gray'}}>{showStat?renderQuota(stat.quota):"点击查看"}</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));
diff --git a/web/src/components/MjLogsTable.js b/web/src/components/MjLogsTable.js
index 99245a7..dafc80d 100644
--- a/web/src/components/MjLogsTable.js
+++ b/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';
@@ -25,84 +25,83 @@ const colors = ['amber', 'blue', 'cyan', 'green', 'grey', 'indigo',
 ]
 
 function renderType(type) {
-  switch (type) {
-    case 'IMAGINE':
-      return <Tag color="blue" size='large'>绘图</Tag>;
-    case 'UPSCALE':
-      return <Tag color="orange" size='large'>放大</Tag>;
-    case 'VARIATION':
-      return <Tag color="purple" size='large'>变换</Tag>;
-    case 'DESCRIBE':
-      return <Tag color="yellow" size='large'>图生文</Tag>;
-    case 'BLEAND':
-      return <Tag color="lime" size='large'>图混合</Tag>;
-    default:
-      return <Tag color="black" size='large'>未知</Tag>;
-  }
+    switch (type) {
+        case 'IMAGINE':
+            return <Tag color="blue" size='large'>绘图</Tag>;
+        case 'UPSCALE':
+            return <Tag color="orange" size='large'>放大</Tag>;
+        case 'VARIATION':
+            return <Tag color="purple" size='large'>变换</Tag>;
+        case 'DESCRIBE':
+            return <Tag color="yellow" size='large'>图生文</Tag>;
+        case 'BLEAND':
+            return <Tag color="lime" size='large'>图混合</Tag>;
+        default:
+            return <Tag color="black" size='large'>未知</Tag>;
+    }
 }
 
 
 function renderCode(code) {
-  switch (code) {
-    case 1:
-      return <Tag color="green" size='large'>已提交</Tag>;
-    case 21:
-      return <Tag color="lime" size='large'>排队中</Tag>;
-    case 22:
-      return <Tag color="orange" size='large'>重复提交</Tag>;
-    default:
-      return <Tag color="black" size='large'>未知</Tag>;
-  }
+    switch (code) {
+        case 1:
+            return <Tag color="green" size='large'>已提交</Tag>;
+        case 21:
+            return <Tag color="lime" size='large'>排队中</Tag>;
+        case 22:
+            return <Tag color="orange" size='large'>重复提交</Tag>;
+        default:
+            return <Tag color="black" size='large'>未知</Tag>;
+    }
 }
 
 
 function renderStatus(type) {
-  // Ensure all cases are string literals by adding quotes.
-  switch (type) {
-    case 'SUCCESS':
-      return <Tag color="green" size='large'>成功</Tag>;
-    case 'NOT_START':
-      return <Tag color="grey" size='large'>未启动</Tag>;
-    case 'SUBMITTED':
-      return <Tag color="yellow" size='large'>队列中</Tag>;
-    case 'IN_PROGRESS':
-      return <Tag color="blue" size='large'>执行中</Tag>;
-    case 'FAILURE':
-      return <Tag color="red" size='large'>失败</Tag>;
-    default:
-      return <Tag color="black" size='large'>未知</Tag>;
-  }
+    // Ensure all cases are string literals by adding quotes.
+    switch (type) {
+        case 'SUCCESS':
+            return <Tag color="green" size='large'>成功</Tag>;
+        case 'NOT_START':
+            return <Tag color="grey" size='large'>未启动</Tag>;
+        case 'SUBMITTED':
+            return <Tag color="yellow" size='large'>队列中</Tag>;
+        case 'IN_PROGRESS':
+            return <Tag color="blue" size='large'>执行中</Tag>;
+        case 'FAILURE':
+            return <Tag color="red" size='large'>失败</Tag>;
+        default:
+            return <Tag color="black" size='large'>未知</Tag>;
+    }
 }
 
 const renderTimestamp = (timestampInSeconds) => {
-  const date = new Date(timestampInSeconds * 1000); // 从秒转换为毫秒
+    const date = new Date(timestampInSeconds * 1000); // 从秒转换为毫秒
 
-  const year = date.getFullYear(); // 获取年份
-  const month = ('0' + (date.getMonth() + 1)).slice(-2); // 获取月份，从0开始需要+1，并保证两位数
-  const day = ('0' + date.getDate()).slice(-2); // 获取日期，并保证两位数
-  const hours = ('0' + date.getHours()).slice(-2); // 获取小时，并保证两位数
-  const minutes = ('0' + date.getMinutes()).slice(-2); // 获取分钟，并保证两位数
-  const seconds = ('0' + date.getSeconds()).slice(-2); // 获取秒钟，并保证两位数
+    const year = date.getFullYear(); // 获取年份
+    const month = ('0' + (date.getMonth() + 1)).slice(-2); // 获取月份，从0开始需要+1，并保证两位数
+    const day = ('0' + date.getDate()).slice(-2); // 获取日期，并保证两位数
+    const hours = ('0' + date.getHours()).slice(-2); // 获取小时，并保证两位数
+    const minutes = ('0' + date.getMinutes()).slice(-2); // 获取分钟，并保证两位数
+    const seconds = ('0' + date.getSeconds()).slice(-2); // 获取秒钟，并保证两位数
 
-  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; // 格式化输出
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; // 格式化输出
 };
 
 
-
 const LogsTable = () => {
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [modalContent, setModalContent] = useState('');
     const columns = [
         {
-          title: '提交时间',
-          dataIndex: 'submit_time',
-          render: (text, record, index) => {
-            return (
-              <div>
-                {renderTimestamp(text / 1000)} 
-              </div>
-            );
-          },
+            title: '提交时间',
+            dataIndex: 'submit_time',
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        {renderTimestamp(text / 1000)}
+                    </div>
+                );
+            },
         },
         {
             title: '渠道',
@@ -111,48 +110,48 @@ const LogsTable = () => {
             render: (text, record, index) => {
                 return (
 
-                            <div>
-                                <Tag color={colors[parseInt(text) % colors.length]} size='large' onClick={()=>{
-                                    copyText(text); // 假设copyText是用于文本复制的函数
-                                }}> {text} </Tag>
-                            </div>
+                    <div>
+                        <Tag color={colors[parseInt(text) % colors.length]} size='large' onClick={() => {
+                            copyText(text); // 假设copyText是用于文本复制的函数
+                        }}> {text} </Tag>
+                    </div>
 
                 );
             },
         },
         {
-          title: '类型',
-          dataIndex: 'action',
-          render: (text, record, index) => {
-              return (
-                  <div>
-                      {renderType(text)}
-                  </div>
-              );
-          },
+            title: '类型',
+            dataIndex: 'action',
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        {renderType(text)}
+                    </div>
+                );
+            },
         },
         {
             title: '任务ID',
             dataIndex: 'mj_id',
             render: (text, record, index) => {
                 return (
-                  <div>
-                    {text}
-                </div>
+                    <div>
+                        {text}
+                    </div>
                 );
             },
         },
         {
-          title: '提交结果',
-          dataIndex: 'code',
-          className: isAdmin() ? 'tableShow' : 'tableHiddle',
-          render: (text, record, index) => {
-              return (
-                <div>
-                 {renderCode(text)}
-               </div>
-              );
-          },
+            title: '提交结果',
+            dataIndex: 'code',
+            className: isAdmin() ? 'tableShow' : 'tableHiddle',
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        {renderCode(text)}
+                    </div>
+                );
+            },
         },
         {
             title: '任务状态',
@@ -160,9 +159,9 @@ const LogsTable = () => {
             className: isAdmin() ? 'tableShow' : 'tableHiddle',
             render: (text, record, index) => {
                 return (
-                  <div>
-                    {renderStatus(text)}
-                  </div>
+                    <div>
+                        {renderStatus(text)}
+                    </div>
                 );
             },
         },
@@ -171,99 +170,103 @@ const LogsTable = () => {
             dataIndex: 'progress',
             render: (text, record, index) => {
                 return (
-                  <div>
-                     {<span> {text} </span>}
-                  </div>
+                    <div>
+                        {
+                            // 转换例如100%为数字100，如果text未定义，返回0
+                            <Progress percent={text ? parseInt(text.replace('%', '')) : 0} showInfo={true}
+                                      aria-label="drawing progress"/>
+                        }
+                    </div>
                 );
             },
         },
         {
-          title: '结果图片',
-          dataIndex: 'image_url',
-          render: (text, record, index) => {
-            if (!text) {
-              return '无';
+            title: '结果图片',
+            dataIndex: 'image_url',
+            render: (text, record, index) => {
+                if (!text) {
+                    return '无';
+                }
+                return (
+                    <Button
+                        onClick={() => {
+                            setModalImageUrl(text);  // 更新图片URL状态
+                            setIsModalOpenurl(true);    // 打开模态框
+                        }}
+                    >
+                        查看图片
+                    </Button>
+                );
             }
-            return (
-              <Button
-                onClick={() => {
-                  setModalImageUrl(text);  // 更新图片URL状态
-                  setIsModalOpenurl(true);    // 打开模态框
-                }}
-              >
-                查看图片
-              </Button>
-            );
-          }
         },
         {
             title: 'Prompt',
             dataIndex: 'prompt',
             render: (text, record, index) => {
-              // 如果text未定义，返回替代文本，例如空字符串''或其他
-              if (!text) {
-                  return '无';
-              }
-      
-              return (
-                  <Typography.Text
-                      ellipsis={{ showTooltip: true }}
-                      style={{ width: 100 }}
-                      onClick={() => {
-                          setModalContent(text);
-                          setIsModalOpen(true);
-                      }}
-                  >
-                      {text}
-                  </Typography.Text>
-              );
-          }
+                // 如果text未定义，返回替代文本，例如空字符串''或其他
+                if (!text) {
+                    return '无';
+                }
+
+                return (
+                    <Typography.Text
+                        ellipsis={{showTooltip: true}}
+                        style={{width: 100}}
+                        onClick={() => {
+                            setModalContent(text);
+                            setIsModalOpen(true);
+                        }}
+                    >
+                        {text}
+                    </Typography.Text>
+                );
+            }
         },
         {
             title: 'PromptEn',
             dataIndex: 'prompt_en',
             render: (text, record, index) => {
-              // 如果text未定义，返回替代文本，例如空字符串''或其他
-              if (!text) {
-                  return '无';
-              }
-      
-              return (
-                  <Typography.Text
-                      ellipsis={{ showTooltip: true }}
-                      style={{ width: 100 }}
-                      onClick={() => {
-                          setModalContent(text);
-                          setIsModalOpen(true);
-                      }}
-                  >
-                      {text}
-                  </Typography.Text>
-              );
-          }
+                // 如果text未定义，返回替代文本，例如空字符串''或其他
+                if (!text) {
+                    return '无';
+                }
+
+                return (
+                    <Typography.Text
+                        ellipsis={{showTooltip: true}}
+                        style={{width: 100}}
+                        onClick={() => {
+                            setModalContent(text);
+                            setIsModalOpen(true);
+                        }}
+                    >
+                        {text}
+                    </Typography.Text>
+                );
+            }
         },
         {
             title: '失败原因',
             dataIndex: 'fail_reason',
             render: (text, record, index) => {
-              // 如果text未定义，返回替代文本，例如空字符串''或其他
-              if (!text) {
-                  return '无';
-              }
-      
-              return (
-                  <Typography.Text
-                      ellipsis={{ showTooltip: true }}
-                      style={{ width: 100 }}
-                      onClick={() => {
-                          setModalContent(text);
-                          setIsModalOpen(true);
-                      }}
-                  >
-                      {text}
-                  </Typography.Text>
-              );
-          }
+                // 如果text未定义，返回替代文本，例如空字符串''或其他
+                if (!text) {
+                    return '无';
+                }
+
+                return (
+                    <Typography.Text
+                        ellipsis={{showTooltip: true}}
+                        style={{width: 100}}
+                        onClick={() => {
+                            setModalContent(text);
+                            setIsModalOpen(true);
+                        }}
+                    >
+                        {text}
+                    </Typography.Text>
+                );
+            }
         }
 
     ];
@@ -286,7 +289,7 @@ const LogsTable = () => {
         start_timestamp: timestamp2string(now.getTime() / 1000 - 2592000),
         end_timestamp: timestamp2string(now.getTime() / 1000 + 3600),
     });
-    const {channel_id, mj_id,  start_timestamp, end_timestamp} = inputs;
+    const {channel_id, mj_id, start_timestamp, end_timestamp} = inputs;
 
     const [stat, setStat] = useState({
         quota: 0,
@@ -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);
@@ -317,9 +319,9 @@ const LogsTable = () => {
         let localStartTimestamp = Date.parse(start_timestamp);
         let localEndTimestamp = Date.parse(end_timestamp);
         if (isAdminUser) {
-          url = `/api/mj/?p=${startIdx}&channel_id=${channel_id}&mj_id=${mj_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
+            url = `/api/mj/?p=${startIdx}&channel_id=${channel_id}&mj_id=${mj_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
         } else {
-          url = `/api/mj/self/?p=${startIdx}&mj_id=${mj_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
+            url = `/api/mj/self/?p=${startIdx}&mj_id=${mj_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
         }
         const res = await API.get(url);
         const {success, message, data} = res.data;
@@ -368,11 +370,9 @@ const LogsTable = () => {
     }, [logType]);
 
 
-
-
     return (
         <>
-         
+
             <Layout>
                 <Form layout='horizontal' style={{marginTop: 10}}>
                     <>
@@ -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,17 +412,17 @@ 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}
                     visible={isModalOpenurl}
                     onVisibleChange={(visible) => setIsModalOpenurl(visible)}
                 />
-               
+
             </Layout>
         </>
     );