消耗列表新增文件和路由配置
This commit is contained in:
Lrd
-329
File diff suppressed because one or more lines are too long
+387
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -5,7 +5,7 @@
|
|||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>VideoGen.AI 管理后台</title>
|
<title>VideoGen.AI 管理后台</title>
|
||||||
<script type="module" crossorigin src="/assets/index-BH90EezD.js"></script>
|
<script type="module" crossorigin src="/assets/index-CIsX_bex.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>␍
|
<div id="root"></div>␍
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
{"root":["./src/app.tsx","./src/env.d.ts","./src/main.tsx","./src/api/client.ts","./src/api/crypto.ts","./src/api/index.ts","./src/pages/admincreditratios.tsx","./src/pages/admincreditrecords.tsx","./src/pages/admindashboard.tsx","./src/pages/admingenerationairecords.tsx","./src/pages/admingenerationrecords.tsx","./src/pages/adminimageengines.tsx","./src/pages/adminindustries.tsx","./src/pages/adminlayout.tsx","./src/pages/adminloginpage.tsx","./src/pages/adminmenuconfig.tsx","./src/pages/adminmodels.tsx","./src/pages/adminnotificationmanager.tsx","./src/pages/adminoauthapplist.tsx","./src/pages/adminoperationlogs.tsx","./src/pages/adminpaymentconfig.tsx","./src/pages/adminrechargepackages.tsx","./src/pages/adminsettings.tsx","./src/pages/adminusers.tsx","./src/pages/adminvideoengines.tsx","./src/store/index.ts","./src/types/index.ts","./src/utils/formatdate.ts"],"version":"6.0.3"}
|
{"root":["./src/app.tsx","./src/env.d.ts","./src/main.tsx","./src/api/client.ts","./src/api/crypto.ts","./src/api/index.ts","./src/pages/admincreditratios.tsx","./src/pages/admincreditrecords.tsx","./src/pages/admindashboard.tsx","./src/pages/admingenerationairecords.tsx","./src/pages/admingenerationrecords.tsx","./src/pages/adminimageengines.tsx","./src/pages/adminindustries.tsx","./src/pages/adminlayout.tsx","./src/pages/adminloginpage.tsx","./src/pages/adminmenuconfig.tsx","./src/pages/adminmodels.tsx","./src/pages/adminnotificationmanager.tsx","./src/pages/adminoauthapplist.tsx","./src/pages/adminoperationlogs.tsx","./src/pages/adminpaymentconfig.tsx","./src/pages/adminpaymentstats.tsx","./src/pages/adminrechargepackages.tsx","./src/pages/adminsettings.tsx","./src/pages/adminusers.tsx","./src/pages/adminvideoengines.tsx","./src/store/index.ts","./src/types/index.ts","./src/utils/formatdate.ts"],"version":"6.0.3"}
|
||||||
@@ -15,6 +15,7 @@ import RemoveLens from './pages/RemoveLens';
|
|||||||
import GeneratedRecord from './pages/GeneratedRecord';
|
import GeneratedRecord from './pages/GeneratedRecord';
|
||||||
import AuthorizationPage from './pages/AuthorizationPage';
|
import AuthorizationPage from './pages/AuthorizationPage';
|
||||||
import RemoveInfo from './pages/RemoveInfo';
|
import RemoveInfo from './pages/RemoveInfo';
|
||||||
|
import ConsumePage from './pages/ConsumePage';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -100,11 +101,7 @@ const App = () => {
|
|||||||
<Route path="removelens/:creatID/removeinfo" element={<RemoveInfo />} />
|
<Route path="removelens/:creatID/removeinfo" element={<RemoveInfo />} />
|
||||||
<Route path="generated" element={<GeneratedRecord />} />
|
<Route path="generated" element={<GeneratedRecord />} />
|
||||||
<Route path="authorization" element={<AuthorizationPage />} />
|
<Route path="authorization" element={<AuthorizationPage />} />
|
||||||
|
<Route path="consume" element={<ConsumePage />} />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="*" element={<Navigate to="/projects" replace />} />
|
<Route path="*" element={<Navigate to="/projects" replace />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
import React, { useEffect, useState, useLayoutEffect, useRef, useCallback } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { Button, Table, Checkbox, Tag, Space, message, Modal } from 'antd';
|
import { Button, Table, Tag, message } from 'antd';
|
||||||
import { PlusOutlined, CheckCircleOutlined, ClockCircleOutlined, CiCircleOutlined, EyeOutlined, XOutlined } from '@ant-design/icons';
|
import { PlusOutlined, CheckCircleOutlined, ClockCircleOutlined, CiCircleOutlined } from '@ant-design/icons';
|
||||||
import type { OAuthAppParam } from '../api/index';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { getAuthorizationList } from '../api/index';
|
|
||||||
|
|
||||||
// 授权数据类型
|
// 授权数据类型
|
||||||
interface AuthorizationData {
|
interface AuthorizationData {
|
||||||
@@ -19,67 +18,52 @@ const statusConfig = {
|
|||||||
revoked: { label: '已撤销', color: 'gray', icon: CiCircleOutlined },
|
revoked: { label: '已撤销', color: 'gray', icon: CiCircleOutlined },
|
||||||
};
|
};
|
||||||
|
|
||||||
// 模拟消耗记录数据
|
interface ApiResponse {
|
||||||
const mockConsumptionRecords = [
|
code: number;
|
||||||
{ id: 'C001', authorizationId: '1867060028363785', amount: 100, type: 'video', description: '视频生成消耗', createdAt: '2024-01-15 10:30:00' },
|
message: string;
|
||||||
{ id: 'C002', authorizationId: '1867060028363785', amount: 50, type: 'audio', description: '音频转换消耗', createdAt: '2024-01-15 11:20:00' },
|
data: AuthorizationData[];
|
||||||
{ id: 'C003', authorizationId: '1867059808785418', amount: 200, type: 'video', description: '视频生成消耗', createdAt: '2024-01-14 14:45:00' },
|
}
|
||||||
{ id: 'C004', authorizationId: '1867060028363785', amount: 75, type: 'image', description: '图片处理消耗', createdAt: '2024-01-14 09:15:00' },
|
|
||||||
{ id: 'C005', authorizationId: '1867059757929740', amount: 150, type: 'video', description: '视频生成消耗', createdAt: '2024-01-13 16:00:00' },
|
|
||||||
];
|
|
||||||
|
|
||||||
// 消耗类型配置
|
// 模拟授权列表接口
|
||||||
const consumptionTypeConfig = {
|
const mockApiResponse: ApiResponse = {
|
||||||
video: { label: '视频生成', color: 'blue' },
|
|
||||||
audio: { label: '音频转换', color: 'purple' },
|
|
||||||
image: { label: '图片处理', color: 'green' },
|
|
||||||
};
|
|
||||||
|
|
||||||
// 模拟表头接口返回数据
|
|
||||||
const mockTableHeaderResponse = {
|
|
||||||
code: 200,
|
code: 200,
|
||||||
message: 'success',
|
message: 'success',
|
||||||
data: [
|
data: [
|
||||||
{ title: '序号', dataIndex: 'index', key: 'index', width: 80, fixed: 'left' },
|
{ id: '1867060028363785', status: 'active', description: '用户张三的API授权' },
|
||||||
{ title: '消耗ID', dataIndex: 'id', key: 'id', ellipsis: true },
|
{ id: '1867059757929740', status: 'pending', description: '用户李四的API授权' },
|
||||||
{ title: '授权ID', dataIndex: 'authorizationId', key: 'authorizationId', ellipsis: true },
|
{ id: '1867059808785418', status: 'active', description: '用户王五的API授权' },
|
||||||
{ title: '消耗类型', dataIndex: 'type', key: 'type', width: 120 },
|
{ id: '1867060028363786', status: 'expired', description: '用户赵六的API授权' },
|
||||||
{ title: '消耗金额', dataIndex: 'amount', key: 'amount', width: 120 },
|
{ id: '1867060028363787', status: 'revoked', description: '用户钱七的API授权' },
|
||||||
{ title: '消耗描述', dataIndex: 'description', key: 'description', ellipsis: true },
|
|
||||||
{ title: '消耗时间', dataIndex: 'createdAt', key: 'createdAt', width: 160, fixed: 'right' },
|
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
// 模拟获取表头接口
|
// 模拟调用接口 /api/admin/user-oauth-apps/list
|
||||||
const fetchTableHeader = () => {
|
const fetchAuthorizationList = async (): Promise<ApiResponse> => {
|
||||||
return new Promise<typeof mockTableHeaderResponse>((resolve) => {
|
return new Promise((resolve) => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
resolve(mockTableHeaderResponse);
|
resolve(mockApiResponse);
|
||||||
}, 500);
|
}, 800);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const AuthorizationPage: React.FC = () => {
|
const AuthorizationPage: React.FC = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
const [authorizations, setAuthorizations] = useState<AuthorizationData[]>([]);
|
const [authorizations, setAuthorizations] = useState<AuthorizationData[]>([]);
|
||||||
const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
|
const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [listLoading, setListLoading] = useState(false);
|
const [listLoading, setListLoading] = useState(false);
|
||||||
const [showConsumptionModal, setShowConsumptionModal] = useState(false);
|
|
||||||
const [consumptionRecords, setConsumptionRecords] = useState(mockConsumptionRecords);
|
|
||||||
const [consumptionColumns, setConsumptionColumns] = useState<typeof mockTableHeaderResponse['data']>([]);
|
|
||||||
const [headerLoading, setHeaderLoading] = useState(false);
|
|
||||||
|
|
||||||
// 页面初始化时获取授权列表
|
// 页面初始化时获取授权列表
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const loadData = async () => {
|
const loadData = async () => {
|
||||||
setListLoading(true);
|
setListLoading(true);
|
||||||
try {
|
try {
|
||||||
const params: OAuthAppParam = {
|
const response = await fetchAuthorizationList();
|
||||||
page: 1,
|
if (response.code === 200) {
|
||||||
pageSize: 10,
|
setAuthorizations(response.data);
|
||||||
};
|
} else {
|
||||||
const response = await getAuthorizationList(params);
|
message.error(response.message);
|
||||||
setAuthorizations(response.data || []);
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
message.error('获取授权列表失败');
|
message.error('获取授权列表失败');
|
||||||
} finally {
|
} finally {
|
||||||
@@ -101,26 +85,33 @@ const AuthorizationPage: React.FC = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 跳转到消耗记录页面
|
||||||
|
const handleGoToConsume = () => {
|
||||||
|
navigate('/consume');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理点击授权按钮
|
||||||
|
const handleAuthorize = () => {
|
||||||
|
if (selectedRowKeys.length === 0) {
|
||||||
|
message.warning('请先选择需要授权的记录');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setLoading(true);
|
||||||
|
// 模拟授权操作
|
||||||
|
setTimeout(() => {
|
||||||
|
setAuthorizations(prev =>
|
||||||
|
prev.map(item =>
|
||||||
|
selectedRowKeys.includes(item.id) ? { ...item, status: 'active' } : item
|
||||||
|
)
|
||||||
|
);
|
||||||
|
setSelectedRowKeys([]);
|
||||||
|
setLoading(false);
|
||||||
|
message.success(`成功授权 ${selectedRowKeys.length} 条记录`);
|
||||||
|
}, 800);
|
||||||
|
};
|
||||||
|
|
||||||
// 表格列配置
|
// 表格列配置
|
||||||
const columns = [
|
const columns = [
|
||||||
// {
|
|
||||||
// title: '',
|
|
||||||
// dataIndex: 'selection',
|
|
||||||
// key: 'selection',
|
|
||||||
// width: 60,
|
|
||||||
// render: (_: any, record: typeof mockAuthorizations[0]) => (
|
|
||||||
// <Checkbox
|
|
||||||
// checked={selectedRowKeys.includes(record.id)}
|
|
||||||
// onChange={(e) => {
|
|
||||||
// if (e.target.checked) {
|
|
||||||
// setSelectedRowKeys([...selectedRowKeys, record.id]);
|
|
||||||
// } else {
|
|
||||||
// setSelectedRowKeys(selectedRowKeys.filter(key => key !== record.id));
|
|
||||||
// }
|
|
||||||
// }}
|
|
||||||
// />
|
|
||||||
// ),
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
title: '序号',
|
title: '序号',
|
||||||
dataIndex: 'index',
|
dataIndex: 'index',
|
||||||
@@ -155,10 +146,9 @@ const AuthorizationPage: React.FC = () => {
|
|||||||
size="small"
|
size="small"
|
||||||
style={{
|
style={{
|
||||||
borderRadius: 8,
|
borderRadius: 8,
|
||||||
// background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
|
|
||||||
border: 'none',
|
border: 'none',
|
||||||
}}
|
}}
|
||||||
onClick={handleOpenConsumptionModal}
|
onClick={handleGoToConsume}
|
||||||
>
|
>
|
||||||
查看消耗
|
查看消耗
|
||||||
</Button>
|
</Button>
|
||||||
@@ -166,92 +156,12 @@ const AuthorizationPage: React.FC = () => {
|
|||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
// 获取表头数据
|
|
||||||
const handleFetchHeader = async () => {
|
|
||||||
setHeaderLoading(true);
|
|
||||||
try {
|
|
||||||
const response = await fetchTableHeader();
|
|
||||||
if (response.code === 200) {
|
|
||||||
// 对特定列添加render函数
|
|
||||||
const columnsWithRender = response.data.map(col => {
|
|
||||||
if (col.dataIndex === 'index') {
|
|
||||||
return {
|
|
||||||
...col,
|
|
||||||
render: (text: number) => <span style={{ color: '#94a3b8' }}>{text}</span>,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (col.dataIndex === 'id') {
|
|
||||||
return {
|
|
||||||
...col,
|
|
||||||
render: (text: string) => <span style={{ fontWeight: 500, color: '#1e293b' }}>{text}</span>,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (col.dataIndex === 'type') {
|
|
||||||
return {
|
|
||||||
...col,
|
|
||||||
render: (text: string) => {
|
|
||||||
const config = consumptionTypeConfig[text as keyof typeof consumptionTypeConfig];
|
|
||||||
return <Tag color={config?.color}>{config?.label}</Tag>;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (col.dataIndex === 'amount') {
|
|
||||||
return {
|
|
||||||
...col,
|
|
||||||
render: (text: number) => <span style={{ color: '#ef4444', fontWeight: 500 }}>{text} 元</span>,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return col;
|
|
||||||
});
|
|
||||||
setConsumptionColumns(columnsWithRender);
|
|
||||||
} else {
|
|
||||||
message.error(response.message);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
message.error('获取表头失败');
|
|
||||||
} finally {
|
|
||||||
setHeaderLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 打开消耗弹窗
|
|
||||||
const handleOpenConsumptionModal = () => {
|
|
||||||
setShowConsumptionModal(true);
|
|
||||||
handleFetchHeader();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 处理点击授权按钮
|
|
||||||
const handleAuthorize = () => {
|
|
||||||
if (selectedRowKeys.length === 0) {
|
|
||||||
message.warning('请先选择需要授权的记录');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setLoading(true);
|
|
||||||
// 模拟授权操作
|
|
||||||
setTimeout(() => {
|
|
||||||
setAuthorizations(prev =>
|
|
||||||
prev.map(item =>
|
|
||||||
selectedRowKeys.includes(item.id) ? { ...item, status: 'active' } : item
|
|
||||||
)
|
|
||||||
);
|
|
||||||
setSelectedRowKeys([]);
|
|
||||||
setLoading(false);
|
|
||||||
message.success(`成功授权 ${selectedRowKeys.length} 条记录`);
|
|
||||||
}, 800);
|
|
||||||
};
|
|
||||||
|
|
||||||
const tableData = authorizations.map((item, index) => ({
|
const tableData = authorizations.map((item, index) => ({
|
||||||
...item,
|
...item,
|
||||||
index: index + 1,
|
index: index + 1,
|
||||||
key: item.id,
|
key: item.id,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const consumptionTableData = consumptionRecords.map((item, index) => ({
|
|
||||||
...item,
|
|
||||||
index: index + 1,
|
|
||||||
key: item.id,
|
|
||||||
}));
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ padding: 24, minHeight: '94vh', background: '#f8fafc' }}>
|
<div style={{ padding: 24, minHeight: '94vh', background: '#f8fafc' }}>
|
||||||
{/* 页面标题 */}
|
{/* 页面标题 */}
|
||||||
@@ -259,7 +169,6 @@ const AuthorizationPage: React.FC = () => {
|
|||||||
<h1 style={{ fontSize: 24, fontWeight: 600, color: '#1e293b', marginBottom: 8 }}>
|
<h1 style={{ fontSize: 24, fontWeight: 600, color: '#1e293b', marginBottom: 8 }}>
|
||||||
授权管理
|
授权管理
|
||||||
</h1>
|
</h1>
|
||||||
{/* <p style={{ color: '#64748b' }}>管理系统授权信息，查看和操作授权状态</p> */}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 操作栏 */}
|
{/* 操作栏 */}
|
||||||
@@ -270,7 +179,6 @@ const AuthorizationPage: React.FC = () => {
|
|||||||
icon={<PlusOutlined />}
|
icon={<PlusOutlined />}
|
||||||
onClick={handleAuthorize}
|
onClick={handleAuthorize}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
// disabled={selectedRowKeys.length === 0}
|
|
||||||
style={{
|
style={{
|
||||||
height: 40,
|
height: 40,
|
||||||
padding: '0 24px',
|
padding: '0 24px',
|
||||||
@@ -300,37 +208,6 @@ const AuthorizationPage: React.FC = () => {
|
|||||||
scroll={{ x: 'max-content' }}
|
scroll={{ x: 'max-content' }}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 底部提示 */}
|
|
||||||
{/* <div style={{ marginTop: 16, textAlign: 'center', color: '#94a3b8', fontSize: 13 }}>
|
|
||||||
提示：勾选记录后点击"点击授权"按钮可批量授权
|
|
||||||
</div> */}
|
|
||||||
|
|
||||||
{/* 消耗记录弹窗 */}
|
|
||||||
<Modal
|
|
||||||
title="消耗记录"
|
|
||||||
open={showConsumptionModal}
|
|
||||||
onCancel={() => setShowConsumptionModal(false)}
|
|
||||||
footer={null}
|
|
||||||
width={800}
|
|
||||||
destroyOnClose={true}
|
|
||||||
>
|
|
||||||
<div style={{ padding: 16 }}>
|
|
||||||
<Table
|
|
||||||
dataSource={consumptionTableData}
|
|
||||||
columns={consumptionColumns}
|
|
||||||
loading={headerLoading}
|
|
||||||
pagination={{
|
|
||||||
pageSize: 10,
|
|
||||||
showSizeChanger: true,
|
|
||||||
showTotal: (total) => `共 ${total} 条记录`,
|
|
||||||
}}
|
|
||||||
rowKey="id"
|
|
||||||
bordered={false}
|
|
||||||
scroll={{ x: 'max-content' }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -0,0 +1,120 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Table, Tag, Button, message } from 'antd';
|
||||||
|
import { ArrowLeftOutlined } from '@ant-design/icons';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
|
||||||
|
// 消耗记录数据类型
|
||||||
|
interface ConsumptionRecord {
|
||||||
|
id: string;
|
||||||
|
authorizationId: string;
|
||||||
|
amount: number;
|
||||||
|
type: string;
|
||||||
|
description: string;
|
||||||
|
createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 模拟消耗记录数据
|
||||||
|
const mockConsumptionRecords: ConsumptionRecord[] = [
|
||||||
|
{ id: 'C001', authorizationId: '1867060028363785', amount: 100, type: 'video', description: '视频生成消耗', createdAt: '2024-01-15 10:30:00' },
|
||||||
|
{ id: 'C002', authorizationId: '1867060028363785', amount: 50, type: 'audio', description: '音频转换消耗', createdAt: '2024-01-15 11:20:00' },
|
||||||
|
{ id: 'C003', authorizationId: '1867059808785418', amount: 200, type: 'video', description: '视频生成消耗', createdAt: '2024-01-14 14:45:00' },
|
||||||
|
{ id: 'C004', authorizationId: '1867060028363785', amount: 75, type: 'image', description: '图片处理消耗', createdAt: '2024-01-14 09:15:00' },
|
||||||
|
{ id: 'C005', authorizationId: '1867059757929740', amount: 150, type: 'video', description: '视频生成消耗', createdAt: '2024-01-13 16:00:00' },
|
||||||
|
];
|
||||||
|
|
||||||
|
// 消耗类型配置
|
||||||
|
const consumptionTypeConfig = {
|
||||||
|
video: { label: '视频生成', color: 'blue' },
|
||||||
|
audio: { label: '音频转换', color: 'purple' },
|
||||||
|
image: { label: '图片处理', color: 'green' },
|
||||||
|
};
|
||||||
|
|
||||||
|
// 表头配置
|
||||||
|
const columns = [
|
||||||
|
{ title: '序号', dataIndex: 'index', key: 'index', width: 80, fixed: 'left', render: (text: number) => <span style={{ color: '#94a3b8' }}>{text}</span> },
|
||||||
|
{ title: '消耗ID', dataIndex: 'id', key: 'id', ellipsis: true, render: (text: string) => <span style={{ fontWeight: 500, color: '#1e293b' }}>{text}</span> },
|
||||||
|
{ title: '授权ID', dataIndex: 'authorizationId', key: 'authorizationId', ellipsis: true },
|
||||||
|
{
|
||||||
|
title: '消耗类型',
|
||||||
|
dataIndex: 'type',
|
||||||
|
key: 'type',
|
||||||
|
width: 120,
|
||||||
|
render: (text: string) => {
|
||||||
|
const config = consumptionTypeConfig[text as keyof typeof consumptionTypeConfig];
|
||||||
|
return <Tag color={config?.color}>{config?.label}</Tag>;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '消耗金额',
|
||||||
|
dataIndex: 'amount',
|
||||||
|
key: 'amount',
|
||||||
|
width: 120,
|
||||||
|
render: (text: number) => <span style={{ color: '#ef4444', fontWeight: 500 }}>{text} 元</span>
|
||||||
|
},
|
||||||
|
{ title: '消耗描述', dataIndex: 'description', key: 'description', ellipsis: true },
|
||||||
|
{ title: '消耗时间', dataIndex: 'createdAt', key: 'createdAt', width: 160, fixed: 'right' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const ConsumePage: React.FC = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [consumptionRecords, setConsumptionRecords] = useState<ConsumptionRecord[]>(mockConsumptionRecords);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setLoading(true);
|
||||||
|
// 模拟异步获取数据
|
||||||
|
setTimeout(() => {
|
||||||
|
setConsumptionRecords(mockConsumptionRecords);
|
||||||
|
setLoading(false);
|
||||||
|
}, 500);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const tableData = consumptionRecords.map((item, index) => ({
|
||||||
|
...item,
|
||||||
|
index: index + 1,
|
||||||
|
key: item.id,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const handleBack = () => {
|
||||||
|
navigate('/authorization');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ padding: 24, minHeight: '94vh', background: '#f8fafc' }}>
|
||||||
|
{/* 页面标题和返回按钮 */}
|
||||||
|
<div style={{ marginBottom: 20, display: 'flex', alignItems: 'center', gap: 16 }}>
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
icon={<ArrowLeftOutlined />}
|
||||||
|
onClick={handleBack}
|
||||||
|
style={{ padding: 0, color: '#6366f1', fontSize: 14 }}
|
||||||
|
>
|
||||||
|
返回
|
||||||
|
</Button>
|
||||||
|
<h1 style={{ fontSize: 24, fontWeight: 600, color: '#1e293b', marginBottom: 8 }}>
|
||||||
|
消耗记录
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 表格 */}
|
||||||
|
<div style={{ background: '#fff', borderRadius: 12, boxShadow: '0 1px 3px rgba(0,0,0,0.05)' }}>
|
||||||
|
<Table
|
||||||
|
dataSource={tableData}
|
||||||
|
columns={columns}
|
||||||
|
loading={loading}
|
||||||
|
pagination={{
|
||||||
|
pageSize: 10,
|
||||||
|
showSizeChanger: true,
|
||||||
|
showTotal: (total) => `共 ${total} 条记录`,
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
bordered={false}
|
||||||
|
style={{ padding: 16 }}
|
||||||
|
scroll={{ x: 'max-content' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ConsumePage;
|
||||||
Reference in New Issue
Block a user