消耗列表新增文件和路由配置
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" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<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>
|
||||
<body>
|
||||
<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 AuthorizationPage from './pages/AuthorizationPage';
|
||||
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="generated" element={<GeneratedRecord />} />
|
||||
<Route path="authorization" element={<AuthorizationPage />} />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<Route path="consume" element={<ConsumePage />} />
|
||||
</Route>
|
||||
<Route path="*" element={<Navigate to="/projects" replace />} />
|
||||
</Routes>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import React, { useEffect, useState, useLayoutEffect, useRef, useCallback } from 'react';
|
||||
import { Button, Table, Checkbox, Tag, Space, message, Modal } from 'antd';
|
||||
import { PlusOutlined, CheckCircleOutlined, ClockCircleOutlined, CiCircleOutlined, EyeOutlined, XOutlined } from '@ant-design/icons';
|
||||
import type { OAuthAppParam } from '../api/index';
|
||||
import { getAuthorizationList } from '../api/index';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Button, Table, Tag, message } from 'antd';
|
||||
import { PlusOutlined, CheckCircleOutlined, ClockCircleOutlined, CiCircleOutlined } from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
// 授权数据类型
|
||||
interface AuthorizationData {
|
||||
@@ -19,67 +18,52 @@ const statusConfig = {
|
||||
revoked: { label: '已撤销', color: 'gray', icon: CiCircleOutlined },
|
||||
};
|
||||
|
||||
// 模拟消耗记录数据
|
||||
const mockConsumptionRecords = [
|
||||
{ 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' },
|
||||
];
|
||||
interface ApiResponse {
|
||||
code: number;
|
||||
message: string;
|
||||
data: AuthorizationData[];
|
||||
}
|
||||
|
||||
// 消耗类型配置
|
||||
const consumptionTypeConfig = {
|
||||
video: { label: '视频生成', color: 'blue' },
|
||||
audio: { label: '音频转换', color: 'purple' },
|
||||
image: { label: '图片处理', color: 'green' },
|
||||
};
|
||||
|
||||
// 模拟表头接口返回数据
|
||||
const mockTableHeaderResponse = {
|
||||
// 模拟授权列表接口
|
||||
const mockApiResponse: ApiResponse = {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: [
|
||||
{ title: '序号', dataIndex: 'index', key: 'index', width: 80, fixed: 'left' },
|
||||
{ title: '消耗ID', dataIndex: 'id', key: 'id', ellipsis: true },
|
||||
{ title: '授权ID', dataIndex: 'authorizationId', key: 'authorizationId', ellipsis: true },
|
||||
{ title: '消耗类型', dataIndex: 'type', key: 'type', width: 120 },
|
||||
{ title: '消耗金额', dataIndex: 'amount', key: 'amount', width: 120 },
|
||||
{ title: '消耗描述', dataIndex: 'description', key: 'description', ellipsis: true },
|
||||
{ title: '消耗时间', dataIndex: 'createdAt', key: 'createdAt', width: 160, fixed: 'right' },
|
||||
{ id: '1867060028363785', status: 'active', description: '用户张三的API授权' },
|
||||
{ id: '1867059757929740', status: 'pending', description: '用户李四的API授权' },
|
||||
{ id: '1867059808785418', status: 'active', description: '用户王五的API授权' },
|
||||
{ id: '1867060028363786', status: 'expired', description: '用户赵六的API授权' },
|
||||
{ id: '1867060028363787', status: 'revoked', description: '用户钱七的API授权' },
|
||||
],
|
||||
};
|
||||
|
||||
// 模拟获取表头接口
|
||||
const fetchTableHeader = () => {
|
||||
return new Promise<typeof mockTableHeaderResponse>((resolve) => {
|
||||
// 模拟调用接口 /api/admin/user-oauth-apps/list
|
||||
const fetchAuthorizationList = async (): Promise<ApiResponse> => {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(mockTableHeaderResponse);
|
||||
}, 500);
|
||||
resolve(mockApiResponse);
|
||||
}, 800);
|
||||
});
|
||||
};
|
||||
|
||||
const AuthorizationPage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [authorizations, setAuthorizations] = useState<AuthorizationData[]>([]);
|
||||
const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
|
||||
const [loading, setLoading] = 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(() => {
|
||||
const loadData = async () => {
|
||||
setListLoading(true);
|
||||
try {
|
||||
const params: OAuthAppParam = {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
};
|
||||
const response = await getAuthorizationList(params);
|
||||
setAuthorizations(response.data || []);
|
||||
const response = await fetchAuthorizationList();
|
||||
if (response.code === 200) {
|
||||
setAuthorizations(response.data);
|
||||
} else {
|
||||
message.error(response.message);
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('获取授权列表失败');
|
||||
} 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 = [
|
||||
// {
|
||||
// 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: '序号',
|
||||
dataIndex: 'index',
|
||||
@@ -155,10 +146,9 @@ const AuthorizationPage: React.FC = () => {
|
||||
size="small"
|
||||
style={{
|
||||
borderRadius: 8,
|
||||
// background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
|
||||
border: 'none',
|
||||
}}
|
||||
onClick={handleOpenConsumptionModal}
|
||||
onClick={handleGoToConsume}
|
||||
>
|
||||
查看消耗
|
||||
</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) => ({
|
||||
...item,
|
||||
index: index + 1,
|
||||
key: item.id,
|
||||
}));
|
||||
|
||||
const consumptionTableData = consumptionRecords.map((item, index) => ({
|
||||
...item,
|
||||
index: index + 1,
|
||||
key: item.id,
|
||||
}));
|
||||
|
||||
return (
|
||||
<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>
|
||||
{/* <p style={{ color: '#64748b' }}>管理系统授权信息，查看和操作授权状态</p> */}
|
||||
</div>
|
||||
|
||||
{/* 操作栏 */}
|
||||
@@ -270,7 +179,6 @@ const AuthorizationPage: React.FC = () => {
|
||||
icon={<PlusOutlined />}
|
||||
onClick={handleAuthorize}
|
||||
loading={loading}
|
||||
// disabled={selectedRowKeys.length === 0}
|
||||
style={{
|
||||
height: 40,
|
||||
padding: '0 24px',
|
||||
@@ -300,37 +208,6 @@ const AuthorizationPage: React.FC = () => {
|
||||
scroll={{ x: 'max-content' }}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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