Skip to content

phsl / new-api

Go to a project
Commit 2a3e45c4 by CaIon
Options

perf: UI美化

parent dec5aeaf
Showing with 26 additions and 35 deletions
web/src/components/ChannelsTable.js
import React, {useEffect, useState} from 'react'; import React, {useEffect, useState} from 'react';
import {Input, Label, Message, Popup} from 'semantic-ui-react';
import {Link} from 'react-router-dom';
import { import {
API, API,
isMobile, isMobile,
...@@ -389,23 +387,15 @@ const ChannelsTable = () => { ...@@ -389,23 +387,15 @@ const ChannelsTable = () => {
return <Tag size='large' color='green'>已启用</Tag>; return <Tag size='large' color='green'>已启用</Tag>;
case 2: case 2:
return ( return (
<Popup <Tag size='large' color='yellow'>
trigger={<Tag size='large' color='red'> 已禁用
已禁用 </Tag>
</Tag>}
content='本渠道被手动禁用'
basic
/>
); );
case 3: case 3:
return ( return (
<Popup <Tag size='large' color='yellow'>
trigger={<Tag size='large' color='yellow'> 自动禁用
已禁用 </Tag>
</Tag>}
content='本渠道被程序自动禁用'
basic
/>
); );
default: default:
return ( return (
...@@ -657,7 +647,7 @@ const ChannelsTable = () => { ...@@ -657,7 +647,7 @@ const ChannelsTable = () => {
</Space> </Space>
</div> </div>
<Table columns={columns} dataSource={pageData} pagination={{ <Table style={{marginTop: 15}} columns={columns} dataSource={pageData} pagination={{
currentPage: activePage, currentPage: activePage,
pageSize: pageSize, pageSize: pageSize,
total: channelCount, total: channelCount,
......
web/src/components/LogsTable.js
...@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react'; ...@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react';
import {Label} from 'semantic-ui-react'; import {Label} from 'semantic-ui-react';
import {API, copy, isAdmin, showError, showSuccess, timestamp2string} from '../helpers'; 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 {ITEMS_PER_PAGE} from '../constants';
import {renderNumber, renderQuota, stringToColor} from '../helpers/render'; import {renderNumber, renderQuota, stringToColor} from '../helpers/render';
import { import {
...@@ -194,7 +194,8 @@ const LogsTable = () => { ...@@ -194,7 +194,8 @@ const LogsTable = () => {
const [logs, setLogs] = useState([]); const [logs, setLogs] = useState([]);
const [showStat, setShowStat] = useState(false); 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 [activePage, setActivePage] = useState(1);
const [logCount, setLogCount] = useState(ITEMS_PER_PAGE); const [logCount, setLogCount] = useState(ITEMS_PER_PAGE);
const [searchKeyword, setSearchKeyword] = useState(''); const [searchKeyword, setSearchKeyword] = useState('');
...@@ -247,14 +248,14 @@ const LogsTable = () => { ...@@ -247,14 +248,14 @@ const LogsTable = () => {
}; };
const handleEyeClick = async () => { const handleEyeClick = async () => {
if (!showStat) { setLoadingStat(true);
if (isAdminUser) { if (isAdminUser) {
await getLogStat(); await getLogStat();
} else { } else {
await getLogSelfStat(); await getLogSelfStat();
}
} }
setShowStat(!showStat); setShowStat(true);
setLoadingStat(false);
}; };
const showUserInfo = async (userId) => { const showUserInfo = async (userId) => {
...@@ -396,12 +397,12 @@ const LogsTable = () => { ...@@ -396,12 +397,12 @@ const LogsTable = () => {
<> <>
<Layout> <Layout>
<Header> <Header>
<h3>使用明细（总消耗额度： <Spin spinning={loadingStat}>
{showStat && renderQuota(stat.quota)} <h3>使用明细（总消耗额度：
{!showStat && <span onClick={handleEyeClick} style={{cursor: 'pointer', color: 'gray'}}>{showStat?renderQuota(stat.quota):"点击查看"}</span>
<span onClick={handleEyeClick} style={{cursor: 'pointer', color: 'gray'}}>点击查看</span>} ）
） </h3>
</h3> </Spin>
</Header> </Header>
<Form layout='horizontal' style={{marginTop: 10}}> <Form layout='horizontal' style={{marginTop: 10}}>
<> <>
...@@ -434,17 +435,17 @@ const LogsTable = () => { ...@@ -434,17 +435,17 @@ const LogsTable = () => {
} }
<Form.Section> <Form.Section>
<Button label='查询' type="primary" htmlType="submit" className="btn-margin-right" <Button label='查询' type="primary" htmlType="submit" className="btn-margin-right"
onClick={refresh}>查询</Button> onClick={refresh} loading={loading}>查询</Button>
</Form.Section> </Form.Section>
</> </>
</Form> </Form>
<Table columns={columns} dataSource={pageData} pagination={{ <Table style={{marginTop: 5}} columns={columns} dataSource={pageData} pagination={{
currentPage: activePage, currentPage: activePage,
pageSize: ITEMS_PER_PAGE, pageSize: ITEMS_PER_PAGE,
total: logCount, total: logCount,
pageSizeOpts: [10, 20, 50, 100], pageSizeOpts: [10, 20, 50, 100],
onPageChange: handlePageChange, onPageChange: handlePageChange,
}} loading={loading}/> }}/>
<Select defaultValue="0" style={{width: 120}} onChange={ <Select defaultValue="0" style={{width: 120}} onChange={
(value) => { (value) => {
setLogType(parseInt(value)); setLogType(parseInt(value));
......
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