From 879c8786335f397fa67d6eb1d812f2d21cd26948 Mon Sep 17 00:00:00 2001 From: Lrd <13001933075@sina.cn> Date: Thu, 18 Jun 2026 09:06:39 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E6=8E=88=E6=9D=83=E6=8E=A5?= =?UTF-8?q?=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- video-gen-app/src/App.tsx | 8 +- video-gen-app/src/api/index.ts | 90 ++++ video-gen-app/src/api/mock.ts | 60 +++ video-gen-app/src/pages/AuthorizationPage.tsx | 324 +++++++++---- video-gen-app/src/pages/PreTest.tsx | 433 ++++++++++++++++++ 5 files changed, 813 insertions(+), 102 deletions(-) create mode 100644 video-gen-app/src/pages/PreTest.tsx diff --git a/video-gen-app/src/App.tsx b/video-gen-app/src/App.tsx index 6c62ed35..fdc6133a 100644 --- a/video-gen-app/src/App.tsx +++ b/video-gen-app/src/App.tsx @@ -17,19 +17,14 @@ import InitialReplication from './pages/InitialReplication'; import InitialInfo from './pages/InitialInfo'; import RemoveLens from './pages/RemoveLens'; import GeneratedRecord from './pages/GeneratedRecord'; +import PreTest from './pages/PreTest'; import AuthorizationPage from './pages/AuthorizationPage'; import RemoveInfo from './pages/RemoveInfo'; import ConsumePage from './pages/ConsumePage'; - - - - - import { useAuthStore } from './store/useAuthStore'; const ProtectedRoute = ({ children }: { children: React.ReactNode }) => { const { user, loading, checkAuth } = useAuthStore(); - useEffect(() => { const token = localStorage.getItem('auth_token'); if (!token && !loading && !user) { @@ -108,6 +103,7 @@ const App = () => { } /> } /> } /> + } /> } /> } /> diff --git a/video-gen-app/src/api/index.ts b/video-gen-app/src/api/index.ts index 96f28bcc..598e53b4 100644 --- a/video-gen-app/src/api/index.ts +++ b/video-gen-app/src/api/index.ts @@ -392,3 +392,93 @@ export async function getthree(projectId: string, stepId: string ,params: any): export async function getfour(projectId: string, stepId: string ,params: any): Promise { return api.post(`/hot-opening-replications/tasks/${projectId}/steps/${stepId}/generate-video`, params); } + +// 获取授权链接 +export interface RequestOAuthParams { + open_type: number; +} +export async function requestOAuth(params: RequestOAuthParams): Promise { + return api.post(`/user-oauth/request_oauth`, params); +} + +// 巨量授权回调 +export interface JuliangCallbackParams { + auth_code: string; + state: string; +} +export async function juliang_callback(params: JuliangCallbackParams): Promise { + const query = new URLSearchParams(); + query.set('auth_code', params.auth_code); + query.set('state', params.state); + return api.get(`/user-oauth/juliang_callback?${query.toString()}`); +} + +// 授权列表 +export interface OAuthListParams { + account_userid?: string; + open_type?: number; + account_id?: string; + page?: number; + page_size?: number; +} +export async function getOAuthList(params: OAuthListParams): Promise { + const query = new URLSearchParams(); + if (params.account_userid) query.set('account_userid', params.account_userid); + if (params.open_type !== undefined) query.set('open_type', String(params.open_type)); + if (params.account_id) query.set('account_id', params.account_id); + if (params.page !== undefined) query.set('page', String(params.page)); + if (params.page_size !== undefined) query.set('page_size', String(params.page_size)); + return api.get(`/user-oauth/oauth_list?${query.toString()}`); +} + +// 前测模板列表 +// /api/pre-test-template/list +export interface PreTestListParams { + page?: number; + pageSize?: number; +} + +export async function getPreTestList(params?: PreTestListParams): Promise { + if (USE_MOCK) return mock.mockGetPreTestList(params); + const page = params?.page || 1; + const pageSize = Math.min(params?.pageSize || 10, 100); + return api.get(`/pre-test-template/list?page=${page}&page_size=${pageSize}`); +} + +// 获取前测字段列表 +// /api/pre-test-template/fields +export async function getPreTestFields(): Promise { + if (USE_MOCK) return mock.mockGetPreTestFields(); + return api.get(`/pre-test-template/fields`); +} + +// 创建前测模板 +// /api/pre-test-template/create +export async function createPreTest(params: any): Promise { + if (USE_MOCK) return mock.mockCreatePreTest(params); + return api.post(`/pre-test-template/create`, params); +} + +// 前测模板详情 +// /api/pre-test-template/select/{template_id} +export async function getPreTestDetail(templateId: string): Promise { + return api.get(`/pre-test-template/select/${templateId}`); +} + +// 更新前测模板 +// /api/pre-test-template/update/{template_id} +export async function updatePreTest(templateId: string, params: any): Promise { + return api.post(`/pre-test-template/update/${templateId}`, params); +} + +// 删除前测模板 +// /api/pre-test-template/delete/{template_id} +export async function deletePreTest(templateId: string): Promise { + return api.get(`/pre-test-template/delete/${templateId}`); +} + +// 获取默认前测模板 +// /api/pre-test-template/default +export async function getDefaultPreTest(): Promise { + return api.get(`/pre-test-template/default`); +} \ No newline at end of file diff --git a/video-gen-app/src/api/mock.ts b/video-gen-app/src/api/mock.ts index 333dbcf5..bea7a751 100644 --- a/video-gen-app/src/api/mock.ts +++ b/video-gen-app/src/api/mock.ts @@ -383,3 +383,63 @@ export async function mockCreateGenerationTask(params: any): Promise { ...params, }; } + +// ── PreTest Mock ──────────────────────────────────────────── + +const MOCK_PRETEST_FIELDS = [ + { id: 'title', name: 'title', label: '标题', description: '视频标题字段' }, + { id: 'description', name: 'description', label: '描述', description: '视频描述字段' }, + { id: 'image', name: 'image', label: '图片', description: '视频封面或配图' }, + { id: 'content', name: 'content', label: '内容', description: '视频正文内容' }, + { id: 'date', name: 'date', label: '日期', description: '活动或发布日期' }, + { id: 'step', name: 'step', label: '步骤', description: '操作步骤说明' }, + { id: 'duration', name: 'duration', label: '时长', description: '视频时长' }, + { id: 'brand', name: 'brand', label: '品牌', description: '品牌名称' }, + { id: 'slogan', name: 'slogan', label: '标语', description: '品牌宣传语' }, + { id: 'name', name: 'name', label: '姓名', description: '人物姓名' }, + { id: 'story', name: 'story', label: '故事', description: '故事内容' }, +]; + +const MOCK_PRETEST_RECORDS = [ + { id: 'PT001', authorizationId: '1867060028363785', templateName: '产品介绍视频', selectedFields: ['title', 'description', 'image'], status: 'completed', createdAt: '2024-01-15 10:30:00' }, + { id: 'PT002', authorizationId: '1867060028363785', templateName: '活动宣传视频', selectedFields: ['title', 'content', 'date'], status: 'pending', createdAt: '2024-01-15 11:20:00' }, + { id: 'PT003', authorizationId: '1867059808785418', templateName: '教程演示视频', selectedFields: ['step', 'duration', 'image'], status: 'completed', createdAt: '2024-01-14 14:45:00' }, + { id: 'PT004', authorizationId: '1867060028363785', templateName: '品牌推广视频', selectedFields: ['brand', 'slogan'], status: 'testing', createdAt: '2024-01-14 09:15:00' }, + { id: 'PT005', authorizationId: '1867059757929740', templateName: '用户案例视频', selectedFields: ['name', 'story', 'image'], status: 'completed', createdAt: '2024-01-13 16:00:00' }, +]; + +export async function mockGetPreTestFields(): Promise { + await delay(300); + return [...MOCK_PRETEST_FIELDS]; +} + +export async function mockGetPreTestList(params?: { page?: number; pageSize?: number }): Promise { + await delay(400); + const page = params?.page || 1; + const pageSize = Math.min(params?.pageSize || 10, 100); + + const start = (page - 1) * pageSize; + const end = start + pageSize; + const items = MOCK_PRETEST_RECORDS.slice(start, end); + + return { + page, + pageSize, + total: MOCK_PRETEST_RECORDS.length, + items, + }; +} + +export async function mockCreatePreTest(params: any): Promise { + await delay(500); + const newRecord = { + id: `PT-${Date.now()}`, + authorizationId: '', + templateName: params.templateName, + selectedFields: params.selectedFields, + status: params.status || 'pending', + createdAt: new Date().toLocaleString('zh-CN'), + }; + MOCK_PRETEST_RECORDS.unshift(newRecord); + return newRecord; +} diff --git a/video-gen-app/src/pages/AuthorizationPage.tsx b/video-gen-app/src/pages/AuthorizationPage.tsx index 1e3228fc..73a957bb 100644 --- a/video-gen-app/src/pages/AuthorizationPage.tsx +++ b/video-gen-app/src/pages/AuthorizationPage.tsx @@ -1,16 +1,30 @@ import React, { useEffect, useState } from 'react'; -import { Button, Table, Tag, message } from 'antd'; +import { Button, Table, Tag, Modal, Select, App, Input } from 'antd'; import { PlusOutlined, CheckCircleOutlined, ClockCircleOutlined, CiCircleOutlined } from '@ant-design/icons'; -import { useNavigate } from 'react-router-dom'; +import { getOAuthList, juliang_callback, requestOAuth } from '../api'; + +const OPEN_TYPE_MAP: Record = { + 1: '千川', + 2: '广告', + 3: '本地推', + 4: '星图', + 5: '快手代理商', + 6: '巨量星图', + 7: '巨量服务单', + 8: '腾讯服务单', + 9: '腾讯营销K2', + 10: '腾讯营销K3', +}; -// 授权数据类型 interface AuthorizationData { id: string; status: string; description: string; + account_userid?: string; + open_type?: number; + account_id?: string; } -// 状态配置 const statusConfig = { active: { label: '已授权', color: 'green', icon: CheckCircleOutlined }, pending: { label: '待授权', color: 'gold', icon: ClockCircleOutlined }, @@ -18,62 +32,72 @@ const statusConfig = { revoked: { label: '已撤销', color: 'gray', icon: CiCircleOutlined }, }; -interface ApiResponse { - code: number; - message: string; - data: AuthorizationData[]; -} - -// 模拟授权列表接口 -const mockApiResponse: ApiResponse = { - code: 200, - message: 'success', - data: [ - { 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授权' }, - ], -}; - -// 模拟调用接口 /api/admin/user-oauth-apps/list -const fetchAuthorizationList = async (): Promise => { - return new Promise((resolve) => { - setTimeout(() => { - resolve(mockApiResponse); - }, 800); - }); -}; - const AuthorizationPage: React.FC = () => { - const navigate = useNavigate(); + const { message } = App.useApp(); const [authorizations, setAuthorizations] = useState([]); - const [selectedRowKeys, setSelectedRowKeys] = useState([]); const [loading, setLoading] = useState(false); const [listLoading, setListLoading] = useState(false); + const [showModal, setShowModal] = useState(false); + const [selectedOpenType, setSelectedOpenType] = useState(undefined); + const [currentPage, setCurrentPage] = useState(1); + const [pageSize, setPageSize] = useState(10); + const [total, setTotal] = useState(0); + const [searchParams, setSearchParams] = useState({ + account_userid: '', + open_type: undefined as number | undefined, + account_id: '', + }); - // 页面初始化时获取授权列表 useEffect(() => { - const loadData = async () => { - setListLoading(true); - try { - const response = await fetchAuthorizationList(); - if (response.code === 200) { - setAuthorizations(response.data); - } else { - message.error(response.message); - } - } catch (error) { - message.error('获取授权列表失败'); - } finally { - setListLoading(false); - } - }; - loadData(); + loadOAuthList(); + handleCallback(); }, []); - // 状态标签渲染 + const loadOAuthList = async (page = 1, pageSize = 10, params = searchParams) => { + setListLoading(true); + try { + const response = await getOAuthList({ + page, + page_size: pageSize, + account_userid: params.account_userid || undefined, + open_type: params.open_type, + account_id: params.account_id || undefined, + }); + 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 handleCallback = async () => { + const params = new URLSearchParams(window.location.search); + const authCode = params.get('auth_code'); + const state = params.get('state'); + if (authCode && state) { + try { + await juliang_callback({ auth_code: authCode, state }); + message.success('授权成功'); + window.history.replaceState({}, document.title, window.location.pathname); + loadOAuthList(); + } catch (error) { + message.error('授权回调失败'); + } + } + }; + const renderStatus = (status: string) => { const config = statusConfig[status as keyof typeof statusConfig] || statusConfig.expired; const Icon = config.icon; @@ -85,32 +109,74 @@ const AuthorizationPage: React.FC = () => { ); }; - // 跳转到消耗记录页面 - const handleGoToConsume = () => { - navigate('/consume'); + const handleAuthorize = () => { + console.log('handleAuthorize'); + setShowModal(true); }; - // 处理点击授权按钮 - const handleAuthorize = () => { - if (selectedRowKeys.length === 0) { - message.warning('请先选择需要授权的记录'); + const handleConfirm = async () => { + if (!selectedOpenType) { + message.warning('请选择开户方式'); return; } setLoading(true); - // 模拟授权操作 - setTimeout(() => { - setAuthorizations(prev => - prev.map(item => - selectedRowKeys.includes(item.id) ? { ...item, status: 'active' } : item - ) - ); - setSelectedRowKeys([]); + try { + const response = await requestOAuth({ open_type: selectedOpenType }); + console.log(response); + if (response.authUrl) { + window.open(response.authUrl, '_blank'); + } else { + message.error('获取授权链接失败'); + } + } catch (error) { + message.error('请求授权失败'); + } finally { setLoading(false); - message.success(`成功授权 ${selectedRowKeys.length} 条记录`); - }, 800); + setShowModal(false); + setSelectedOpenType(undefined); + } }; - // 表格列配置 + // account_id + // : + // "1836691333531724" + // account_name + // : + // "BP-1836691333531724" + // account_role + // : + // "CUSTOMER_ADMIN" + // account_userid + // : + // null + // account_username + // : + // "a***3@minzhong.cn" + // appid + // : + // "1866261617455433" + // created_at + // : + // "2026-06-15T10:00:22.734565Z" + // id + // : + // "0019ecab9b8bc57d964" + // material_auth_status + // : + // true + // open_type + // : + // 2 + // port_type + // : + // 1 + // updated_at + // : + // "2026-06-17T06:41:33.012018Z" + // user_id + // : + // "0019e96d23e57a808e2" + const columns = [ { title: '序号', @@ -128,6 +194,13 @@ const AuthorizationPage: React.FC = () => { {text} ), }, + { + title: '开户方式', + dataIndex: 'open_type', + key: 'open_type', + width: 140, + render: (text: number) => {OPEN_TYPE_MAP[text] || text}, + }, { title: '授权状态', dataIndex: 'status', @@ -136,24 +209,12 @@ const AuthorizationPage: React.FC = () => { render: (text: string) => renderStatus(text), }, { - title: '操作', - dataIndex: 'operation', - key: 'operation', - width: 120, - render: (_: any, record: AuthorizationData) => ( - - ), - } + title: '描述', + dataIndex: 'description', + key: 'description', + ellipsis: true, + render: (text: string) => {text}, + }, ]; const tableData = authorizations.map((item, index) => ({ @@ -163,16 +224,57 @@ const AuthorizationPage: React.FC = () => { })); return ( -
- {/* 页面标题 */} +
-

+

授权管理

- {/* 操作栏 */} -
+
+
+ setSearchParams(prev => ({ ...prev, account_userid: e.target.value }))} + style={{ width: 180 }} + onPressEnter={() => { setCurrentPage(1); loadOAuthList(1, pageSize); }} + /> + setSearchParams(prev => ({ ...prev, account_id: e.target.value }))} + style={{ width: 180 }} + onPressEnter={() => { setCurrentPage(1); loadOAuthList(1, pageSize); }} + /> + + +
- {/* 表格 */}
`共 ${total} 条记录`, + onChange: (page, size) => { + setCurrentPage(page); + setPageSize(size); + loadOAuthList(page, size); + }, }} rowKey="id" bordered={false} @@ -206,8 +314,32 @@ const AuthorizationPage: React.FC = () => { scroll={{ x: 'max-content' }} /> + + { + setShowModal(false); + setSelectedOpenType(undefined); + }} + okText="确认授权" + cancelText="取消" + confirmLoading={loading} + > +
`共 ${total} 条记录`, + pageSizeOptions: ['10', '20', '50', '100'], + onChange: handlePageChange, + style: { padding: '16px 24px', borderTop: '1px solid #f1f5f9' }, + }} + rowKey="id" + bordered={false} + style={{ padding: 0 }} + scroll={{ x: 'max-content' }} + onRow={() => ({ + style: { + cursor: 'pointer', + transition: 'background-color 0.15s', + }, + onMouseEnter: (e: React.MouseEvent) => { + (e.currentTarget as HTMLElement).style.backgroundColor = '#f8fafc'; + }, + onMouseLeave: (e: React.MouseEvent) => { + (e.currentTarget as HTMLElement).style.backgroundColor = 'transparent'; + }, + })} + /> + + + 新增前测模板} + open={modalOpen} + onCancel={handleCloseModal} + onOk={handleSubmit} + okText="提交" + cancelText="取消" + width={520} + confirmLoading={submitLoading} + style={{ borderRadius: 16 }} + > +
+ + + + + + + + + + + ); +}; + +export default PreTest; \ No newline at end of file