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

授权应用添加详情，编辑，删除操作

Browse Source
This commit is contained in:
Lrd
2026-06-11 16:54:41 +08:00
parent bec4f6b419
commit 2a37adea0a
8 changed files with 602 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
video-gen-app/src/api/index.ts
+24 -67
View File
@@ -2,18 +2,14 @@
* API abstraction layer.
* Switches between mock data and real backend based on VITE_USE_MOCK env var.
*/
import { api, setToken, clearToken } from './client';
import * as mock from './mock';
import type {
User, CreditRecord, Project, GenerationRecord, OptimizeParams, GenerateParams, OptimizeResult,
Industry, IndustryConfig, AdminUser, AdminStats, ModelConfig, SystemConfig, AdminNotification,
} from '../types';
const USE_MOCK = import.meta.env.VITE_USE_MOCK === 'true';
// ── Auth ──────────────────────────────────────────────────
export async function login(username: string, password: string, captchaToken?: string, rememberMe?: boolean): Promise<User> {
if (USE_MOCK) return mock.mockLogin({ username, password });
const res = await api.post<{ accessToken: string; user: User }>('/auth/login', { username, password, captcha_token: captchaToken, remember_me: rememberMe || false }, false);
@@ -26,19 +22,16 @@ export async function phonelogin(phone: string, code: string): Promise<User> {
setToken(res.accessToken);
return res.user;
}
export async function register(phone: string, code: string, password: string): Promise<User> {
const res = await api.post<{ accessToken: string; user: User }>('/auth/register', { phone, code, password }, false);
setToken(res.accessToken);
return res.user;
}
export async function logout(): Promise<void> {
if (USE_MOCK) return mock.mockLogout();
await api.post('/auth/logout');
clearToken();
}
export async function getUser(): Promise<User | null> {
if (USE_MOCK) return mock.mockGetUser();
try {
@@ -47,38 +40,30 @@ export async function getUser(): Promise<User | null> {
return null;
}
}
export async function changePassword(oldPwd: string, newPwd: string): Promise<void> {
if (USE_MOCK) return;
await api.post('/auth/change-password', { old_password: oldPwd, new_password: newPwd });
}
// ── Projects ──────────────────────────────────────────────
export async function getProjects(): Promise<Project[]> {
if (USE_MOCK) return mock.mockGetProjects();
return api.get<Project[]>('/projects');
}
export async function createProject(name: string, industry: Industry): Promise<Project> {
if (USE_MOCK) return mock.mockCreateProject(name, industry);
return api.post<Project>('/projects', { name, industry });
}
export async function deleteProject(id: string): Promise<void> {
if (USE_MOCK) return mock.mockDeleteProject(id);
await api.delete(`/projects/${id}`);
}
// ── Generation ────────────────────────────────────────────
export interface GenerationRecordPageListOut {
page: number;
pageSize: number;
total: number;
items: GenerationRecord[];
}
export interface GetRecordsPageParams {
projectId?: string;
status?: string;
@@ -86,7 +71,6 @@ export interface GetRecordsPageParams {
pageSize?: number;
signal?: AbortSignal;
}
export async function getRecordsPage(params: GetRecordsPageParams = {}): Promise<GenerationRecordPageListOut> {
const page = params.page && params.page > 0 ? params.page : 1;
const pageSize = params.pageSize && params.pageSize > 0 ? params.pageSize : 10;
@@ -105,7 +89,6 @@ export async function getRecordsPage(params: GetRecordsPageParams = {}): Promise
items: filtered.slice(start, start + pageSize),
};
}
const query = new URLSearchParams();
if (params.projectId) query.set('project_id', params.projectId);
if (params.status) query.set('status', params.status);
@@ -114,7 +97,6 @@ export async function getRecordsPage(params: GetRecordsPageParams = {}): Promise
return api.get<GenerationRecordPageListOut>(`/generation-records?${query.toString()}`, { signal: params.signal });
}
export async function optimizePrompt(
projectId: string, params: OptimizeParams
): Promise<OptimizeResult> {
@@ -131,7 +113,6 @@ export async function optimizePrompt(
image_px: params.image_px || null,
});
}
export async function uploadImage(file: File): Promise<{ url: string; filename: string }> {
const form = new FormData();
form.append('file', file);
@@ -145,7 +126,6 @@ export async function uploadImage(file: File): Promise<{ url: string; filename:
const data = await res.json();
return { url: data.url, filename: data.filename };
}
export async function uploadVideo(file: File): Promise<{ url: string; filename: string }> {
const form = new FormData();
form.append('file', file);
@@ -159,15 +139,12 @@ export async function uploadVideo(file: File): Promise<{ url: string; filename:
const data = await res.json();
return { url: data.url, filename: data.filename };
}
export async function deleteUpload(url: string): Promise<void> {
await api.post(`/generation-records/delete-file?url=${encodeURIComponent(url)}`);
}
export async function updateRecordPrompt(recordId: string, optimizedPrompt: string): Promise<void> {
await api.put(`/generation-records/${recordId}/prompt`, { optimized_prompt: optimizedPrompt });
}
export async function generateVideo(recordId: string, params: GenerateParams): Promise<GenerationRecord> {
if (USE_MOCK) return mock.mockGenerateVideo(recordId);
return api.post<GenerationRecord>(`/generation-records/${recordId}/generate`, {
@@ -175,36 +152,27 @@ export async function generateVideo(recordId: string, params: GenerateParams): P
resolution: params.resolution,
});
}
// ── Credits ───────────────────────────────────────────────
export async function getCredits(): Promise<{ credits: number; records: CreditRecord[] }> {
if (USE_MOCK) return mock.mockGetCredits();
return api.get('/credits');
}
// ── Captcha ───────────────────────────────────────────────
export async function getSliderCaptcha(): Promise<{ captcha_id: string; bg_image: string; slider_image: string }> {
if (USE_MOCK) return { captcha_id: 'mock', bg_image: '', slider_image: '' };
return api.get('/captcha/slider', false);
}
export async function verifyCaptcha(captchaId: string, x: number): Promise<string> {
if (USE_MOCK) return 'mock-token';
const res = await api.post<{ token: string }>('/captcha/verify', { captcha_id: captchaId, x_offset: x }, false);
return res.token;
}
// ── Site Info ─────────────────────────────────────────────
export async function getSiteInfo(): Promise<{ siteName: string; siteLogo: string; userAgreementUrl: string; privacyPolicyUrl: string }> {
if (USE_MOCK) return { siteName: 'VideoGen.AI', siteLogo: '', userAgreementUrl: '', privacyPolicyUrl: '' };
return api.get('/auth/site-info', false);
}
// ── Video Engines ─────────────────────────────────────────
export async function getVideoEngines(): Promise<{ items: { id: string; name: string; provider: string; supportedRatios: string[]; supportedResolutions: string[]; supportedDurations: number[] }[] }> {
if (USE_MOCK) return { items: [{ id: 'mock', name: 'Seedance', provider: 'seedance', supportedRatios: ['16:9', '9:16', '1:1', '4:3', '3:4', '21:9'], supportedResolutions: ['480p', '720p', '1080p'], supportedDurations: [4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] }] };
return api.get('/video-engines');
@@ -213,89 +181,69 @@ export async function getVideoEngines(): Promise<{ items: { id: string; name: st
export async function getParameters(): Promise<any[]> {
return api.get('/image-engines');
}
// ── SMS ───────────────────────────────────────────────────
export async function sendSms(phone: string, scene: string): Promise<void> {
if (USE_MOCK) return;
await api.post('/sms/send', { phone, scene: scene }, false);
}
export async function verifySms(phone: string, code: string): Promise<{ token: string }> {
if (USE_MOCK) return { token: 'mock-sms-token' };
return api.post('/sms/verify', { phone, code }, false);
}
// ── Notifications ─────────────────────────────────────────
export async function getNotifications(): Promise<AdminNotification[]> {
if (USE_MOCK) return mock.mockGetAdminNotifications();
return api.get('/notifications');
}
export async function getUnreadCount(): Promise<number> {
if (USE_MOCK) return mock.mockGetAdminNotifications().then(n => n.filter(x => !x.isRead).length);
const res = await api.get<{ count: number }>('/notifications/unread-count');
return res.count;
}
export async function markNotificationRead(id: string): Promise<void> {
if (USE_MOCK) return;
await api.put(`/notifications/${id}/read`);
}
// ── Admin ─────────────────────────────────────────────────
export async function getAdminStats(): Promise<AdminStats> {
if (USE_MOCK) return mock.mockGetAdminStats();
return api.get('/admin/stats');
}
export async function getAdminUsers(search?: string): Promise<AdminUser[]> {
if (USE_MOCK) return mock.mockGetAdminUsers(search);
const q = search ? `?search=${encodeURIComponent(search)}` : '';
return api.get(`/admin/users${q}`);
}
export async function adjustCredits(userId: string, amount: number, description: string): Promise<void> {
if (USE_MOCK) return mock.mockAdjustCredits(userId, amount, description);
await api.post(`/admin/users/${userId}/credits`, { amount, description });
}
export async function toggleUserStatus(userId: string, isActive: boolean): Promise<void> {
if (USE_MOCK) return mock.mockToggleUserStatus(userId, isActive);
await api.put(`/admin/users/${userId}/status`, { is_active: isActive });
}
export async function getModelConfigs(): Promise<ModelConfig[]> {
if (USE_MOCK) return mock.mockGetModelConfigs();
return api.get('/admin/model-configs');
}
export async function saveModelConfig(config: Partial<ModelConfig> & { id?: string }): Promise<ModelConfig> {
if (USE_MOCK) return mock.mockSaveModelConfig(config as any);
if (config.id) return api.put(`/admin/model-configs/${config.id}`, config);
return api.post('/admin/model-configs', config);
}
export async function deleteModelConfig(id: string): Promise<void> {
if (USE_MOCK) return mock.mockDeleteModelConfig(id);
await api.delete(`/admin/model-configs/${id}`);
}
export async function getSystemConfigs(): Promise<SystemConfig[]> {
if (USE_MOCK) return mock.mockGetSystemConfigs();
return api.get('/admin/system-configs');
}
export async function updateSystemConfig(id: string, value: string): Promise<void> {
if (USE_MOCK) return mock.mockUpdateSystemConfig(id, value);
await api.put(`/admin/system-configs/${id}`, { value });
}
// ── Industries ─────────────────────────────────────────────
export async function getIndustries(): Promise<IndustryConfig[]> {
const data = await api.get<any[]>('/industries');
return data.map((item: any) => {
@@ -306,20 +254,14 @@ export async function getIndustries(): Promise<IndustryConfig[]> {
return { ...item, optionGroups };
});
}
// ── Menu Config ────────────────────────────────────────────
export async function getMenuConfigs(): Promise<any[]> {
return api.get('/menu-configs');
}
// ── Recharge Packages ──────────────────────────────────────
export async function getRechargePackages(): Promise<any[]> {
return api.get('/recharge-packages');
}
export async function getCreditRatios(): Promise<any[]> {
return api.get('/credits/ratios');
}
@@ -327,10 +269,7 @@ export async function getCreditRatios(): Promise<any[]> {
export async function getEngine(): Promise<any[]> {
return api.get('/generation-ai/engines');
}
// ── Generation AI Tasks ────────────────────────────────────
// 创建ai生成任务
export async function createGenerationTask(params: any): Promise<any> {
return api.post('/generation-ai/tasks', params);
@@ -347,20 +286,38 @@ export async function gethistory(Pagebreak: any): Promise<any[]> {
export async function gethistoryItems(Pagebreak: any): Promise<any[]> {
return api.get('/generation-ai/history/'+Pagebreak);
}
// 删除ai对话历史记录
export async function deleteHistory(id: string): Promise<void> {
await api.delete(`/generation-ai/tasks/${id}`);
}
export async function calculateCredits(): Promise<any[]> {
return api.get('/credits/credit-ratios');
}
// 获取验证码
export async function getSendcode(phone: string): Promise<any> {
return api.post('/sms/send', { phone });
}
export interface OAuthAppParam {
page: number;
pageSize: number;
open_type?: string;
status?: string;
app_id?: string;
}
export interface OAuthAppList {
page: number;
pageSize: number;
total: number;
data: any[];
}
// 获取用户列表
export async function getAuthorizationList(params: OAuthAppParam): Promise<OAuthAppList> {
const query = new URLSearchParams();
query.set('page', String(params.page));
query.set('page_size', String(params.pageSize));
if (params.open_type) query.set('open_type', params.open_type);
if (params.status) query.set('status', params.status);
if (params.app_id) query.set('app_id', params.app_id);
return api.get<OAuthAppList>(`/admin/user-oauth-apps/list?${query.toString()}`);
}
video-gen-app/src/pages/AuthorizationPage.tsx
+118 -62
View File
@@ -1,12 +1,16 @@
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';
// 模拟授权数据
const mockAuthorizations = [
{ id: '1867060028363785', status: 'active', description: '用户张三的API授权' },
{ id: '1867059757929740', status: 'pending', description: '用户李四的API授权' },
{ id: '1867059808785418', status: 'active', description: '用户王五的API授权' },
];
import type { OAuthAppParam } from '../api/index';
import { getAuthorizationList } from '../api/index';
// 授权数据类型
interface AuthorizationData {
id: string;
status: string;
description: string;
}
// 状态配置
const statusConfig = {
active: { label: '已授权', color: 'green', icon: CheckCircleOutlined },
@@ -30,12 +34,60 @@ const consumptionTypeConfig = {
audio: { label: '音频转换', color: 'purple' },
image: { label: '图片处理', color: 'green' },
};
// 模拟表头接口返回数据
const mockTableHeaderResponse = {
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' },
],
};
// 模拟获取表头接口
const fetchTableHeader = () => {
return new Promise<typeof mockTableHeaderResponse>((resolve) => {
setTimeout(() => {
resolve(mockTableHeaderResponse);
}, 500);
});
};
const AuthorizationPage: React.FC = () => {
const [authorizations, setAuthorizations] = useState(mockAuthorizations);
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 || []);
} catch (error) {
message.error('获取授权列表失败');
} finally {
setListLoading(false);
}
};
loadData();
}, []);
// 状态标签渲染
const renderStatus = (status: string) => {
@@ -97,7 +149,7 @@ const AuthorizationPage: React.FC = () => {
dataIndex: 'operation',
key: 'operation',
width: 120,
render: (_: any, record: typeof mockAuthorizations[0]) => (
render: (_: any, record: AuthorizationData) => (
<Button
type="primary"
size="small"
@@ -106,7 +158,7 @@ const AuthorizationPage: React.FC = () => {
// background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
border: 'none',
}}
onClick={() => setShowConsumptionModal(true)}
onClick={handleOpenConsumptionModal}
>
查看消耗
</Button>
@@ -114,6 +166,60 @@ 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) {
@@ -134,14 +240,12 @@ const AuthorizationPage: React.FC = () => {
}, 800);
};
// 准备表格数据（添加序号）
const tableData = authorizations.map((item, index) => ({
...item,
index: index + 1,
key: item.id,
}));
// 准备消耗记录表格数据（添加序号）
const consumptionTableData = consumptionRecords.map((item, index) => ({
...item,
index: index + 1,
@@ -184,6 +288,7 @@ const AuthorizationPage: React.FC = () => {
<Table
dataSource={tableData}
columns={columns}
loading={listLoading}
pagination={{
pageSize: 10,
showSizeChanger: true,
@@ -213,57 +318,8 @@ const AuthorizationPage: React.FC = () => {
<div style={{ padding: 16 }}>
<Table
dataSource={consumptionTableData}
columns={[
{
title: '序号',
dataIndex: 'index',
key: 'index',
width: 80,
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,
},
]}
columns={consumptionColumns}
loading={headerLoading}
pagination={{
pageSize: 10,
showSizeChanger: true,