+
+
+
+ 授权管理
+
+ }
+ onClick={handleAuthorize}
+ loading={loading}
+ style={{
+ borderRadius: 8,
+ fontSize: 14,
+ fontWeight: 500,
+ }}
+ >
+ 点击授权
+
+
+
+ setSearchParams(prev => ({ ...prev, account_userid: e.target.value }))}
+ style={{ width: 180 }}
+ onPressEnter={() => { setCurrentPage(1); loadOAuthList(1, pageSize); }}
+ />
+
+ `共 ${t} 条记录`,
+ onChange: (page, size) => {
+ setCurrentPage(page);
+ setPageSize(size);
+ loadOAuthList(page, size);
+ },
+ size: 'small',
+ }}
+ />
+
+
+ {
+ setShowModal(false);
+ setSelectedOpenType(undefined);
+ }}
+ okText="确认授权"
+ cancelText="取消"
+ confirmLoading={loading}
+ >
+
+
+ );
+};
+
+export default AuthorizationPage;
\ No newline at end of file
diff --git a/video-gen-admin/src/pages/AdminConsume.tsx b/video-gen-admin/src/pages/AdminConsume.tsx
new file mode 100644
index 00000000..c7593f02
--- /dev/null
+++ b/video-gen-admin/src/pages/AdminConsume.tsx
@@ -0,0 +1,267 @@
+import React, { useState, useEffect } from 'react';
+import { Card, Space, Table, Button, Typography, Modal, Checkbox, Input, message } from 'antd';
+import { ArrowLeftOutlined, DollarOutlined, SettingOutlined } from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+
+// 表头字段模拟数据
+const mockColumnsData = [
+ { name: 'id', description: 'id' },
+ { name: 'star_id', description: '星图ID' },
+ { name: 'demand_id', description: '任务ID' },
+ { name: 'demand_name', description: '任务名称' },
+ { name: 'demander_name', description: '客户名称' },
+ { name: 'brand', description: '品牌' },
+ { name: 'max_publish_count', description: '最大发布数量' },
+ { name: 'product_name', description: '产品名称' },
+ { name: 'product_information', description: '产品信息' },
+];
+
+interface ConsumptionRecord {
+ id: string;
+ star_id?: string;
+ demand_id?: string;
+ demand_name?: string;
+ demander_name?: string;
+ brand?: string;
+ max_publish_count?: number;
+ product_name?: string;
+ product_information?: string;
+}
+
+const mockConsumptionRecords: ConsumptionRecord[] = [
+ { id: 'C001', star_id: 'ST001', demand_id: 'DM001', demand_name: '产品推广任务', demander_name: 'XX品牌方', brand: 'XX品牌', max_publish_count: 10, product_name: 'XX产品', product_information: '产品信息描述' },
+ { id: 'C002', star_id: 'ST002', demand_id: 'DM002', demand_name: '新品发布任务', demander_name: 'YY品牌方', brand: 'YY品牌', max_publish_count: 5, product_name: 'YY产品', product_information: '新品信息描述' },
+ { id: 'C003', star_id: 'ST003', demand_id: 'DM003', demand_name: '品牌宣传任务', demander_name: 'ZZ品牌方', brand: 'ZZ品牌', max_publish_count: 8, product_name: 'ZZ产品', product_information: '品牌信息描述' },
+ { id: 'C004', star_id: 'ST001', demand_id: 'DM004', demand_name: '活动促销任务', demander_name: 'XX品牌方', brand: 'XX品牌', max_publish_count: 15, product_name: 'XX活动产品', product_information: '活动产品信息' },
+ { id: 'C005', star_id: 'ST004', demand_id: 'DM005', demand_name: '节日营销任务', demander_name: 'AA品牌方', brand: 'AA品牌', max_publish_count: 20, product_name: 'AA节日产品', product_information: '节日产品信息' },
+];
+
+const ConsumePage: React.FC = () => {
+ const navigate = useNavigate();
+ const [consumptionRecords, setConsumptionRecords] = useState(mockConsumptionRecords);
+ const [loading, setLoading] = useState(false);
+ const [showModal, setShowModal] = useState(false);
+ const [columnsData, setColumnsData] = useState<{ name: string; description: string }[]>([]);
+ const [selectedColumns, setSelectedColumns] = useState([]);
+ const [searchText, setSearchText] = useState('');
+
+ useEffect(() => {
+ setLoading(true);
+ setTimeout(() => {
+ setConsumptionRecords(mockConsumptionRecords);
+ setLoading(false);
+ }, 500);
+
+ setTimeout(() => {
+ setColumnsData(mockColumnsData);
+ const saved = localStorage.getItem('consumeColumns');
+ if (saved) {
+ setSelectedColumns(JSON.parse(saved));
+ } else {
+ setSelectedColumns(mockColumnsData.map(item => item.name));
+ }
+ }, 300);
+ }, []);
+
+ const tableData = consumptionRecords.map((item, index) => ({
+ ...item,
+ index: index + 1,
+ key: item.id,
+ }));
+
+ const handleBack = () => {
+ navigate('/authorization');
+ };
+
+ const dynamicColumns = columnsData
+ .filter(col => selectedColumns.includes(col.name))
+ .map(col => ({
+ title: col.description,
+ dataIndex: col.name,
+ key: col.name,
+ ellipsis: true,
+ }));
+
+ return (
+
+
+
+
+
+ 消耗记录
+
+
+ } onClick={() => setShowModal(true)}>自定义表头
+ } onClick={handleBack}>返回
+
+
+ `共 ${t} 条记录`,
+ size: 'small',
+ }}
+ />
+
+
+ {
+ localStorage.setItem('consumeColumns', JSON.stringify(selectedColumns));
+ message.success('表头设置已保存');
+ setShowModal(false);
+ }}
+ onCancel={() => {
+ setShowModal(false);
+ setSearchText('');
+ }}
+ okText="确定"
+ cancelText="取消"
+ width={800}
+ bodyStyle={{ padding: 16 }}
+ >
+
+
+
setSearchText(e.target.value)}
+ style={{ marginBottom: 8 }}
+ />
+
+ 输入指标名称进行搜索
+
+
+
+ 任务详情指标
+
+
0}
+ indeterminate={selectedColumns.length > 0 && selectedColumns.length < columnsData.length}
+ onChange={(e) => {
+ if (e.target.checked) {
+ setSelectedColumns(columnsData.map(item => item.name));
+ } else {
+ setSelectedColumns([]);
+ }
+ }}
+ style={{ marginBottom: 12 }}
+ >
+ 全选
+
+
+ {columnsData
+ .filter(item =>
+ item.description.toLowerCase().includes(searchText.toLowerCase()) ||
+ item.name.toLowerCase().includes(searchText.toLowerCase())
+ )
+ .map(item => (
+ {
+ if (e.target.checked) {
+ setSelectedColumns(prev => [...prev, item.name]);
+ } else {
+ setSelectedColumns(prev => prev.filter(col => col !== item.name));
+ }
+ }}
+ >
+ {item.description}
+
+ ))}
+
+
+
+
+
+
+ 已添加({selectedColumns.length})
+
+
+
+
+
+
+
+ {selectedColumns.length === 0 ? (
+
+ 暂无已选指标
+
+ ) : (
+
+ {selectedColumns.map((colName, index) => {
+ const col = columnsData.find(c => c.name === colName);
+ return (
+
{
+ e.dataTransfer.setData('index', String(index));
+ }}
+ onDragOver={(e) => {
+ e.preventDefault();
+ }}
+ onDrop={(e) => {
+ const fromIndex = parseInt(e.dataTransfer.getData('index'));
+ const toIndex = index;
+ if (fromIndex !== toIndex) {
+ const newSelected = [...selectedColumns];
+ const [removed] = newSelected.splice(fromIndex, 1);
+ newSelected.splice(toIndex, 0, removed);
+ setSelectedColumns(newSelected);
+ }
+ }}
+ >
+ {col?.description || colName}
+
+ {index + 1}
+
+
+ );
+ })}
+
+ )}
+
+
+
+
+
+
+
+ 平台管理
+
+
+ } onClick={() => setShowModal(true)}>新增
+ } onClick={() => load()}>刷新
+
+
+ `共 ${t} 条记录`,
+ onChange: (p) => { setPage(p); load(p); },
+ }}
+ scroll={{ x: 800 }}
+ />
+
+
+ {
+ message.success('新增成功');
+ setShowModal(false);
+ setFormData({ title: '', description: '', image: '' });
+ load();
+ }}
+ onCancel={() => {
+ setShowModal(false);
+ setFormData({ title: '', description: '', image: '' });
+ }}
+ okText="确认"
+ cancelText="取消"
+ >
+
+
+ 标题
+ setFormData(prev => ({ ...prev, title: e.target.value }))}
+ />
+
+
+ 描述
+ setFormData(prev => ({ ...prev, description: e.target.value }))}
+ rows={4}
+ />
+
+
+
封面图片
+
{
+ if (info.file.status === 'done') {
+ setFormData(prev => ({ ...prev, image: info.file.response?.url || '' }));
+ }
+ }}
+ >
+
+
+
+
- {/* Header */}
- {/*
-
- 生成历史
-
-
- 查看所有生成的视频和图片记录
-
-
*/}
-
{/* 操作栏：筛选 + 上传按钮 */}
{
>
批量上传
+
)}
+
媒体类型：
+
+
- )}
-
+
+
handleDateChange(dateString || '')}
+ format="YYYY-MM-DD"
+ style={{ width: 160, borderRadius: 8, border: '1px solid #e2e8f0' }}
+ placeholder="选择日期"
+ />
+ {selectedDate && (
+
+ )}
+
+
- {/* 上传区域 */}
-
false} // 手动控制上传
- accept="image/*,video/*"
- listType="picture-card"
- onRemove={handleRemoveFile}
- >
-
-
-
- {/* 上传列表和进度 */}
- {uploadFiles.length > 0 && (
-
-
- 已选择 {uploadFiles.length} 个文件
-
-
- {uploadFiles.map((file) => (
-
-
- {file.type?.startsWith('image/') ? (
-
- ) : file.type?.startsWith('video/') ? (
-
- ) : (
-
- )}
-
-
-
- {file.name}
-
- {uploadProgress[file.uid] !== undefined && (
-
- )}
-
-
}
- onClick={() => handleRemoveFile(file)}
- style={{
- background: 'transparent',
- border: 'none',
- color: '#999',
- }}
- />
-
- ))}
-
-
- )}
-
- {/* 操作按钮 */}
-
-
-
-
-
- 选择授权账户（可多选）
+ 选择授权账户
-