Skip to content

phsl / new-api

Go to a project
Commit 2a3e45c4 by CaIon
Options

perf: UI美化

parent dec5aeaf
Showing with 34 additions and 43 deletions
web/src/components/ChannelsTable.js
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 size='large' color='yellow'>
已禁用
</Tag>}
content='本渠道被手动禁用'
basic
/>
</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,
......
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(!showStat);
setShowStat(true);
setLoadingStat(false);
};
const showUserInfo = async (userId) => {
......@@ -396,12 +397,12 @@ const LogsTable = () => {
<>
<Layout>
<Header>
<Spin spinning={loadingStat}>
<h3>使用明细（总消耗额度：
{showStat && renderQuota(stat.quota)}
{!showStat &&
<span onClick={handleEyeClick} style={{cursor: 'pointer', color: 'gray'}}>点击查看</span>}
<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));
......
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 }}
style={{ width: 100 }}
ellipsis={{showTooltip: true}}
style={{width: 100}}
onClick={() => {
setModalContent(text);
setIsModalOpen(true);
......@@ -230,8 +233,8 @@ const LogsTable = () => {
return (
<Typography.Text
ellipsis={{ showTooltip: true }}
style={{ width: 100 }}
ellipsis={{showTooltip: true}}
style={{width: 100}}
onClick={() => {
setModalContent(text);
setIsModalOpen(true);
......@@ -253,8 +256,8 @@ const LogsTable = () => {
return (
<Typography.Text
ellipsis={{ showTooltip: true }}
style={{ width: 100 }}
ellipsis={{showTooltip: true}}
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}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment