mz/video-gen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

团队管理设置merge

Browse Source
This commit is contained in:
GinHa
2026-06-30 11:39:05 +08:00
parent 9fb81dcfc1 195c809915
commit 37203cdbaf
27 changed files with 791 additions and 2522 deletions
Download Patch File Download Diff File Expand all files Collapse all files
video-gen-admin/dist/assets/index-kyc_zxIX.js → video-gen-admin/dist/assets/index-Ba2VoaZw.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
video-gen-admin/dist/index.html
Vendored
+1 -1
View File
@@ -28,7 +28,7 @@
}
})();
</script>
<script type="module" crossorigin src="/assets/index-kyc_zxIX.js"></script>
<script type="module" crossorigin src="/assets/index-Ba2VoaZw.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-D7ShJUt4.css">
</head>
<body>
video-gen-admin/src/App.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import AdminAuthoriz from './pages/AdminAuthoriz';
import AdminConsume from './pages/AdminConsume';
import AdminLoginPage from './pages/AdminLoginPage';
import AdminDashboard from './pages/AdminDashboard';
import AdminPlatform from './pages/Adminplatform';
import AdminPlatform from './pages/AdminPlatform';
import AdminUsers from './pages/AdminUsers';
import AdminTeams from './pages/AdminTeams';
import AdminModels from './pages/AdminModels';
video-gen-admin/src/pages/Adminplatform.tsx → video-gen-admin/src/pages/AdminPlatform.tsx
View File
video-gen-admin/src/pages/AdminUsers.tsx
+2 -2
View File
@@ -476,7 +476,7 @@ const AdminUsers: React.FC = () => {
return (
<div>
<Card variant="outlined" style={{ borderRadius: 12, border: '1px solid #f0f0f5', marginBottom: 16 }}>
{/* <Card variant="outlined" style={{ borderRadius: 12, border: '1px solid #f0f0f5', marginBottom: 16 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
<div style={{
width: 44, height: 44, borderRadius: 10,
@@ -528,7 +528,7 @@ const AdminUsers: React.FC = () => {
</Button>
</div>
</Form>
</Card>
</Card> */}
<Card variant="outlined" style={{ borderRadius: 12, border: '1px solid #f0f0f5' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
video-gen-admin/tsconfig.tsbuildinfo
+1 -1
View File
@@ -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/adminauthoriz.tsx","./src/pages/adminconsume.tsx","./src/pages/admincontactrequests.tsx","./src/pages/admincreditratios.tsx","./src/pages/admincreditrecords.tsx","./src/pages/admindashboard.tsx","./src/pages/admingenerationairecords.tsx","./src/pages/admingenerationrecords.tsx","./src/pages/adminhotopeningreplicationdetail.tsx","./src/pages/adminhotopeningreplications.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/adminreplicationprojectdetail.tsx","./src/pages/adminsettings.tsx","./src/pages/adminshotreplications.tsx","./src/pages/adminshottasksetdetail.tsx","./src/pages/adminteams.tsx","./src/pages/adminusers.tsx","./src/pages/adminvideoengines.tsx","./src/pages/adminvideopromptschemaconfig.tsx","./src/pages/adminplatform.tsx","./src/pages/adminreplication/components/jsoncollapse.tsx","./src/pages/adminreplication/components/mediapreview.tsx","./src/pages/adminreplication/components/statustag.tsx","./src/pages/adminreplication/components/videopromptschemaviewer.tsx","./src/store/index.ts","./src/types/index.ts","./src/types/xlsx-js-style.d.ts","./src/utils/excelexport.ts","./src/utils/formatdate.ts","./src/utils/videopromptschema.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/adminauthoriz.tsx","./src/pages/adminconsume.tsx","./src/pages/admincontactrequests.tsx","./src/pages/admincreditratios.tsx","./src/pages/admincreditrecords.tsx","./src/pages/admindashboard.tsx","./src/pages/admingenerationairecords.tsx","./src/pages/admingenerationrecords.tsx","./src/pages/adminhotopeningreplicationdetail.tsx","./src/pages/adminhotopeningreplications.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/adminplatform.tsx","./src/pages/adminrechargepackages.tsx","./src/pages/adminreplicationprojectdetail.tsx","./src/pages/adminsettings.tsx","./src/pages/adminshotreplications.tsx","./src/pages/adminshottasksetdetail.tsx","./src/pages/adminteams.tsx","./src/pages/adminusers.tsx","./src/pages/adminvideoengines.tsx","./src/pages/adminvideopromptschemaconfig.tsx","./src/pages/adminreplication/components/jsoncollapse.tsx","./src/pages/adminreplication/components/mediapreview.tsx","./src/pages/adminreplication/components/statustag.tsx","./src/pages/adminreplication/components/videopromptschemaviewer.tsx","./src/store/index.ts","./src/types/index.ts","./src/types/xlsx-js-style.d.ts","./src/utils/excelexport.ts","./src/utils/formatdate.ts","./src/utils/videopromptschema.ts"],"version":"6.0.3"}
video-gen-api/app/api/v1/user_oauth.py
+4
View File
@@ -147,6 +147,10 @@ async def oauth_list(
"open_type": oauth.open_type,
"port_type": oauth.port_type,
"appid": oauth.appid,
"access_token": oauth.access_token,
"access_token_expired": oauth.access_token_expired,
"refresh_token": oauth.refresh_token,
"refresh_token_expired": oauth.refresh_token_expired,
"material_auth_status": oauth.material_auth_status,
"created_at": oauth.created_at,
"updated_at": oauth.updated_at,
video-gen-api/app/schemas/user_oauth.py
+4
View File
@@ -26,6 +26,10 @@ class UserOAuthOut(BaseModel):
open_type: int = Field(..., description="开户方式（1=千川，2=广告，3=本地推，4=星图，5=快手代理商，6=巨量星图，7=巨量服务单，8=腾讯服务单，9=腾讯营销K2，10=腾讯营销K3）")
port_type: int = Field(..., description="平台端口（1=巨量，2=磁力，3=巨量星图，4=服务单，5=腾讯）")
appid: Optional[str] = Field(None, description="授权应用id")
access_token: Optional[str] = Field(None, description="授权token")
access_token_expired: Optional[datetime] = Field(None, description="token过期时间")
refresh_token: Optional[str] = Field(None, description="授权刷新token")
refresh_token_expired: Optional[datetime] = Field(None, description="刷新token过期时间")
material_auth_status: bool = Field(False, description="是否敏感物料授权")
created_at: datetime = Field(..., description="创建时间")
updated_at: datetime = Field(..., description="更新时间")
video-gen-app/dist/assets/index-smITgEEu.js → video-gen-app/dist/assets/index-BZEL1bMy.js
Vendored
+67 -67
View File
File diff suppressed because one or more lines are too long
video-gen-app/dist/index.html
Vendored
+36 -36
View File
@@ -1,37 +1,37 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<title>民众智创</title>
<script>
(function() {
var cached = localStorage.getItem('siteInfo');
if (cached) {
try {
var info = JSON.parse(cached);
if (info.siteName) {
document.title = info.siteName;
}
if (info.siteLogo) {
var link = document.querySelector('link[rel="icon"]');
if (link) {
link.href = info.siteLogo;
link.type = 'image/png';
}
}
} catch (e) {}
}
})();
</script>
<script type="module" crossorigin src="/assets/index-smITgEEu.js"></script>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<title>民众智创</title>
<script>
(function() {
var cached = localStorage.getItem('siteInfo');
if (cached) {
try {
var info = JSON.parse(cached);
if (info.siteName) {
document.title = info.siteName;
}
if (info.siteLogo) {
var link = document.querySelector('link[rel="icon"]');
if (link) {
link.href = info.siteLogo;
link.type = 'image/png';
}
}
} catch (e) {}
}
})();
</script>
<script type="module" crossorigin src="/assets/index-BZEL1bMy.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-D3IaMBsq.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
</head>
<body>
<div id="root"></div>␍
</body>
</html>
video-gen-app/src/App.tsx
+5
View File
@@ -2,6 +2,9 @@ import React, { useEffect } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { ConfigProvider, App as AntApp, Spin } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');
import AppLayout from './components/Layout/AppLayout';
import LoginPage from './pages/LoginPage';
import ProjectsPage from './pages/ProjectsPage';
@@ -19,6 +22,7 @@ import RemoveLens from './pages/RemoveLens';
import GeneratedRecord from './pages/GeneratedRecord';
import PreTest from './pages/PreTest';
import AuthorizationPage from './pages/AuthorizationPage';
import AuthAccountPage from './pages/AuthAccountPage';
import MaterialListPage from './pages/MaterialListPage';
import RemoveInfo from './pages/RemoveInfo';
import RemoveRw from './pages/RemoveRw';
@@ -118,6 +122,7 @@ const App = () => {
<Route path="materials" element={<MaterialListPage />} />
<Route path="consume" element={<ConsumePage />} />
<Route path="popular" element={<PopularPage />} />
<Route path="authacc" element={<AuthAccountPage />} />
<Route path="creativeplaza" element={<CreativePlazaPage />} />
</Route>
<Route path="*" element={<Navigate to="/projects" replace />} />
video-gen-app/src/api/index.ts
+1 -1
View File
@@ -743,4 +743,4 @@ export async function deleteOAuthAccount(params: DeleteOAuthAccountParams): Prom
// 获取用户全部授权账户列表
export async function getAllOAuthAccountList(): Promise<any> {
return api.post(`/upload-material/oauth_account_list`);
}
}
video-gen-app/src/pages/AuthAccountPage.tsx
+324
View File
@@ -0,0 +1,324 @@
import React, { useEffect, useState } from 'react';
import { Button, Table, Modal, App, Input, Pagination, Typography, Space } from 'antd';
import { LockOutlined, ArrowLeftOutlined } from '@ant-design/icons';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { getOAuthAccountList, deleteOAuthAccount, getOpenTypeAll } from '../api';
const formatDateTime = (dateStr: string) => {
if (!dateStr) return '';
const date = new Date(dateStr);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
interface AuthorizationData {
id: string;
status: string;
description: string;
account_userid?: string;
open_type?: number;
account_id?: string;
}
const AuthAccountPage: React.FC = () => {
const navigate = useNavigate();
const [searchParamsUrl] = useSearchParams();
const { message } = App.useApp();
const [authorizations, setAuthorizations] = useState<AuthorizationData[]>([]);
const [listLoading, setListLoading] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [total, setTotal] = useState(0);
const [searchParams, setSearchParams] = useState({
advertiser_id: '',
oauth_id: '',
advertiser_name: '',
});
const [openTypeMap, setOpenTypeMap] = useState<Record<number, string>>({});
useEffect(() => {
const oauthId = searchParamsUrl.get('oauth_id');
if (oauthId) {
setSearchParams(prev => ({ ...prev, oauth_id: oauthId }));
loadOAuthList(1, 10, { ...searchParams, oauth_id: oauthId });
} else {
loadOAuthList();
}
loadOpenTypeList();
}, []);
const loadOpenTypeList = async () => {
try {
const res = await getOpenTypeAll();
const data = res.data || [];
const map: Record<number, string> = {};
const options: { value: number; label: string }[] = [];
data.forEach(item => {
map[item.openType] = item.typeName;
options.push({ value: item.openType, label: item.typeName });
});
setOpenTypeMap(map);
} catch (error) {
console.error('加载开户方式列表失败:', error);
}
};
const loadOAuthList = async (page = 1, pageSize = 10, params = searchParams) => {
setListLoading(true);
try {
const response = await getOAuthAccountList({
advertiser_id: params.advertiser_id || '',
oauth_id: params.oauth_id || '',
advertiser_name: params.advertiser_name || '',
page,
page_size: pageSize,
});
if (response) {
if (response.data) {
setAuthorizations(response.data.data || response.data);
}
if (response.pagination) {
setTotal(response.pagination.total || 0);
setCurrentPage(response.pagination.page || 1);
setPageSize(response.pagination.pageSize || 10);
}
} else {
setAuthorizations(response || []);
}
} catch (error) {
message.error('获取授权列表失败');
} finally {
setListLoading(false);
}
};
const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
},
{
title: '广告主账户ID',
dataIndex: 'advertiserId',
key: 'advertiserId',
width: 160,
},
{
title: '广告主账户名称',
dataIndex: 'advertiserName',
key: 'advertiserName',
},
{
title: '广告主账户角色',
dataIndex: 'advertiserRole',
key: 'advertiserRole',
},
{
title: '授权账户ID',
dataIndex: 'accountId',
key: 'accountId',
width: 160,
},
{
title: '授权账户名称',
dataIndex: 'accountName',
key: 'accountName',
},
{
title: '授权账户角色',
dataIndex: 'accountRole',
key: 'accountRole',
render: (role: string) => {
const roleMap: Record<string, string> = {
ADVERTISER: '客户',
CUSTOMER_ADMIN: '普通版工作台-管理员',
CUSTOMER_OPERATOR: '普通版工作台-协作者',
AGENT: '代理商',
CHILD_AGENT: '二级代理商',
PLATFORM_ROLE_STAR: '星图账户',
PLATFORM_ROLE_SHOP_ACCOUNT: '抖音店铺账户',
PLATFORM_ROLE_QIANCHUAN_AGENT: '千川代理商',
PLATFORM_ROLE_STAR_AGENT: '星图代理商',
PLATFORM_ROLE_AWEME: '抖音号',
PLATFORM_ROLE_STAR_MCN: '星图MCN机构',
PLATFORM_ROLE_STAR_ISV: '星图服务商',
AGENT_SYSTEM_ACCOUNT: '代理商系统账户',
PLATFORM_ROLE_LOCAL_AGENT: '本地推代理商',
PLATFORM_ROLE_YUNTU_BRAND_ISV_ADMIN: '云图品牌服务商管理员',
PLATFORM_ROLE_LIFE: '抖音来客账户',
PLATFORM_ROLE_ENTERPRISE_BP_ADMIN: '升级版工作台管理员',
PLATFORM_ROLE_ENTERPRISE_BP_OPERATOR: '升级版工作台协作者',
};
return roleMap[role] || role;
},
},
{
title: '授权账户登录账号ID',
dataIndex: 'accountUserid',
key: 'accountUserid',
},
{
title: '授权账户登录账号名称',
dataIndex: 'accountUsername',
key: 'accountUsername',
},
{
title: '授权ID',
dataIndex: 'oauthId',
key: 'oauthId',
},
{
title: '开户方式',
dataIndex: 'openType',
key: 'openType',
render: (text: number) => <span style={{ color: '#1e293b' }}>{openTypeMap[text] || text}</span>,
},
{
title: '创建时间',
dataIndex: 'createdAt',
key: 'createdAt',
width: 160,
render: (text: string) => <span style={{ color: '#64748b' }}>{formatDateTime(text)}</span>,
},
{
title: '操作',
fixed: 'right' as const,
dataIndex: 'action',
key: 'action',
render: (_: string, record: AuthorizationData) => (
<Space>
<Button
size="small"
danger
onClick={() => {
Modal.confirm({
title: '确认删除',
content: '确定要删除该授权账户吗？',
okText: '确定',
cancelText: '取消',
onOk: async () => {
try {
await deleteOAuthAccount({ id: record.id });
message.success('删除成功');
loadOAuthList(currentPage, pageSize);
} catch (error) {
message.error('删除失败');
}
},
});
}}
>
删除
</Button>
</Space>
),
},
];
const handleBack = () => {
const referrer = document.referrer;
if (referrer.includes(window.location.origin)) {
navigate(-1);
} else {
navigate('/authorization');
}
};
const tableData = authorizations.map((item, index) => ({
...item,
index: index + 1,
key: item.id,
}));
return (
<div style={{ minHeight: '94vh' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
<Button type="text" icon={<ArrowLeftOutlined />} onClick={handleBack} />
<LockOutlined style={{ color: '#6366f1', fontSize: 16 }} />
<Typography.Text strong style={{ fontSize: 16 }}>授权管理</Typography.Text>
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, marginBottom: 16 }}>
<div style={{ display: 'flex', gap: 12 }}>
<Input
placeholder="广告主账户ID"
value={searchParams.advertiser_id}
onChange={(e) => setSearchParams(prev => ({ ...prev, advertiser_id: e.target.value }))}
style={{ width: 180 }}
allowClear={true}
onPressEnter={() => { setCurrentPage(1); loadOAuthList(1, pageSize); }}
/>
<Input
placeholder="授权ID"
value={searchParams.oauth_id}
onChange={(e) => setSearchParams(prev => ({ ...prev, oauth_id: e.target.value }))}
style={{ width: 180 }}
allowClear={true}
onPressEnter={() => { setCurrentPage(1); loadOAuthList(1, pageSize); }}
/>
<Input
placeholder="广告主账户名称"
value={searchParams.advertiser_name}
onChange={(e) => setSearchParams(prev => ({ ...prev, advertiser_name: e.target.value }))}
style={{ width: 180 }}
allowClear={true}
onPressEnter={() => { setCurrentPage(1); loadOAuthList(1, pageSize); }}
/>
<Button
type="primary"
size="medium"
onClick={() => { setCurrentPage(1); loadOAuthList(1, pageSize); }}
>
搜索
</Button>
<Button
size="medium"
onClick={() => {
setSearchParams({ advertiser_id: '', oauth_id: '', advertiser_name: '' });
setCurrentPage(1);
loadOAuthList(1, pageSize);
}}
>
重置
</Button>
</div>
</div>
<div style={{ background: '#fff', borderRadius: 12, boxShadow: '0 1px 3px rgba(0,0,0,0.05)' }}>
<Table
dataSource={tableData}
columns={columns}
loading={listLoading}
pagination={false}
rowKey="id"
bordered={false}
scroll={{ x: 'max-content' }}
/>
<div style={{ padding: '16px', textAlign: 'right' }}>
<Pagination
current={currentPage}
pageSize={pageSize}
total={total}
showSizeChanger
showTotal={(total) => `共 ${total} 条记录`}
onChange={(page, size) => {
setCurrentPage(page);
setPageSize(size);
loadOAuthList(page, size);
}}
size="small"
/>
</div>
</div>
</div>
);
};
export default AuthAccountPage;
video-gen-app/src/pages/AuthorizationPage.tsx
+54 -36
View File
@@ -1,5 +1,6 @@
import React, { useEffect, useState } from 'react';
import { Button, Table, Tag, Modal, Select, App, Input, Pagination, Typography, Space } from 'antd';
import { useNavigate } from 'react-router-dom';
import { PlusOutlined, LockOutlined } from '@ant-design/icons';
import { getOAuthList, requestOAuth, getOpenTypeAll } from '../api';
@@ -41,13 +42,23 @@ interface AuthorizationData {
id: string;
status: string;
description: string;
account_userid?: string;
open_type?: number;
account_id?: string;
advertiserId?: string;
advertiserName?: string;
accountRole?: string;
accountUserid?: string;
accountUsername?: string;
appid?: string;
materialAuthStatus?: boolean;
openType?: number;
portType?: number;
userId?: string;
createdAt?: string;
updatedAt?: string;
}
const AuthorizationPage: React.FC = () => {
const { message } = App.useApp();
const navigate = useNavigate();
const [authorizations, setAuthorizations] = useState<AuthorizationData[]>([]);
const [loading, setLoading] = useState(false);
const [listLoading, setListLoading] = useState(false);
@@ -143,6 +154,19 @@ const AuthorizationPage: React.FC = () => {
}
};
const handleReauthorize = async (record: AuthorizationData) => {
try {
const response = await requestOAuth({ open_type: record.openType });
if (response.authUrl) {
window.open(response.authUrl, '_blank');
} else {
message.error('获取授权链接失败');
}
} catch (error) {
message.error('重新授权失败');
}
};
const columns = [
{
title: 'ID',
@@ -151,13 +175,12 @@ const AuthorizationPage: React.FC = () => {
},
{
title: '授权账户ID',
dataIndex: 'advertiserId',
key: 'advertiserId',
width: 160,
dataIndex: 'accountId',
key: 'accountId',
},
{
title: '授权账户名称',
dataIndex: 'advertiserName',
dataIndex: 'accountName',
key: 'accountName',
},
{
@@ -200,9 +223,10 @@ const AuthorizationPage: React.FC = () => {
key: 'accountUsername',
},
{
title: '授权应用ID',
dataIndex: 'appid',
key: 'appid',
title: '开户方式',
dataIndex: 'openType',
key: 'openType',
render: (text: number) => <span style={{ color: '#1e293b' }}>{openTypeMap[text] || text}</span>,
},
{
title: '是否敏感物料授权',
@@ -216,27 +240,9 @@ const AuthorizationPage: React.FC = () => {
),
},
{
title: '开户方式',
dataIndex: 'openType',
key: 'openType',
render: (text: number) => <span style={{ color: '#1e293b' }}>{openTypeMap[text] || text}</span>,
},
{
title: '平台端口',
dataIndex: 'portType',
key: 'portType',
ellipsis: true,
render: (text: number) => <span style={{ color: '#1e293b' }}>{PORT_TYPE_MAP[text] || text}</span>,
},
{
title: '用户id',
dataIndex: 'userId',
key: 'userId',
},
{
title: '创建时间',
dataIndex: 'createdAt',
key: 'createdAt',
title: '授权有效时间',
dataIndex: 'refreshTokenExpired',
key: 'refreshTokenExpired',
width: 160,
render: (text: string) => <span style={{ color: '#64748b' }}>{formatDateTime(text)}</span>,
},
@@ -250,14 +256,26 @@ const AuthorizationPage: React.FC = () => {
{
title: '操作',
dataIndex: 'action',
fixed: 'right' as const,
key: 'action',
width: 140,
render: (text: string) => (
<Space>
<Button type="primary" size="small" >
width: 190,
render: (_: unknown, record) => (
<>
<Button
type="link"
onClick={() => navigate(`/authacc?oauth_id=${record.id}`)}
style={{ color: '#6366f1', padding: 0 }}
>
查看授权账户
</Button>
</Space>
<Button
type="link"
onClick={() => handleReauthorize(record)}
style={{ color: '#00c49f', padding: 0, marginLeft: 8 }}
>
重新授权
</Button>
</>
),
},
];
video-gen-app/src/pages/ConsumePage.tsx
+8 -3
View File
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { Table, Tag, Button, Pagination, Typography, Modal, Checkbox, Input, DatePicker, App } from 'antd';
import { Table, Button, Pagination, Typography, Modal, Checkbox, Input, DatePicker, App } from 'antd';
import { ArrowLeftOutlined, DollarOutlined, SettingOutlined, SyncOutlined } from '@ant-design/icons';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { getMaterialConsumpList, getMaterialConsumptionFields, syncMaterialConsumption } from '../api';
@@ -31,7 +31,7 @@ const ConsumePage: React.FC = () => {
const [searchText, setSearchText] = useState('');
const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [advertiserId, setAdvertiserId] = useState(searchParams.get('accountId') || '');
const [advertiserId, setAdvertiserId] = useState(searchParams.get('advertiserId') || '');
const [consumeDateRange, setConsumeDateRange] = useState<[string, string] | undefined>();
const [syncDate, setSyncDate] = useState<string>(dayjs().subtract(1, 'day').format('YYYY-MM-DD'));
const [syncAdvertiserId, setSyncAdvertiserId] = useState<string>('');
@@ -88,7 +88,12 @@ const ConsumePage: React.FC = () => {
}));
const handleBack = () => {
navigate('/authorization');
const referrer = document.referrer;
if (referrer.includes(window.location.origin)) {
navigate(-1);
} else {
navigate('/materials');
}
};
const handleSearch = () => {
video-gen-app/src/pages/GenerateConver.tsx
+27 -22
View File
@@ -951,31 +951,35 @@ const AIChatPage: React.FC = () => {
{/* 主内容区 */}
<Layout style={{ display: 'flex', flex: 1, background: 'transparent' }}>
{/* 头部 - 显示对话标题和模型信息 */}
<Header
style={{
borderRadius: '20px 20px 0 0',
background: 'rgba(255,255,255,0.1)',
backdropFilter: 'blur(20px)',
borderBottom: '1px solid rgba(99, 102, 241, 0.08)',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '0 24px',
}}
>
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<div style={{ width: 36, height: 36, borderRadius: 12, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<RobotOutlined style={{ fontSize: 18, color: '#fff' }} />
</div>
<div className="animate-fadeInUp" style={{
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
marginBottom: 24, padding: '16px 24px', borderRadius: 16,
background: 'rgba(255,255,255,0.6)',
backdropFilter: 'blur(10px)',
border: '1px solid rgba(99, 102, 241, 0.08)',
position: 'relative', overflow: 'hidden', flexWrap: 'wrap', gap: 12,
}}>
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #6366f1, #8b5cf6, transparent)', borderRadius: 1 }} />
<div>
<Text strong style={{ fontSize: 16, background: 'linear-gradient(90deg, #6366f1, #8b5cf6)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
开启创作
</Text>
{/* <div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, #6366f1, #8b5cf6)', borderRadius: 1, marginTop: 4 }} /> */}
<h2 style={{
margin: 0,
fontSize: 18,
fontWeight: 700,
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
backgroundClip: 'text'
}}>
AI创作
</h2>
<p style={{ fontSize: 13, color: '#64748b', margin: '4px 0 0 0' }}>
输入想法、剧本或上传参考，智能生成视频/图片
</p>
</div>
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #8b5cf6, #6366f1, transparent)', borderRadius: 1 }} />
</div>
</Header>
</div>
{/* 消息区域 */}
<Content
@@ -1285,6 +1289,7 @@ const AIChatPage: React.FC = () => {
borderRadius: 16, color: '#64748b' }}>{msg.genType === 'image' ? `${msg.imageProportion || ''} · ${msg.imagePx || ''} · ${msg.imageSize || ''}` : `${msg.duration || ''}s · ${msg.aspectRatio || ''} · ${msg.resolution || ''}`}</span>
<span style={{
// background: 'rgba(239, 68, 68, 0.08)',
fontSize: 14,
borderRadius: 16, color: '#ef4444', fontWeight: 500 }}>消耗积分：{msg.creditsCost}</span>
</div>
video-gen-app/src/pages/GeneratePage.tsx
+23 -35
View File
@@ -1416,56 +1416,43 @@ const GeneratePage: React.FC = () => {
justifyContent: "space-between",
alignItems: "center",
marginBottom: 24,
padding: "20px 28px",
padding: "16px 24px",
borderRadius: 16,
background: "linear-gradient(135deg, #1e1b4b 0%, #312e81 100%)",
position: "relative",
overflow: "hidden",
background: "rgba(255,255,255,0.6)",
backdropFilter: "blur(10px)",
border: "1px solid rgba(99, 102, 241, 0.08)",
}}
>
<div
style={{
position: "absolute",
right: -30,
bottom: -30,
width: 160,
height: 160,
borderRadius: "50%",
background: "rgba(255,255,255,0.05)",
}}
/>
<div
style={{
display: "flex",
alignItems: "center",
gap: 14,
position: "relative",
}}
>
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>
<Button
icon={<ArrowLeftOutlined />}
onClick={() => navigate("/projects")}
style={{
background: "rgba(255,255,255,0.1)",
border: "1px solid rgba(255,255,255,0.2)",
color: "#fff",
borderRadius: 10,
fontSize: 13,
height: 32,
background: "rgba(99, 102, 241, 0.1)",
border: "1px solid rgba(99, 102, 241, 0.2)",
color: "#6366f1",
}}
/>
>
返回
</Button>
<div style={{ width: 32, height: 2, background: "linear-gradient(90deg, transparent, #6366f1, #8b5cf6, transparent)", borderRadius: 1 }} />
<div>
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>
<Typography.Title
level={4}
style={{ margin: 0, color: "#fff", fontWeight: 700 }}
style={{ margin: 0, fontSize: 16, fontWeight: 700, background: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text" }}
>
{projectName}
</Typography.Title>
{project && (
<Tag
style={{
background: "rgba(255,255,255,0.12)",
border: "1px solid rgba(255,255,255,0.2)",
color: "rgba(255,255,255,0.8)",
background: "rgba(99, 102, 241, 0.08)",
border: "1px solid rgba(99, 102, 241, 0.15)",
color: "#6366f1",
borderRadius: 6,
}}
>
@@ -1474,17 +1461,18 @@ const GeneratePage: React.FC = () => {
)}
</div>
<Typography.Text
style={{ color: "rgba(255,255,255,0.5)", fontSize: 13 }}
style={{ color: "#64748b", fontSize: 13 }}
>
描述视频 → AI优化 → 生成视频
</Typography.Text>
</div>
<div style={{ width: 32, height: 2, background: "linear-gradient(90deg, transparent, #8b5cf6, #6366f1, transparent)", borderRadius: 1 }} />
</div>
<Tag
style={{
background: "rgba(255,255,255,0.1)",
border: "1px solid rgba(255,255,255,0.2)",
color: "#fff",
background: "rgba(99, 102, 241, 0.08)",
border: "1px solid rgba(99, 102, 241, 0.15)",
color: "#6366f1",
borderRadius: 20,
fontSize: 13,
padding: "4px 14px",
video-gen-app/src/pages/GeneratedRecord copy.tsx
-2164
View File
File diff suppressed because it is too large Load Diff
video-gen-app/src/pages/GeneratedRecord.tsx
+24 -24
View File
@@ -37,7 +37,7 @@ const GeneratedRecord: React.FC = () => {
const [uploading, setUploading] = useState(false);
// 上传配置弹窗相关状态
// 推送配置弹窗相关状态
const [uploadConfigModalVisible, setUploadConfigModalVisible] = useState(false);
const [accountIdLists, setAccountIdLists] = useState<{
accountId: string;
@@ -68,7 +68,7 @@ const GeneratedRecord: React.FC = () => {
const [selectedHistoryAccounts, setSelectedHistoryAccounts] = useState<any[]>([]);
const [openTypeMap, setOpenTypeMap] = useState<Record<number, string>>({});
// 上传任务历史弹窗相关状态
// 推送任务历史弹窗相关状态
const [uploadHistoryModalVisible, setUploadHistoryModalVisible] = useState(false);
const [uploadHistoryList, setUploadHistoryList] = useState<any[]>([]);
const [uploadHistoryTotal, setUploadHistoryTotal] = useState(0);
@@ -671,7 +671,7 @@ const GeneratedRecord: React.FC = () => {
};
const handleBatchUploadSelected = () => {
if (selectedItems.size === 0) {
message.warning('请先选择要上传的媒体');
message.warning('请先选择要推送的媒体');
return;
}
setAccountIdLists([[]]);
@@ -741,7 +741,7 @@ const GeneratedRecord: React.FC = () => {
setUploadHistoryList(data || []);
setUploadHistoryTotal(res.pagination?.total || res.total || 0);
} catch (error) {
console.error('加载上传历史失败:', error);
console.error('加载推送历史失败:', error);
setUploadHistoryList([]);
setUploadHistoryTotal(0);
} finally {
@@ -763,10 +763,10 @@ const GeneratedRecord: React.FC = () => {
setUploadHistoryPageSize(pageSize);
loadUploadHistory();
};
// 批量上传素材
// 批量推送素材
const handleStartBatchUpload = async () => {
if (selectedItems.size === 0) {
message.warning('请先选择要上传的媒体');
message.warning('请先选择要推送的媒体');
return;
}
const itemMap = new Map<string, any>();
@@ -869,8 +869,8 @@ const GeneratedRecord: React.FC = () => {
setMaterialFileNames(new Map());
setUnifiedFileName('');
} catch (error: any) {
console.error('批量上传失败:', error);
message.error(error.message || '批量上传失败');
console.error('批量推送失败:', error);
message.error(error.message || '批量推送失败');
} finally {
setUploading(false);
}
@@ -1056,7 +1056,7 @@ const GeneratedRecord: React.FC = () => {
}, [filterType, filterMedia]);
return (
<div style={{ minHeight: 'calc(100vh - 90px)', background: '#ffffffff', overflowY: 'auto' }} >
{/* 操作栏：筛选 + 上传按钮 */}
{/* 操作栏：筛选 + 推送按钮 */}
<div style={{
display: 'flex',
alignItems: 'center',
@@ -1167,7 +1167,7 @@ const GeneratedRecord: React.FC = () => {
fontWeight: 600,
}}
>
{uploading ? '上传中...' : `推送至账户 (${selectedItems.size})`}
{uploading ? '推送中...' : `推送至账户 (${selectedItems.size})`}
</Button>
</Space>
) : (
@@ -1284,7 +1284,7 @@ const GeneratedRecord: React.FC = () => {
e.currentTarget.style.boxShadow = '0 4px 15px rgba(102, 126, 234, 0.4)';
}}
>
查询上传任务历史
查询推送任务历史
</Button>
</div>
{/* Content area */}
@@ -1369,9 +1369,9 @@ const GeneratedRecord: React.FC = () => {
)}
</div>
)}
{/* 上传配置弹窗 */}
{/* 推送配置弹窗 */}
<Modal
title={selectedItems.size === 1 ? '上传配置' : '批量上传配置'}
title={selectedItems.size === 1 ? '推送配置' : '批量推送配置'}
open={uploadConfigModalVisible}
onCancel={() => {
setUploadConfigModalVisible(false);
@@ -1845,15 +1845,15 @@ const GeneratedRecord: React.FC = () => {
disabled={uploading || (accountTab === 'new' ? accountIdLists.every(list => list.length === 0) : selectedHistoryAccounts.length === 0)}
style={{ borderRadius: 8 }}
>
{uploading ? '上传中...' : '开始上传'}
{uploading ? '推送中...' : '开始推送'}
</Button>
</div>
</div>
</Modal>
{/* 上传任务历史弹窗 */}
{/* 推送任务历史弹窗 */}
<Modal
title="上传任务历史"
title="推送任务历史"
open={uploadHistoryModalVisible}
onCancel={() => setUploadHistoryModalVisible(false)}
footer={null}
@@ -1868,10 +1868,10 @@ const GeneratedRecord: React.FC = () => {
placeholder="选择状态"
style={{ width: 200, marginRight: 12 }}
options={[
{ value: '1', label: '待上传' },
{ value: '2', label: '上传中' },
{ value: '3', label: '上传成功' },
{ value: '4', label: '上传失败' },
{ value: '1', label: '待推送' },
{ value: '2', label: '推送中' },
{ value: '3', label: '推送成功' },
{ value: '4', label: '推送失败' },
]}
allowClear
/>
@@ -1905,10 +1905,10 @@ const GeneratedRecord: React.FC = () => {
width: 100,
render: (status: string) => {
const statusMap: Record<string, string> = {
'1': '待上传',
'2': '上传中',
'3': '上传成功',
'4': '上传失败',
'1': '待推送',
'2': '推送中',
'3': '推送成功',
'4': '推送失败',
};
const statusColorMap: Record<string, string> = {
'1': '#f59e0b',
video-gen-app/src/pages/InitialInfo.tsx
+26 -11
View File
@@ -450,15 +450,15 @@ function InitialInfo() {
<div style={{ borderBottom: '1px solid rgba(99, 102, 241, 0.08)', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 24px', background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', boxSizing: 'border-box' }}>
<Button
type="text"
icon={<ArrowLeftOutlined />}
onClick={() => navigate(-1)}
style={{
color: '#64748b',
borderRadius: 10,
fontSize: 13,
height: 32,
transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
background: 'rgba(99, 102, 241, 0.1)',
border: '1px solid rgba(99, 102, 241, 0.2)',
color: '#6366f1',
}}
>
返回
@@ -523,6 +523,7 @@ function InitialInfo() {
</div>
</div>
</div>
<div style={{ margin: '20px 0', height: 1, background: 'linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.15), transparent)', borderRadius: 0.5 }} />
{taskDetail?.finalImageUrl && (
<div style={{ marginTop: 16 }}>
<div>
@@ -1229,9 +1230,9 @@ function InitialInfo() {
{/* 创作记录弹窗 */}
<Modal
title={
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
<div style={{ width: 4, height: 18, background: 'linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%)', borderRadius: 2 }} />
<span style={{ fontSize: 15, fontWeight: 700, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<div style={{ width: 4, height: 20, background: 'linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%)', borderRadius: 2 }} />
<span style={{ fontSize: 16, fontWeight: 700, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
创作记录
</span>
</div>
@@ -1240,22 +1241,36 @@ function InitialInfo() {
onCancel={() => setIsModalOpen(false)}
width={850}
footer={null}
style={{ borderRadius: 16 }}
style={{ borderRadius: 20 }}
styles={{
body: { height: 580, display: 'flex', flexDirection: 'column', padding: 0 },
header: { background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', borderBottom: '1px solid rgba(99, 102, 241, 0.08)', padding: '16px 24px' },
body: { background: 'linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #f0f9ff 100%)', },
}}
>
{/* 搜索区域 */}
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
<div style={{ display: 'flex', justifyContent: 'flex-end', margin: '16px 24px', flexShrink: 0 }}>
<Input
placeholder="搜索产品名称"
value={searchKeyword}
onChange={(e) => setSearchKeyword(e.target.value)}
onPressEnter={handleSearch}
style={{ width: 200, borderRadius: 8, marginRight: 8, border: '1px solid rgba(99, 102, 241, 0.15)', background: 'rgba(255,255,255,0.8)' }}
style={{
width: 220,
borderRadius: 10,
marginRight: 10,
border: '1px solid rgba(99, 102, 241, 0.15)',
background: 'rgba(255,255,255,0.8)',
}}
/>
<Button type="primary" onClick={handleSearch} style={{ borderRadius: 8, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', border: 'none', boxShadow: '0 4px 12px rgba(99, 102, 241, 0.3)' }}>
<Button
type="primary"
onClick={handleSearch}
style={{
borderRadius: 10,
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
border: 'none',
}}
>
搜索
</Button>
</div>
video-gen-app/src/pages/InitialReplication.tsx
+25 -23
View File
@@ -440,30 +440,32 @@ const GenerateConver: React.FC = () => {
{/* 顶部标题栏 */}
<Header
style={{
background: 'rgba(255,255,255,0.6)',
backdropFilter: 'blur(10px)',
padding: '16px 24px',
borderBottom: '1px solid rgba(99, 102, 241, 0.08)',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
}}
>
<div className="animate-fadeInUp" style={{
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
marginBottom: 24, padding: '16px 24px', borderRadius: 16,
background: 'rgba(255,255,255,0.6)',
backdropFilter: 'blur(10px)',
border: '1px solid rgba(99, 102, 241, 0.08)',
position: 'relative', overflow: 'hidden', flexWrap: 'wrap', gap: 12,
}}>
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #6366f1, #8b5cf6, transparent)', borderRadius: 1 }} />
<h2 style={{
margin: 0,
fontSize: 18,
fontWeight: 700,
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
backgroundClip: 'text'
}}>
爆款开头复刻
</h2>
<div>
<h2 style={{
margin: 0,
fontSize: 18,
fontWeight: 700,
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
backgroundClip: 'text'
}}>
爆款开头复刻
</h2>
<p style={{ fontSize: 13, color: '#64748b', margin: '4px 0 0 0' }}>
上传参考视频与产品图片，一键复刻爆款视频开头
</p>
</div>
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #8b5cf6, #6366f1, transparent)', borderRadius: 1 }} />
</div>
<Button
@@ -481,7 +483,7 @@ const GenerateConver: React.FC = () => {
>
创作记录
</Button>
</Header>
</div>
{/* 左侧预览区域 */}
<div style={{ flex: 1, background: 'rgba(248, 250, 252, 0.5)', borderRight: '1px solid rgba(99, 102, 241, 0.08)', overflowY: 'auto' }}>
video-gen-app/src/pages/MaterialListPage.tsx
+9 -4
View File
@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import { Button, Table, Tag, Input, Pagination, Typography, Select, App } from 'antd';
import { Link } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import { FolderOpenOutlined, EyeOutlined } from '@ant-design/icons';
import { getResourcesMaterialList } from '../api';
import PreResultDisplay from '../components/PreResultDisplay';
@@ -81,6 +81,7 @@ interface MaterialData {
const MaterialListPage: React.FC = () => {
const { message } = App.useApp();
const navigate = useNavigate();
const [materials, setMaterials] = useState<MaterialData[]>([]);
const [listLoading, setListLoading] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
@@ -269,12 +270,16 @@ const MaterialListPage: React.FC = () => {
},
{
title: '操作',
fixed: 'right' as const,
key: 'action',
width: 120,
render: (_: unknown, record) => (
<Link to={`/consume?accountId=${record.advertiserId}`} style={{ color: '#6366f1' }}>
<Button
type="link"
onClick={() => navigate(`/consume?advertiserId=${record.advertiserId}`)}
style={{ color: '#6366f1', padding: 0 }}
>
查看消耗
</Link>
</Button>
),
},
// {
video-gen-app/src/pages/ProjectsPage.tsx
+43 -17
View File
@@ -15,7 +15,7 @@ import {
TagOutlined, TeamOutlined, ToolOutlined, TruckOutlined, VideoCameraOutlined,
WalletOutlined, BankOutlined, BuildOutlined, ExperimentOutlined, HighlightOutlined,
IdcardOutlined, MedicineBoxOutlined, ReadOutlined, RestOutlined, SketchOutlined,
SolutionOutlined,
SolutionOutlined, FileTextOutlined,
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useAppStore } from '../store/useAppStore';
@@ -109,25 +109,51 @@ const ProjectsPage: React.FC = () => {
{/* Header banner */}
<div className="animate-fadeInUp" style={{
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
marginBottom: 24, padding: '22px 24px', borderRadius: 16,
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
marginBottom: 24, padding: '16px 24px', borderRadius: 16,
background: 'rgba(255,255,255,0.6)',
backdropFilter: 'blur(10px)',
border: '1px solid rgba(99, 102, 241, 0.08)',
position: 'relative', overflow: 'hidden', flexWrap: 'wrap', gap: 12,
}}>
<div style={{ position: 'absolute', right: -20, top: -20, width: 200, height: 200, borderRadius: '50%', background: 'rgba(255,255,255,0.08)' }} />
<div style={{ position: 'relative', zIndex: 1 }}>
<Typography.Title level={3} style={{ margin: '0 0 4px', color: '#fff', fontWeight: 700 }}>我的项目</Typography.Title>
<Typography.Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 14 }}>
共 {projects.length} 个项目 · 按行业分类管理
</Typography.Text>
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #6366f1, #8b5cf6, transparent)', borderRadius: 1 }} />
<div>
<h2 style={{
margin: 0,
fontSize: 18,
fontWeight: 700,
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
backgroundClip: 'text'
}}>
我的项目
</h2>
<p style={{ fontSize: 13, color: '#64748b', margin: '4px 0 0 0' }}>
共 {projects.length} 个项目 · 按行业分类管理
</p>
</div>
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #8b5cf6, #6366f1, transparent)', borderRadius: 1 }} />
</div>
<div style={{ display: 'flex', gap: 12 }}>
<Button icon={<FileTextOutlined />} onClick={() => navigate('/records')} size="large" style={{
background: 'rgba(99, 102, 241, 0.1)',
border: '1px solid rgba(99, 102, 241, 0.2)',
color: '#6366f1',
fontWeight: 600,
borderRadius: 10,
height: 42,
}}>项目记录</Button>
<Button icon={<PlusOutlined />} onClick={() => setModalOpen(true)} size="large" style={{
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
border: 'none',
color: '#fff',
fontWeight: 600,
borderRadius: 10,
height: 42,
boxShadow: '0 4px 16px rgba(99, 102, 241, 0.35)',
}}>新建项目</Button>
</div>
<Button icon={<PlusOutlined />} onClick={() => setModalOpen(true)} size="large" style={{
background: 'rgba(255,255,255,0.15)', border: '1px solid rgba(255,255,255,0.3)',
color: '#fff', fontWeight: 600, backdropFilter: 'blur(10px)', borderRadius: 10, height: 42,
}}>新建项目</Button>
<Button icon={<PlusOutlined />} onClick={() => navigate('/records')} size="large" style={{
background: 'rgba(255,255,255,0.15)', border: '1px solid rgba(255,255,255,0.3)',
color: '#fff', fontWeight: 600, backdropFilter: 'blur(10px)', borderRadius: 10, height: 42,
}}>项目记录</Button>
</div>
{projects.length === 0 ? (
video-gen-app/src/pages/RecordsPage.tsx
+28 -4
View File
@@ -27,7 +27,9 @@ import {
DownloadOutlined,
RocketOutlined,
PictureOutlined,
ArrowLeftOutlined,
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useAppStore } from '../store/useAppStore';
import type { GenerationStatus, AspectRatio, Resolution } from '../types';
import { formatDate } from '../utils/formatDate';
@@ -41,6 +43,7 @@ const statusConfig: Record<GenerationStatus, { color: string; text: string; icon
};
const RecordsPage: React.FC = () => {
const navigate = useNavigate();
const { records, projects, fetchRecords, fetchProjects, generateVideo } = useAppStore();
const recordItems = records.items;
const [currentPage, setCurrentPage] = useState(1);
@@ -113,10 +116,31 @@ const RecordsPage: React.FC = () => {
return (
<div>
<div style={{ marginBottom: 20 }}>
<Typography.Text style={{ fontSize: 14, color: '#94a3b8' }}>
查看所有视频生成记录，点击记录查看完整内容和视频
</Typography.Text>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20, padding: '16px 24px', borderRadius: 16, background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', border: '1px solid rgba(99, 102, 241, 0.08)' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
<Button
icon={<ArrowLeftOutlined />}
onClick={() => navigate('/projects')}
style={{
borderRadius: 10,
fontSize: 13,
height: 32,
background: 'rgba(99, 102, 241, 0.1)',
border: '1px solid rgba(99, 102, 241, 0.2)',
color: '#6366f1',
}}
>
返回
</Button>
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #6366f1, #8b5cf6, transparent)', borderRadius: 1 }} />
<div>
<Typography.Title level={2} style={{ margin: 0, fontSize: 16, fontWeight: 700, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>项目记录</Typography.Title>
<Typography.Text style={{ fontSize: 13, color: '#64748b' }}>
查看所有视频生成记录，点击记录查看完整内容和视频
</Typography.Text>
</div>
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #8b5cf6, #6366f1, transparent)', borderRadius: 1 }} />
</div>
</div>
{/* Filters */}
video-gen-app/src/pages/RemoveInfo.tsx
+23 -25
View File
@@ -589,34 +589,32 @@ function RemoveInfo() {
<div style={{ position: 'absolute', bottom: -100, left: -100, width: 300, height: 300, background: 'radial-gradient(circle, rgba(167,139,250,0.08) 0%, transparent 70%)', borderRadius: '50%' }} />
{/* 标题栏 */}
<div style={{ padding: '20px 32px', display: 'flex', alignItems: 'center', gap: 16, position: 'relative', zIndex: 10 }}>
<Button
type="text"
icon={<ArrowLeftOutlined />}
onClick={() => navigate(-1)}
style={{
fontSize: 16,
color: '#6366f1',
background: 'rgba(99, 102, 241, 0.1)',
borderRadius: 12,
padding: '8px 16px',
transition: 'all 0.2s ease',
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = 'rgba(99, 102, 241, 0.15)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = 'rgba(99, 102, 241, 0.1)';
}}
/>
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
<div style={{ width: 40, height: 2, background: 'linear-gradient(90deg, transparent, #6366f1, #8b5cf6, transparent)', borderRadius: 1 }} />
<h1 style={{ fontSize: 22, fontWeight: 700, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', margin: 0 }}>
<div style={{ padding: '16px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderRadius: 16, background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', border: '1px solid rgba(99, 102, 241, 0.08)', position: 'relative', zIndex: 10 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
<Button
icon={<ArrowLeftOutlined />}
onClick={() => navigate(-1)}
style={{
borderRadius: 10,
fontSize: 13,
height: 32,
background: 'rgba(99, 102, 241, 0.1)',
border: '1px solid rgba(99, 102, 241, 0.2)',
color: '#6366f1',
}}
>
返回
</Button>
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #6366f1, #8b5cf6, transparent)', borderRadius: 1 }} />
<div>
<h1 style={{ fontSize: 18, fontWeight: 700, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', margin: 0 }}>
AI视频拆镜工作台
</h1>
<div style={{ width: 40, height: 2, background: 'linear-gradient(90deg, transparent, #8b5cf6, #6366f1, transparent)', borderRadius: 1 }} />
<p style={{ fontSize: 13, color: '#64748b', margin: '4px 0 0 0' }}>
一键拆解画面分镜，助力仿拍或创作
</p>
</div>
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #8b5cf6, #6366f1, transparent)', borderRadius: 1 }} />
</div>
</div>
video-gen-app/src/pages/RemoveLens.tsx
+51 -41
View File
@@ -167,49 +167,48 @@ export default function VideoFrameExtractor() {
>
<div style={{ maxWidth: 1200, margin: '50px auto', position: 'relative', zIndex: 10 }}>
<div style={{ marginBottom: 50, height: 160, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative', zIndex: 10 }}>
<div className="animate-fadeInUp" style={{
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
marginBottom: 24, padding: '16px 24px', borderRadius: 16,
background: 'rgba(255,255,255,0.6)',
backdropFilter: 'blur(10px)',
border: '1px solid rgba(99, 102, 241, 0.08)',
position: 'relative', overflow: 'hidden', flexWrap: 'wrap', gap: 12,
}}>
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
<div style={{ width: 40, height: 2, background: 'linear-gradient(90deg, transparent, #6366f1, #8b5cf6, transparent)', borderRadius: 1 }} />
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #6366f1, #8b5cf6, transparent)', borderRadius: 1 }} />
<div>
<h1 style={{
fontSize: 24,
fontWeight: 700,
<h2 style={{
margin: 0,
fontSize: 18,
fontWeight: 700,
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
backgroundClip: 'text'
}}>
AI视频拆镜工作台
</h1>
</h2>
<p style={{ fontSize: 13, color: '#64748b', margin: '4px 0 0 0' }}>
一键拆解画面分镜，助力仿拍或创作
</p>
</div>
<div style={{ width: 40, height: 2, background: 'linear-gradient(90deg, transparent, #8b5cf6, #6366f1, transparent)', borderRadius: 1 }} />
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #8b5cf6, #6366f1, transparent)', borderRadius: 1 }} />
</div>
<Button
type="text"
type="primary"
ghost
icon={<FileTextOutlined />}
onClick={handleOpenModal}
style={{
fontSize: 14,
color: '#6366f1',
borderRadius: 10,
padding: '6px 16px',
fontSize: 13,
background: 'rgba(99, 102, 241, 0.1)',
borderRadius: 12,
padding: '10px 20px',
display: 'flex',
alignItems: 'center',
gap: 8,
transition: 'all 0.2s ease',
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = 'rgba(99, 102, 241, 0.15)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = 'rgba(99, 102, 241, 0.1)';
borderColor: 'rgba(99, 102, 241, 0.2)',
color: '#6366f1',
}}
>
创作记录
@@ -472,30 +471,42 @@ export default function VideoFrameExtractor() {
<Modal
title={
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<div style={{ width: 4, height: 20, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', borderRadius: 2 }} />
<span style={{ fontSize: 16, fontWeight: 600, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>创作记录</span>
<div style={{ width: 4, height: 20, background: 'linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%)', borderRadius: 2 }} />
<span style={{
fontSize: 16,
fontWeight: 700,
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
backgroundClip: 'text'
}}>
创作记录
</span>
</div>
}
open={isModalOpen}
onCancel={() => setIsModalOpen(false)}
width={800}
width={850}
footer={null}
style={{ borderRadius: 20 }}
styles={{
body: { background: 'linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%)' },
header: { background: '#fff', borderBottom: '1px solid rgba(99, 102, 241, 0.1)', padding: '20px 24px' },
body: { height: 580, display: 'flex', flexDirection: 'column', padding: 0 },
header: { background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', borderBottom: '1px solid rgba(99, 102, 241, 0.08)', padding: '16px 24px' },
}}
>
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16, gap: 8 }}>
{/* 搜索区域 */}
<div style={{ display: 'flex', justifyContent: 'flex-end', margin: '16px 24px', flexShrink: 0 }}>
<Input
placeholder="搜索产品名称"
value={searchKeyword}
onChange={(e) => setSearchKeyword(e.target.value)}
onPressEnter={handleSearch}
style={{
width: 200,
width: 220,
borderRadius: 10,
border: '1px solid rgba(99, 102, 241, 0.2)',
height: 40,
marginRight: 10,
border: '1px solid rgba(99, 102, 241, 0.15)',
background: 'rgba(255,255,255,0.8)',
}}
/>
<Button
@@ -503,7 +514,6 @@ export default function VideoFrameExtractor() {
onClick={handleSearch}
style={{
borderRadius: 10,
height: 40,
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
border: 'none',
}}
@@ -512,16 +522,15 @@ export default function VideoFrameExtractor() {
</Button>
</div>
<div
style={{
background: 'linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%)',
backdropFilter: 'blur(20px)',
<div style={{ flex: 1, overflow: 'auto', padding: '0 24px 24px' }}>
<div style={{
background: 'rgba(255,255,255,0.85)',
backdropFilter: 'blur(10px)',
borderRadius: 16,
overflow: 'hidden',
border: '1px solid rgba(99, 102, 241, 0.1)',
boxShadow: '0 8px 32px rgba(99, 102, 241, 0.08)',
}}
>
border: '1px solid rgba(99, 102, 241, 0.08)',
boxShadow: '0 4px 16px rgba(99, 102, 241, 0.06)',
}}>
<Table
columns={[
{
@@ -635,6 +644,7 @@ export default function VideoFrameExtractor() {
},
}}
/>
</div>
</div>
</Modal>
</div>
video-gen-app/src/pages/RemoveRw.tsx
+3 -3
View File
@@ -453,15 +453,15 @@ function InitialInfo() {
>
<div style={{ borderBottom: '1px solid rgba(99, 102, 241, 0.08)', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 24px', background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', boxSizing: 'border-box' }}>
<Button
type="text"
icon={<ArrowLeftOutlined />}
onClick={() => window.history.back()}
style={{
color: '#64748b',
borderRadius: 10,
fontSize: 13,
height: 32,
transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
background: 'rgba(99, 102, 241, 0.1)',
border: '1px solid rgba(99, 102, 241, 0.2)',
color: '#6366f1',
}}
>
返回