From 6db6c23f3b1f8ea85979b5a74f688618cc9e5b9b Mon Sep 17 00:00:00 2001 From: CI Test Date: Tue, 30 Jun 2026 18:26:38 +0800 Subject: [PATCH] fix: resolve all flake8 errors and apply Prettier formatting - Fix F821: add missing imports (EmailService, PIL.Image) - Fix F821: add noqa for pytest fixture references in tests - Fix F541: remove unnecessary f-string prefixes - Fix E712: use SQLAlchemy is_(True) instead of == True - Fix F811: remove duplicate import in shared/__init__.py - Apply Prettier formatting to 65 frontend files - Add .flake8 config for project-wide linting --- .flake8 | 13 ++ apps/api/app/api/routes/duplication.py | 2 +- apps/api/app/dependencies.py | 2 +- apps/web/src/api/assets.ts | 44 ++-- apps/web/src/api/auth.test.ts | 54 ++--- apps/web/src/api/auth.ts | 32 +-- apps/web/src/api/client.ts | 34 ++-- apps/web/src/api/dashboard.ts | 15 +- apps/web/src/api/duplication.ts | 99 ++++----- apps/web/src/api/editingPlanner.ts | 42 ++-- apps/web/src/api/products.ts | 16 +- apps/web/src/api/projects.ts | 13 +- apps/web/src/api/subscription.ts | 35 ++-- apps/web/src/api/tasks.ts | 8 +- apps/web/src/api/templates.ts | 10 +- apps/web/src/api/titles.ts | 15 +- apps/web/src/api/voices.ts | 12 +- apps/web/src/components/business/business.css | 36 ++-- apps/web/src/components/layout/Header.tsx | 121 +++++++---- apps/web/src/components/layout/MainLayout.css | 4 +- apps/web/src/components/layout/MainLayout.tsx | 8 +- apps/web/src/hooks/useAuth.ts | 26 +-- apps/web/src/index.css | 9 +- apps/web/src/main.tsx | 66 +++--- apps/web/src/pages/admin/Admin.css | 2 +- apps/web/src/pages/admin/AdminComingSoon.tsx | 14 +- apps/web/src/pages/assets/AssetLibrary.tsx | 175 +++++++++------- apps/web/src/pages/auth/ForgotPassword.css | 12 +- apps/web/src/pages/auth/ForgotPassword.tsx | 43 ++-- apps/web/src/pages/auth/Login.css | 6 +- apps/web/src/pages/auth/Login.tsx | 32 +-- apps/web/src/pages/auth/Register.css | 6 +- apps/web/src/pages/auth/Register.tsx | 47 ++--- apps/web/src/pages/auth/ResetPassword.css | 12 +- apps/web/src/pages/auth/ResetPassword.tsx | 48 +++-- apps/web/src/pages/dashboard/Dashboard.tsx | 140 ++++++------- .../pages/duplication/DuplicationDetail.tsx | 117 +++++------ .../pages/duplication/DuplicationResults.tsx | 136 +++++++------ .../pages/duplication/DuplicationUpload.tsx | 43 ++-- .../pages/editing-planner/EditingPlanner.css | 8 +- .../pages/editing-planner/EditingPlanner.tsx | 190 +++++++++++------- .../components/GenerateModal.tsx | 8 +- .../editing-planner/components/SaveModal.tsx | 14 +- .../components/SettingsPanel.tsx | 134 ++++++++---- .../components/TemplatePanel.tsx | 49 +++-- .../components/TimelinePanel.tsx | 79 +++++--- apps/web/src/pages/generate/GeneratePage.tsx | 123 +++++++----- apps/web/src/pages/history/TaskHistory.tsx | 124 +++++++----- .../src/pages/my-templates/MyTemplates.css | 4 +- .../src/pages/my-templates/MyTemplates.tsx | 80 +++++--- .../web/src/pages/products/ProductLibrary.tsx | 110 +++++----- .../web/src/pages/profile/ProfileSettings.css | 26 +-- apps/web/src/pages/profile/Settings.tsx | 9 +- apps/web/src/pages/subscription/Billing.tsx | 33 +-- apps/web/src/pages/subscription/Plans.css | 18 +- apps/web/src/pages/subscription/Plans.tsx | 141 ++++++------- .../subscription/UpgradeSubscription.css | 4 +- .../subscription/UpgradeSubscription.tsx | 135 ++++++++----- .../src/pages/templates/TemplateLibrary.tsx | 65 +++--- apps/web/src/pages/titles/TitleLibrary.tsx | 129 ++++++------ apps/web/src/pages/voices/VoiceLibrary.tsx | 179 +++++++++-------- apps/web/src/router/index.tsx | 184 +++++++++++------ apps/web/src/store/authStore.ts | 26 ++- apps/web/src/styles/global.css | 84 ++++++-- apps/web/src/test/components/Login.test.tsx | 34 ++-- .../test/components/WorkspaceList.test.tsx | 38 ++-- apps/web/src/test/hooks/useAuth.test.tsx | 74 +++---- apps/web/src/test/setup.ts | 6 +- .../worker/worker_app/tasks/asset_analyzer.py | 1 + apps/worker/worker_app/tasks/ingest.py | 2 +- .../sqlalchemy_impl/recipe_repository.py | 2 +- .../sqlalchemy_impl/template_repository.py | 4 +- packages/shared/__init__.py | 1 - tests/integration/test_projects.py | 8 +- tests/unit/test_auth_middleware.py | 2 +- tests/unit/test_jwt_service.py | 24 +-- 76 files changed, 2161 insertions(+), 1540 deletions(-) create mode 100644 .flake8 diff --git a/.flake8 b/.flake8 new file mode 100644 index 000000000..39b8aef16 --- /dev/null +++ b/.flake8 @@ -0,0 +1,13 @@ +[flake8] +max-line-length = 120 +exclude = + .git, + __pycache__, + .venv, + venv, + node_modules, + alembic + +per-file-ignores = + tests/integration/*:F821 + tests/unit/*:F821 diff --git a/apps/api/app/api/routes/duplication.py b/apps/api/app/api/routes/duplication.py index 3b19b227d..39c94649f 100644 --- a/apps/api/app/api/routes/duplication.py +++ b/apps/api/app/api/routes/duplication.py @@ -59,7 +59,7 @@ def _validate_video_mime_type(content_type: str | None) -> str: if base_type not in ALLOWED_VIDEO_MIME_TYPES: raise HTTPException( status_code=status.HTTP_415_UNSUPPORTED_MEDIA_TYPE, - detail=f"只支持视频文件。支持的类型: mp4, mpeg, mov, avi, webm, mkv, 3gp", + detail="只支持视频文件。支持的类型: mp4, mpeg, mov, avi, webm, mkv, 3gp", ) return base_type diff --git a/apps/api/app/dependencies.py b/apps/api/app/dependencies.py index 7b956e2fd..58f859960 100644 --- a/apps/api/app/dependencies.py +++ b/apps/api/app/dependencies.py @@ -14,7 +14,7 @@ from fastapi import Depends from sqlalchemy.orm import Session from packages.adapters.redis import NoopSessionStore, SessionStore -from packages.adapters.smtp import EmailConfig, NoopEmailService, get_email_service +from packages.adapters.smtp import EmailConfig, EmailService, NoopEmailService, get_email_service from packages.adapters.sqlalchemy_impl.asset_library_repository import ( SQLAlchemyAssetLibraryRepository, ) diff --git a/apps/web/src/api/assets.ts b/apps/web/src/api/assets.ts index d68bd13af..e7672ff06 100644 --- a/apps/web/src/api/assets.ts +++ b/apps/web/src/api/assets.ts @@ -2,8 +2,8 @@ * 素材相关 API * Phase 1 重构：去掉 project_id，素材直接归属用户 */ -import apiClient from './client'; -import { getOrCreateDefaultProject } from './projects'; +import apiClient from "./client"; +import { getOrCreateDefaultProject } from "./projects"; /** 素材条目 */ export interface AssetItem { @@ -24,7 +24,7 @@ export interface AssetItem { export interface AssetLibraryItem { id: string; name: string; - kind: 'video' | 'voice' | 'image'; + kind: "video" | "voice" | "image"; asset_count?: number; total_size?: number; created_at?: string; @@ -35,7 +35,7 @@ export interface IngestJob { id: string; library_id: string; storage_key: string; - status: 'pending' | 'processing' | 'completed' | 'failed'; + status: "pending" | "processing" | "completed" | "failed"; error_message: string; result_asset_id: string; } @@ -44,7 +44,7 @@ export interface IngestJob { export interface ClassificationJob { id: string; asset_id: string; - status: 'pending' | 'processing' | 'completed' | 'failed'; + status: "pending" | "processing" | "completed" | "failed"; classification: string; confidence: number; error_message: string; @@ -72,7 +72,7 @@ export interface AssetDiagnosis { }>; gaps: Array<{ key: string; - severity: 'critical' | 'warning' | 'info'; + severity: "critical" | "warning" | "info"; message: string; recommendation: string; }>; @@ -82,7 +82,7 @@ export interface AssetDiagnosis { /** 获取当前用户的素材诊断信息 */ export const getAssetDiagnosis = async (): Promise => { - const response = await apiClient.get('/asset-diagnosis'); + const response = await apiClient.get("/asset-diagnosis"); return response.data; }; @@ -90,18 +90,18 @@ export const getAssetDiagnosis = async (): Promise => { /** 获取当前用户的所有素材库 */ export const getAssetLibraries = async (): Promise => { - const response = await apiClient.get('/asset-libraries'); + const response = await apiClient.get("/asset-libraries"); return response.data.items || []; }; /** 创建素材库（自动获取或创建默认项目以提供 project_id） */ export const createAssetLibrary = async (data: { name: string; - kind: 'video' | 'voice' | 'image'; + kind: "video" | "voice" | "image"; }): Promise => { // 后端要求 project_id，前端自动管理默认项目 const project = await getOrCreateDefaultProject(); - const response = await apiClient.post('/asset-libraries', { + const response = await apiClient.post("/asset-libraries", { project_id: project.id, ...data, }); @@ -117,7 +117,7 @@ export const deleteAssetLibrary = async (libraryId: string): Promise => { /** 获取素材库下的所有素材 */ export const getAssets = async (libraryId: string): Promise => { - const response = await apiClient.get('/assets', { + const response = await apiClient.get("/assets", { params: { library_id: libraryId }, }); return response.data.items || []; @@ -126,7 +126,7 @@ export const getAssets = async (libraryId: string): Promise => { /** 更新素材审核状态 */ export const updateAssetReviewStatus = async ( assetId: string, - reviewStatus: 'pending_review' | 'approved' | 'rejected' + reviewStatus: "pending_review" | "approved" | "rejected", ): Promise => { const response = await apiClient.patch(`/assets/${assetId}/review`, { review_status: reviewStatus, @@ -143,10 +143,10 @@ export const deleteAsset = async (assetId: string): Promise => { /** 表单上传素材（小文件） */ export const uploadAsset = async ( - formData: FormData + formData: FormData, ): Promise<{ storage_key: string; ingest_job_id: string; url: string }> => { - const response = await apiClient.post('/upload', formData, { - headers: { 'Content-Type': 'multipart/form-data' }, + const response = await apiClient.post("/upload", formData, { + headers: { "Content-Type": "multipart/form-data" }, timeout: 30 * 60 * 1000, }); return response.data; @@ -167,7 +167,7 @@ export const prepareDirectUpload = async (data: { fields: Record; max_size_bytes: number; }> => { - const response = await apiClient.post('/upload/direct/prepare', data); + const response = await apiClient.post("/upload/direct/prepare", data); return response.data; }; @@ -177,7 +177,7 @@ export const completeDirectUpload = async (data: { library_id: string; storage_key: string; }): Promise<{ storage_key: string; ingest_job_id: string }> => { - const response = await apiClient.post('/upload/direct/complete', data); + const response = await apiClient.post("/upload/direct/complete", data); return response.data; }; @@ -193,15 +193,15 @@ export const uploadAssetDirect = async (data: { project_id: project.id, library_id: data.library_id, filename: data.file.name, - content_type: data.file.type || 'application/octet-stream', + content_type: data.file.type || "application/octet-stream", file_size: data.file.size, }); const directForm = new FormData(); Object.entries(prepared.fields).forEach(([key, value]) => - directForm.append(key, value) + directForm.append(key, value), ); - directForm.append('file', data.file); + directForm.append("file", data.file); const uploadResponse = await fetch(prepared.upload_url, { method: prepared.method, @@ -230,13 +230,13 @@ export const getIngestJob = async (jobId: string): Promise => { export const submitClassificationJob = async (data: { asset_id: string; }): Promise => { - const response = await apiClient.post('/classification-jobs', data); + const response = await apiClient.post("/classification-jobs", data); return response.data; }; /** 查询分类任务状态 */ export const getClassificationJob = async ( - jobId: string + jobId: string, ): Promise => { const response = await apiClient.get(`/classification-jobs/${jobId}`); return response.data; diff --git a/apps/web/src/api/auth.test.ts b/apps/web/src/api/auth.test.ts index 6af5fd15b..2e79905f4 100644 --- a/apps/web/src/api/auth.test.ts +++ b/apps/web/src/api/auth.test.ts @@ -1,47 +1,47 @@ -import { describe, expect, it } from 'vitest'; -import { normalizeUser } from './auth'; +import { describe, expect, it } from "vitest"; +import { normalizeUser } from "./auth"; -describe('normalizeUser', () => { - it('normalizes canonical API current-user fields', () => { +describe("normalizeUser", () => { + it("normalizes canonical API current-user fields", () => { expect( normalizeUser({ - user_id: 'user-1', - email: 'user@example.com', - username: 'user', - display_name: 'User', + user_id: "user-1", + email: "user@example.com", + username: "user", + display_name: "User", email_verified: true, - }) + }), ).toEqual({ - id: 'user-1', - user_id: 'user-1', - email: 'user@example.com', - username: 'user', - display_name: 'User', + id: "user-1", + user_id: "user-1", + email: "user@example.com", + username: "user", + display_name: "User", is_email_verified: true, email_verified: true, created_at: undefined, }); }); - it('keeps compatibility with legacy UI-shaped user fields', () => { + it("keeps compatibility with legacy UI-shaped user fields", () => { expect( normalizeUser({ - id: 'user-2', - email: 'legacy@example.com', - username: 'legacy', - display_name: 'Legacy', + id: "user-2", + email: "legacy@example.com", + username: "legacy", + display_name: "Legacy", is_email_verified: false, - created_at: '2026-06-22T00:00:00Z', - }) + created_at: "2026-06-22T00:00:00Z", + }), ).toEqual({ - id: 'user-2', - user_id: 'user-2', - email: 'legacy@example.com', - username: 'legacy', - display_name: 'Legacy', + id: "user-2", + user_id: "user-2", + email: "legacy@example.com", + username: "legacy", + display_name: "Legacy", is_email_verified: false, email_verified: false, - created_at: '2026-06-22T00:00:00Z', + created_at: "2026-06-22T00:00:00Z", }); }); }); diff --git a/apps/web/src/api/auth.ts b/apps/web/src/api/auth.ts index 00e6774bc..90e3da319 100644 --- a/apps/web/src/api/auth.ts +++ b/apps/web/src/api/auth.ts @@ -1,7 +1,7 @@ /** * 认证相关 API */ -import apiClient from './client'; +import apiClient from "./client"; // 类型定义 export interface LoginRequest { @@ -50,7 +50,7 @@ export interface UserResponse { } export const normalizeUser = (data: UserResponse): User => { - const userId = data.id ?? data.user_id ?? ''; + const userId = data.id ?? data.user_id ?? ""; const emailVerified = data.is_email_verified ?? data.email_verified ?? false; return { @@ -67,39 +67,43 @@ export const normalizeUser = (data: UserResponse): User => { // 登录 export const login = async (data: LoginRequest): Promise => { - const response = await apiClient.post('/auth/login', data); + const response = await apiClient.post("/auth/login", data); return response.data; }; // 注册 -export const register = async (data: RegisterRequest): Promise<{ message: string }> => { - const response = await apiClient.post('/auth/register', data); +export const register = async ( + data: RegisterRequest, +): Promise<{ message: string }> => { + const response = await apiClient.post("/auth/register", data); return response.data; }; // 登出 export const logout = async (): Promise => { - await apiClient.post('/auth/logout'); + await apiClient.post("/auth/logout"); }; // 获取当前用户 export const getCurrentUser = async (): Promise => { - const response = await apiClient.get('/auth/me'); + const response = await apiClient.get("/auth/me"); return normalizeUser(response.data); }; // 请求密码重置 -export const requestPasswordReset = async (email: string): Promise<{ message: string }> => { - const response = await apiClient.post('/auth/forgot-password', { email }); +export const requestPasswordReset = async ( + email: string, +): Promise<{ message: string }> => { + const response = await apiClient.post("/auth/forgot-password", { email }); return response.data; }; // 重置密码 export const resetPassword = async ( token: string, - newPassword: string + newPassword: string, ): Promise<{ message: string }> => { - const response = await apiClient.post('/auth/reset-password', { + const response = await apiClient.post("/auth/reset-password", { token, new_password: newPassword, }); @@ -107,7 +111,9 @@ export const resetPassword = async ( }; // 验证邮箱 -export const verifyEmail = async (token: string): Promise<{ message: string }> => { - const response = await apiClient.post('/auth/verify-email', { token }); +export const verifyEmail = async ( + token: string, +): Promise<{ message: string }> => { + const response = await apiClient.post("/auth/verify-email", { token }); return response.data; }; diff --git a/apps/web/src/api/client.ts b/apps/web/src/api/client.ts index 751418195..3b5ccfb65 100644 --- a/apps/web/src/api/client.ts +++ b/apps/web/src/api/client.ts @@ -2,23 +2,23 @@ * API 客户端配置 * 封装 Axios 实例，配置拦截器和 Token 管理 */ -import axios, { AxiosError, InternalAxiosRequestConfig } from 'axios'; -import { message } from 'antd'; -import { useAuthStore } from '@/store/authStore'; +import axios, { AxiosError, InternalAxiosRequestConfig } from "axios"; +import { message } from "antd"; +import { useAuthStore } from "@/store/authStore"; // 创建 Axios 实例 const apiClient = axios.create({ - baseURL: '/api/v1', + baseURL: "/api/v1", timeout: 10000, headers: { - 'Content-Type': 'application/json', + "Content-Type": "application/json", }, }); // 请求拦截器：添加 Token apiClient.interceptors.request.use( (config: InternalAxiosRequestConfig) => { - const token = localStorage.getItem('access_token'); + const token = localStorage.getItem("access_token"); if (token && config.headers) { config.headers.Authorization = `Bearer ${token}`; } @@ -26,13 +26,15 @@ apiClient.interceptors.request.use( }, (error: AxiosError) => { return Promise.reject(error); - } + }, ); // 响应拦截器：统一错误提示 + 处理未授权状态 apiClient.interceptors.response.use( (response) => response, - async (error: AxiosError<{ detail?: string; message?: string; msg?: string }>) => { + async ( + error: AxiosError<{ detail?: string; message?: string; msg?: string }>, + ) => { // 401 → 清除登录态 if (error.response?.status === 401) { useAuthStore.getState().clearAuth(); @@ -43,11 +45,11 @@ apiClient.interceptors.response.use( const serverMsg = data?.detail || data?.message || data?.msg; let handled = false; - if (error.code === 'ECONNABORTED' || error.message?.includes('timeout')) { - message.error('请求超时，请检查网络后重试'); + if (error.code === "ECONNABORTED" || error.message?.includes("timeout")) { + message.error("请求超时，请检查网络后重试"); handled = true; } else if (!error.response) { - message.error('网络连接异常，请检查网络设置'); + message.error("网络连接异常，请检查网络设置"); handled = true; } else if (serverMsg) { message.error(serverMsg); @@ -55,16 +57,16 @@ apiClient.interceptors.response.use( } else { const status = error.response?.status; if (status === 413) { - message.error('文件过大，请缩小后重试'); + message.error("文件过大，请缩小后重试"); handled = true; } else if (status === 415) { - message.error('不支持的文件格式'); + message.error("不支持的文件格式"); handled = true; } else if (status === 503) { - message.error('服务暂不可用，请稍后再试'); + message.error("服务暂不可用，请稍后再试"); handled = true; } else if (status && status >= 500) { - message.error('服务器繁忙，请稍后再试'); + message.error("服务器繁忙，请稍后再试"); handled = true; } // 其他 4xx 且无具体信息时不弹通用提示，由各组件自行处理 @@ -77,7 +79,7 @@ apiClient.interceptors.response.use( } return Promise.reject(error); - } + }, ); export default apiClient; diff --git a/apps/web/src/api/dashboard.ts b/apps/web/src/api/dashboard.ts index 4fe3f6e6f..6522aa71e 100644 --- a/apps/web/src/api/dashboard.ts +++ b/apps/web/src/api/dashboard.ts @@ -2,7 +2,7 @@ * 仪表盘 API * Phase 1 新增：用户仪表盘概览 */ -import apiClient from './client'; +import apiClient from "./client"; /** 仪表盘概览数据 */ export interface DashboardOverview { @@ -29,15 +29,14 @@ export interface DashboardOverview { }>; /** 订阅信息 */ subscription: { - plan: 'free' | 'pro' | 'enterprise'; - status: 'active' | 'inactive' | 'expired'; + plan: "free" | "pro" | "enterprise"; + status: "active" | "inactive" | "expired"; expires_at?: string; }; } /** 获取仪表盘概览数据 */ -export const getDashboardOverview = - async (): Promise => { - const response = await apiClient.get('/dashboard/overview'); - return response.data; - }; +export const getDashboardOverview = async (): Promise => { + const response = await apiClient.get("/dashboard/overview"); + return response.data; +}; diff --git a/apps/web/src/api/duplication.ts b/apps/web/src/api/duplication.ts index d828f9235..2314ee76a 100644 --- a/apps/web/src/api/duplication.ts +++ b/apps/web/src/api/duplication.ts @@ -2,10 +2,11 @@ * 查重 API 模块 * 提供视频查重相关接口（当前使用 mock 数据，后端就绪后切换） */ -import apiClient from './client'; +import apiClient from "./client"; /** 查重记录状态 */ -export type DuplicationStatus = 'pending' | 'processing' | 'completed' | 'failed'; +export type DuplicationStatus = + "pending" | "processing" | "completed" | "failed"; /** 查重记录 */ export interface DuplicationRecord { @@ -68,55 +69,55 @@ export interface DuplicationUploadResponse { /** mock 查重记录列表 */ const MOCK_RECORDS: DuplicationRecord[] = [ { - id: 'dup-001', - filename: '日常vlog_01.mp4', + id: "dup-001", + filename: "日常vlog_01.mp4", file_size: 125_000_000, duration_seconds: 180, - status: 'completed', + status: "completed", duplicate_rate: 23.5, duplicate_count: 3, - created_at: '2026-06-27T10:00:00Z', - updated_at: '2026-06-27T10:05:00Z', + created_at: "2026-06-27T10:00:00Z", + updated_at: "2026-06-27T10:05:00Z", }, { - id: 'dup-002', - filename: '美食分享_片段.mp4', + id: "dup-002", + filename: "美食分享_片段.mp4", file_size: 45_000_000, duration_seconds: 60, - status: 'completed', + status: "completed", duplicate_rate: 5.2, duplicate_count: 1, - created_at: '2026-06-27T11:30:00Z', - updated_at: '2026-06-27T11:32:00Z', + created_at: "2026-06-27T11:30:00Z", + updated_at: "2026-06-27T11:32:00Z", }, { - id: 'dup-003', - filename: '旅行记录_巴黎.mp4', + id: "dup-003", + filename: "旅行记录_巴黎.mp4", file_size: 320_000_000, duration_seconds: 420, - status: 'processing', - created_at: '2026-06-28T09:00:00Z', - updated_at: '2026-06-28T09:00:00Z', + status: "processing", + created_at: "2026-06-28T09:00:00Z", + updated_at: "2026-06-28T09:00:00Z", }, { - id: 'dup-004', - filename: '产品展示_新版.mp4', + id: "dup-004", + filename: "产品展示_新版.mp4", file_size: 88_000_000, duration_seconds: 90, - status: 'completed', + status: "completed", duplicate_rate: 67.8, duplicate_count: 8, - created_at: '2026-06-26T15:00:00Z', - updated_at: '2026-06-26T15:10:00Z', + created_at: "2026-06-26T15:00:00Z", + updated_at: "2026-06-26T15:10:00Z", }, { - id: 'dup-005', - filename: '教程_剪辑技巧.mp4', + id: "dup-005", + filename: "教程_剪辑技巧.mp4", file_size: 200_000_000, duration_seconds: 300, - status: 'failed', - created_at: '2026-06-26T14:00:00Z', - updated_at: '2026-06-26T14:01:00Z', + status: "failed", + created_at: "2026-06-26T14:00:00Z", + updated_at: "2026-06-26T14:01:00Z", }, ]; @@ -125,31 +126,31 @@ const MOCK_DETAIL: DuplicationDetail = { ...MOCK_RECORDS[0], segments: [ { - id: 'seg-001', + id: "seg-001", source_start: 10, source_end: 25, - matched_video_id: 'asset-101', - matched_video_name: '日常vlog_素材库.mp4', + matched_video_id: "asset-101", + matched_video_name: "日常vlog_素材库.mp4", matched_start: 45, matched_end: 60, similarity: 92.3, }, { - id: 'seg-002', + id: "seg-002", source_start: 60, source_end: 78, - matched_video_id: 'asset-205', - matched_video_name: '城市风光_合集.mp4', + matched_video_id: "asset-205", + matched_video_name: "城市风光_合集.mp4", matched_start: 120, matched_end: 138, similarity: 85.7, }, { - id: 'seg-003', + id: "seg-003", source_start: 150, source_end: 165, - matched_video_id: 'asset-310', - matched_video_name: '背景音乐_配套画面.mp4', + matched_video_id: "asset-310", + matched_video_name: "背景音乐_配套画面.mp4", matched_start: 30, matched_end: 45, similarity: 78.1, @@ -164,21 +165,21 @@ const USE_MOCK = true; /** 上传视频进行查重 */ export const uploadForDuplication = async ( - file: File + file: File, ): Promise => { if (USE_MOCK) { // 模拟上传延迟 await new Promise((resolve) => setTimeout(resolve, 1500)); return { id: `dup-${Date.now()}`, - status: 'processing', + status: "processing", message: `文件 "${file.name}" 已上传，正在查重中...`, }; } const formData = new FormData(); - formData.append('file', file); - const response = await apiClient.post('/duplication/upload', formData, { - headers: { 'Content-Type': 'multipart/form-data' }, + formData.append("file", file); + const response = await apiClient.post("/duplication/upload", formData, { + headers: { "Content-Type": "multipart/form-data" }, }); return response.data; }; @@ -189,13 +190,13 @@ export const getDuplicationRecords = async (): Promise => { await new Promise((resolve) => setTimeout(resolve, 300)); return MOCK_RECORDS; } - const response = await apiClient.get('/duplication/records'); + const response = await apiClient.get("/duplication/records"); return response.data; }; /** 获取查重详情 */ export const getDuplicationDetail = async ( - recordId: string + recordId: string, ): Promise => { if (USE_MOCK) { await new Promise((resolve) => setTimeout(resolve, 300)); @@ -208,7 +209,7 @@ export const getDuplicationDetail = async ( /** 删除查重记录 */ export const deleteDuplicationRecord = async ( - recordId: string + recordId: string, ): Promise => { if (USE_MOCK) { await new Promise((resolve) => setTimeout(resolve, 200)); @@ -219,16 +220,18 @@ export const deleteDuplicationRecord = async ( /** 重新查重 */ export const retryDuplication = async ( - recordId: string + recordId: string, ): Promise => { if (USE_MOCK) { await new Promise((resolve) => setTimeout(resolve, 500)); return { id: recordId, - status: 'processing', - message: '已重新提交查重', + status: "processing", + message: "已重新提交查重", }; } - const response = await apiClient.post(`/duplication/records/${recordId}/retry`); + const response = await apiClient.post( + `/duplication/records/${recordId}/retry`, + ); return response.data; }; diff --git a/apps/web/src/api/editingPlanner.ts b/apps/web/src/api/editingPlanner.ts index 9c032d66a..79d01189a 100644 --- a/apps/web/src/api/editingPlanner.ts +++ b/apps/web/src/api/editingPlanner.ts @@ -2,27 +2,27 @@ * 剪辑计划编辑器 API * 对接后端 /api/v1/templates 路由 */ -import apiClient from './client'; +import apiClient from "./client"; /* ──────────── 类型定义 ──────────── */ /** 模板模式（后端枚举值） */ -export type TemplateMode = 'pip' | 'voice_over' | 'one_take' | 'voice_pip'; +export type TemplateMode = "pip" | "voice_over" | "one_take" | "voice_pip"; /** 模式显示名称映射 */ export const MODE_LABELS: Record = { - pip: '画中画', - voice_over: '人物口播', - one_take: '一镜到底', - voice_pip: '口播+混剪', + pip: "画中画", + voice_over: "人物口播", + one_take: "一镜到底", + voice_pip: "口播+混剪", }; /** 模式颜色映射 */ export const MODE_COLORS: Record = { - pip: 'blue', - voice_over: 'green', - one_take: 'orange', - voice_pip: 'purple', + pip: "blue", + voice_over: "green", + one_take: "orange", + voice_pip: "purple", }; /** 标题配置 */ @@ -94,7 +94,7 @@ export interface SaveTemplatePayload { subtitle_config: SubtitleConfig; bgm_config: BgmConfig; estimated_duration: number; - segments: Omit[]; + segments: Omit[]; } /** 使用模板生成请求体 */ @@ -135,20 +135,23 @@ export const getEditingTemplates = async (params?: { skip?: number; limit?: number; }): Promise => { - const response = await apiClient.get('/templates', { + const response = await apiClient.get("/templates", { params: { skip: params?.skip ?? 0, limit: params?.limit ?? 50, }, }); let list = response.data.items; - if (params?.category) list = list.filter((t) => t.category === params.category); + if (params?.category) + list = list.filter((t) => t.category === params.category); if (params?.tag) list = list.filter((t) => t.tags.includes(params.tag!)); return list; }; /** 获取模板详情 */ -export const getEditingTemplate = async (id: string): Promise => { +export const getEditingTemplate = async ( + id: string, +): Promise => { const response = await apiClient.get(`/templates/${id}`); return response.data; }; @@ -157,7 +160,7 @@ export const getEditingTemplate = async (id: string): Promise = export const createEditingTemplate = async ( data: SaveTemplatePayload, ): Promise => { - const response = await apiClient.post('/templates', data); + const response = await apiClient.post("/templates", data); return response.data; }; @@ -166,7 +169,10 @@ export const updateEditingTemplate = async ( id: string, data: SaveTemplatePayload, ): Promise => { - const response = await apiClient.patch(`/templates/${id}`, data); + const response = await apiClient.patch( + `/templates/${id}`, + data, + ); return response.data; }; @@ -177,7 +183,9 @@ export const deleteEditingTemplate = async (id: string): Promise => { /** 获取模板分类列表 */ export const getTemplateCategories = async (): Promise => { - const response = await apiClient.get('/templates/categories/list'); + const response = await apiClient.get( + "/templates/categories/list", + ); return response.data.items; }; diff --git a/apps/web/src/api/products.ts b/apps/web/src/api/products.ts index 948b0a4c3..8b5dc4375 100644 --- a/apps/web/src/api/products.ts +++ b/apps/web/src/api/products.ts @@ -2,7 +2,7 @@ * 成品相关 API * Phase 1 重构：去掉 projectId，成品直接归属用户 */ -import apiClient from './client'; +import apiClient from "./client"; /** 成品条目 */ export interface ProductItem { @@ -13,7 +13,7 @@ export interface ProductItem { duration_seconds?: number; file_size?: number; resolution?: string; - status: 'processing' | 'completed' | 'failed'; + status: "processing" | "completed" | "failed"; /** 查重率（百分比） */ duplicate_rate?: number; created_at?: string; @@ -22,14 +22,12 @@ export interface ProductItem { /** 获取当前用户的所有成品 */ export const getProducts = async (): Promise => { - const response = await apiClient.get('/products'); + const response = await apiClient.get("/products"); return response.data.items || response.data || []; }; /** 获取单个成品详情 */ -export const getProduct = async ( - productId: string -): Promise => { +export const getProduct = async (productId: string): Promise => { const response = await apiClient.get(`/products/${productId}`); return response.data; }; @@ -41,10 +39,8 @@ export const deleteProduct = async (productId: string): Promise => { /** 获取成品下载链接 */ export const getProductDownloadUrl = async ( - productId: string + productId: string, ): Promise<{ url: string; expires_at: string }> => { - const response = await apiClient.get( - `/products/${productId}/download-url` - ); + const response = await apiClient.get(`/products/${productId}/download-url`); return response.data; }; diff --git a/apps/web/src/api/projects.ts b/apps/web/src/api/projects.ts index fb3d73bb1..5d46a1ddc 100644 --- a/apps/web/src/api/projects.ts +++ b/apps/web/src/api/projects.ts @@ -2,7 +2,7 @@ * 项目相关 API * 素材库需要 project_id，前端自动管理默认项目 */ -import apiClient from './client'; +import apiClient from "./client"; export interface ProjectItem { id: string; @@ -30,7 +30,8 @@ const toProjectItem = (item: BackendProjectResponse): ProjectItem => ({ /** 获取当前用户的项目列表 */ export const getProjects = async (): Promise => { - const response = await apiClient.get('/projects'); + const response = + await apiClient.get("/projects"); return (response.data.items || []).map(toProjectItem); }; @@ -39,9 +40,9 @@ export const createProject = async (data: { name: string; description?: string; }): Promise => { - const response = await apiClient.post('/projects', { + const response = await apiClient.post("/projects", { name: data.name, - description: data.description || '', + description: data.description || "", }); return toProjectItem(response.data); }; @@ -54,7 +55,7 @@ export const getOrCreateDefaultProject = async (): Promise => { } // 没有项目时自动创建默认项目 return createProject({ - name: '默认项目', - description: '系统自动创建的默认项目', + name: "默认项目", + description: "系统自动创建的默认项目", }); }; diff --git a/apps/web/src/api/subscription.ts b/apps/web/src/api/subscription.ts index 5bba83b3b..c4eac3b4b 100644 --- a/apps/web/src/api/subscription.ts +++ b/apps/web/src/api/subscription.ts @@ -2,19 +2,19 @@ * 订阅 API 模块 * 对接后端订阅管理接口 */ -import apiClient from './client'; +import apiClient from "./client"; /** 套餐类型 */ -export type PlanType = 'free' | 'standard' | 'pro' | 'enterprise'; +export type PlanType = "free" | "standard" | "pro" | "enterprise"; /** 订阅状态 */ -export type SubscriptionStatus = 'active' | 'expired' | 'cancelled' | 'trial'; +export type SubscriptionStatus = "active" | "expired" | "cancelled" | "trial"; /** 账单状态 */ -export type BillingStatus = 'paid' | 'pending' | 'failed' | 'refunded'; +export type BillingStatus = "paid" | "pending" | "failed" | "refunded"; /** 计费周期 */ -export type BillingCycle = 'monthly' | 'yearly'; +export type BillingCycle = "monthly" | "yearly"; /** 套餐信息 */ export interface Plan { @@ -70,30 +70,39 @@ export interface ChangePlanResponse { /** 获取当前订阅信息 */ export const getCurrentSubscription = async (): Promise => { - const response = await apiClient.get('/subscription/current'); + const response = await apiClient.get("/subscription/current"); return response.data; }; /** 获取账单记录列表 */ export const getBillingRecords = async (): Promise => { - const response = await apiClient.get('/subscription/billing-records'); + const response = await apiClient.get("/subscription/billing-records"); return response.data; }; /** 升级/降级套餐 */ -export const changePlan = async (request: ChangePlanRequest): Promise => { - const response = await apiClient.post('/subscription/change-plan', request); +export const changePlan = async ( + request: ChangePlanRequest, +): Promise => { + const response = await apiClient.post("/subscription/change-plan", request); return response.data; }; /** 取消订阅 */ -export const cancelSubscription = async (): Promise<{ success: boolean; message: string }> => { - const response = await apiClient.post('/subscription/cancel'); +export const cancelSubscription = async (): Promise<{ + success: boolean; + message: string; +}> => { + const response = await apiClient.post("/subscription/cancel"); return response.data; }; /** 切换自动续费 */ -export const toggleAutoRenew = async (enabled: boolean): Promise<{ success: boolean; message: string }> => { - const response = await apiClient.post('/subscription/toggle-auto-renew', { enabled }); +export const toggleAutoRenew = async ( + enabled: boolean, +): Promise<{ success: boolean; message: string }> => { + const response = await apiClient.post("/subscription/toggle-auto-renew", { + enabled, + }); return response.data; }; diff --git a/apps/web/src/api/tasks.ts b/apps/web/src/api/tasks.ts index de9ed2e89..23276f5c7 100644 --- a/apps/web/src/api/tasks.ts +++ b/apps/web/src/api/tasks.ts @@ -5,14 +5,14 @@ * - GET /api/v1/tasks — 用户级任务列表（跨 project） * - POST /api/v1/tasks/{task_id}/retry — 简化重试 */ -import apiClient from './client'; +import apiClient from "./client"; /* ──────────── 类型定义 ──────────── */ /** 任务条目（对应用户级 UserTaskResponse） */ export interface TaskItem { id: string; - task_type: 'ingest' | 'generation' | string; + task_type: "ingest" | "generation" | string; project_id: string; template_id: string; status: string; @@ -58,7 +58,7 @@ export const createGenerationTask = async ( params: CreateGenerationTaskRequest, ): Promise => { const { data } = await apiClient.post( - '/generation/tasks', + "/generation/tasks", params, ); return data; @@ -66,7 +66,7 @@ export const createGenerationTask = async ( /** 获取当前用户的所有任务（跨 project） */ export const getUserTasks = async (): Promise => { - const { data } = await apiClient.get('/tasks'); + const { data } = await apiClient.get("/tasks"); return data.items || []; }; diff --git a/apps/web/src/api/templates.ts b/apps/web/src/api/templates.ts index a39cd2684..d1889e442 100644 --- a/apps/web/src/api/templates.ts +++ b/apps/web/src/api/templates.ts @@ -2,7 +2,7 @@ * 模板相关 API * Phase 1 新增：全局模板库 */ -import apiClient from './client'; +import apiClient from "./client"; /** 模板条目 */ export interface TemplateItem { @@ -21,13 +21,13 @@ export interface TemplateItem { /** 获取全局模板列表 */ export const getTemplates = async (): Promise => { - const response = await apiClient.get('/templates'); + const response = await apiClient.get("/templates"); return response.data.items || response.data || []; }; /** 获取单个模板详情 */ export const getTemplate = async ( - templateId: string + templateId: string, ): Promise => { const response = await apiClient.get(`/templates/${templateId}`); return response.data; @@ -35,10 +35,10 @@ export const getTemplate = async ( /** 收藏 / 取消收藏模板 */ export const toggleFavoriteTemplate = async ( - templateId: string + templateId: string, ): Promise<{ is_favorite: boolean }> => { const response = await apiClient.post( - `/templates/${templateId}/toggle-favorite` + `/templates/${templateId}/toggle-favorite`, ); return response.data; }; diff --git a/apps/web/src/api/titles.ts b/apps/web/src/api/titles.ts index 376d21e0c..68dec6a90 100644 --- a/apps/web/src/api/titles.ts +++ b/apps/web/src/api/titles.ts @@ -3,7 +3,7 @@ * Phase 1 新增：全局标题库 * 注意：后端 schema 使用 name + text 字段，前端 UI 用 content 展示 */ -import apiClient from './client'; +import apiClient from "./client"; /** 标题条目（前端展示用） */ export interface TitleItem { @@ -68,7 +68,9 @@ export interface CreateTitleRequest { /** 获取当前用户的所有标题 */ export const getTitles = async (): Promise => { - const response = await apiClient.get<{ items: BackendTitleResponse[] }>('/titles'); + const response = await apiClient.get<{ items: BackendTitleResponse[] }>( + "/titles", + ); return (response.data.items || []).map(toTitleItem); }; @@ -80,9 +82,12 @@ export const createTitle = async ( const payload: BackendCreateTitleRequest = { name: data.content.slice(0, 255), text: data.content.slice(0, 500), - category: data.category || 'default', + category: data.category || "default", }; - const response = await apiClient.post('/titles', payload); + const response = await apiClient.post( + "/titles", + payload, + ); return toTitleItem(response.data); }; @@ -116,6 +121,6 @@ export const deleteTitle = async (titleId: string): Promise => { export const batchImportTitles = async ( titles: string[], ): Promise<{ imported_count: number }> => { - const response = await apiClient.post('/titles/batch-import', { titles }); + const response = await apiClient.post("/titles/batch-import", { titles }); return response.data; }; diff --git a/apps/web/src/api/voices.ts b/apps/web/src/api/voices.ts index 84ea882ff..a0fd1b1f1 100644 --- a/apps/web/src/api/voices.ts +++ b/apps/web/src/api/voices.ts @@ -2,7 +2,7 @@ * 配音相关 API * Phase 1 新增：全局配音库 */ -import apiClient from './client'; +import apiClient from "./client"; /** 配音条目 */ export interface VoiceItem { @@ -28,22 +28,22 @@ export interface CreateVoiceRequest { /** 获取当前用户的所有配音 */ export const getVoices = async (): Promise => { - const response = await apiClient.get('/voices'); + const response = await apiClient.get("/voices"); return response.data.items || response.data || []; }; /** 创建配音 */ export const createVoice = async ( - data: CreateVoiceRequest + data: CreateVoiceRequest, ): Promise => { - const response = await apiClient.post('/voices', data); + const response = await apiClient.post("/voices", data); return response.data; }; /** 更新配音 */ export const updateVoice = async ( voiceId: string, - data: Partial + data: Partial, ): Promise => { const response = await apiClient.patch(`/voices/${voiceId}`, data); return response.data; @@ -60,6 +60,6 @@ export const generateAIVoice = async (data: { voice_type?: string; speed?: number; }): Promise => { - const response = await apiClient.post('/voices/generate', data); + const response = await apiClient.post("/voices/generate", data); return response.data; }; diff --git a/apps/web/src/components/business/business.css b/apps/web/src/components/business/business.css index fff1897e2..43ae2d92b 100644 --- a/apps/web/src/components/business/business.css +++ b/apps/web/src/components/business/business.css @@ -8,14 +8,14 @@ border-radius: 14px !important; padding: 10px 20px !important; font-weight: 600 !important; - box-shadow: 0 14px 26px rgba(79,70,229,0.22) !important; + box-shadow: 0 14px 26px rgba(79, 70, 229, 0.22) !important; transition: all 0.2s !important; cursor: pointer; height: auto !important; } .xx-primary-btn:hover { - box-shadow: 0 18px 34px rgba(79,70,229,0.28) !important; + box-shadow: 0 18px 34px rgba(79, 70, 229, 0.28) !important; transform: translateY(-1px); } @@ -37,17 +37,17 @@ /* ==================== 卡片 ==================== */ .xx-card { - background: rgba(255,255,255,0.94); - border: 1px solid rgba(226,232,240,0.95); + background: rgba(255, 255, 255, 0.94); + border: 1px solid rgba(226, 232, 240, 0.95); border-radius: 22px; - box-shadow: 0 24px 70px rgba(15,23,42,0.09); + box-shadow: 0 24px 70px rgba(15, 23, 42, 0.09); padding: 24px; margin-bottom: 20px; transition: all 0.25s; } .xx-card:hover { - box-shadow: 0 26px 64px rgba(15,23,42,0.14); + box-shadow: 0 26px 64px rgba(15, 23, 42, 0.14); transform: translateY(-2px); } @@ -81,10 +81,10 @@ /* ==================== 表格样式 ==================== */ .xx-table-card { - background: rgba(255,255,255,0.94); - border: 1px solid rgba(226,232,240,0.95); + background: rgba(255, 255, 255, 0.94); + border: 1px solid rgba(226, 232, 240, 0.95); border-radius: 22px; - box-shadow: 0 24px 70px rgba(15,23,42,0.09); + box-shadow: 0 24px 70px rgba(15, 23, 42, 0.09); padding: 20px; overflow: hidden; } @@ -145,7 +145,7 @@ .xx-search-input:focus { border-color: #4f46e5; - box-shadow: 0 0 0 4px rgba(79,70,229,0.1); + box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1); } /* ==================== Modal ==================== */ @@ -203,7 +203,9 @@ } @media (max-width: 768px) { - .xx-grid-2, .xx-grid-3, .xx-grid-4 { + .xx-grid-2, + .xx-grid-3, + .xx-grid-4 { grid-template-columns: 1fr; } } @@ -219,7 +221,7 @@ .xx-quota-item:hover { border-color: #4f46e5; - box-shadow: 0 8px 24px rgba(79,70,229,0.1); + box-shadow: 0 8px 24px rgba(79, 70, 229, 0.1); } /* ==================== 进度条 ==================== */ @@ -249,7 +251,7 @@ /* Card overrides */ .ant-card { border-radius: 22px !important; - border: 1px solid rgba(226,232,240,0.95) !important; + border: 1px solid rgba(226, 232, 240, 0.95) !important; } .ant-card-head { @@ -298,7 +300,7 @@ background: linear-gradient(135deg, #6366f1, #4f46e5) !important; border: none !important; border-radius: 14px !important; - box-shadow: 0 14px 26px rgba(79,70,229,0.22) !important; + box-shadow: 0 14px 26px rgba(79, 70, 229, 0.22) !important; height: auto !important; padding: 10px 20px !important; font-weight: 600 !important; @@ -306,7 +308,7 @@ .ant-btn-primary:hover { background: linear-gradient(135deg, #6366f1, #4f46e5) !important; - box-shadow: 0 18px 34px rgba(79,70,229,0.28) !important; + box-shadow: 0 18px 34px rgba(79, 70, 229, 0.28) !important; transform: translateY(-1px); } @@ -329,7 +331,7 @@ .ant-select-focused .ant-select-selector { border-color: #4f46e5 !important; - box-shadow: 0 0 0 3px rgba(79,70,229,0.1) !important; + box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important; } /* Input overrides */ @@ -345,7 +347,7 @@ .ant-input:focus { border-color: #4f46e5 !important; - box-shadow: 0 0 0 3px rgba(79,70,229,0.1) !important; + box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important; } /* Progress overrides */ diff --git a/apps/web/src/components/layout/Header.tsx b/apps/web/src/components/layout/Header.tsx index a2f7ec1c9..2e3d3afd7 100644 --- a/apps/web/src/components/layout/Header.tsx +++ b/apps/web/src/components/layout/Header.tsx @@ -2,8 +2,8 @@ * Phase 1 Header 重构 * 扁平化导航菜单 + 手机端汉堡菜单 */ -import React, { useState } from 'react'; -import { Avatar, Dropdown, Drawer, Space } from 'antd'; +import React, { useState } from "react"; +import { Avatar, Dropdown, Drawer, Space } from "antd"; import { LogoutOutlined, SettingOutlined, @@ -20,12 +20,12 @@ import { ScanOutlined, EditOutlined, FolderOutlined, -} from '@ant-design/icons'; -import { useLocation, useNavigate } from 'react-router-dom'; -import { useAuthStore } from '@/store/authStore'; -import { useLogout } from '@/hooks/useAuth'; -import type { MenuProps } from 'antd'; -import './Header.css'; +} from "@ant-design/icons"; +import { useLocation, useNavigate } from "react-router-dom"; +import { useAuthStore } from "@/store/authStore"; +import { useLogout } from "@/hooks/useAuth"; +import type { MenuProps } from "antd"; +import "./Header.css"; /** 导航项定义 */ interface NavItem { @@ -37,17 +37,62 @@ interface NavItem { /** 固定导航菜单 */ const NAV_ITEMS: NavItem[] = [ - { key: 'dashboard', label: '概览', path: '/dashboard', icon: }, - { key: 'assets', label: '素材库', path: '/assets', icon: }, - { key: 'titles', label: '标题库', path: '/titles', icon: }, - { key: 'voices', label: '配音库', path: '/voices', icon: }, - { key: 'templates', label: '模板库', path: '/templates', icon: }, - { key: 'editing-planner', label: '剪辑编辑器', path: '/editing-planner', icon: }, - { key: 'my-templates', label: '我的模板', path: '/my-templates', icon: }, - { key: 'generate', label: '一键生成', path: '/generate', icon: }, - { key: 'history', label: '任务历史', path: '/history', icon: }, - { key: 'products', label: '成品库', path: '/products', icon: }, - { key: 'duplication', label: '查重', path: '/duplication', icon: }, + { + key: "dashboard", + label: "概览", + path: "/dashboard", + icon: , + }, + { key: "assets", label: "素材库", path: "/assets", icon: }, + { + key: "titles", + label: "标题库", + path: "/titles", + icon: , + }, + { key: "voices", label: "配音库", path: "/voices", icon: }, + { + key: "templates", + label: "模板库", + path: "/templates", + icon: , + }, + { + key: "editing-planner", + label: "剪辑编辑器", + path: "/editing-planner", + icon: , + }, + { + key: "my-templates", + label: "我的模板", + path: "/my-templates", + icon: , + }, + { + key: "generate", + label: "一键生成", + path: "/generate", + icon: , + }, + { + key: "history", + label: "任务历史", + path: "/history", + icon: , + }, + { + key: "products", + label: "成品库", + path: "/products", + icon: , + }, + { + key: "duplication", + label: "查重", + path: "/duplication", + icon: , + }, ]; const Header: React.FC = () => { @@ -58,32 +103,32 @@ const Header: React.FC = () => { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); /** 用户下拉菜单 */ - const menuItems: MenuProps['items'] = [ + const menuItems: MenuProps["items"] = [ { - key: 'profile', + key: "profile", icon: , - label: '个人设置', - onClick: () => navigate('/profile'), + label: "个人设置", + onClick: () => navigate("/profile"), }, { - key: 'subscription', + key: "subscription", icon: , - label: '订阅管理', - onClick: () => navigate('/subscription'), + label: "订阅管理", + onClick: () => navigate("/subscription"), }, - { type: 'divider' }, + { type: "divider" }, { - key: 'logout', + key: "logout", icon: , - label: '退出登录', + label: "退出登录", onClick: () => logoutMutation.mutateAsync(), }, ]; /** 判断导航项是否激活 */ const isActive = (path: string) => { - if (path === '/dashboard') { - return location.pathname === '/' || location.pathname === '/dashboard'; + if (path === "/dashboard") { + return location.pathname === "/" || location.pathname === "/dashboard"; } return location.pathname.startsWith(path); }; @@ -91,7 +136,11 @@ const Header: React.FC = () => { return (
- @@ -101,7 +150,7 @@ const Header: React.FC = () => { {NAV_ITEMS.map((item) => (
@@ -142,7 +193,7 @@ const Header: React.FC = () => { {NAV_ITEMS.map((item) => ( diff --git a/apps/web/src/pages/auth/Login.css b/apps/web/src/pages/auth/Login.css index 3a80db298..0d78a3b04 100644 --- a/apps/web/src/pages/auth/Login.css +++ b/apps/web/src/pages/auth/Login.css @@ -3,7 +3,11 @@ display: grid; place-items: center; min-height: 100vh; - background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(16, 185, 129, 0.06)); + background: linear-gradient( + 135deg, + rgba(79, 70, 229, 0.08), + rgba(16, 185, 129, 0.06) + ); padding: 24px; } diff --git a/apps/web/src/pages/auth/Login.tsx b/apps/web/src/pages/auth/Login.tsx index 9b3caf45f..ab7cb3bef 100644 --- a/apps/web/src/pages/auth/Login.tsx +++ b/apps/web/src/pages/auth/Login.tsx @@ -1,11 +1,11 @@ /** * 登录页面 - V21 完全对标 */ -import React from 'react'; -import { Form, Input, Checkbox, message } from 'antd'; -import { Link, useNavigate } from 'react-router-dom'; -import { useLogin } from '@/hooks/useAuth'; -import './Login.css'; +import React from "react"; +import { Form, Input, Checkbox, message } from "antd"; +import { Link, useNavigate } from "react-router-dom"; +import { useLogin } from "@/hooks/useAuth"; +import "./Login.css"; interface LoginFormValues { email: string; @@ -24,10 +24,11 @@ const Login: React.FC = () => { email: values.email, password: values.password, }); - message.success('登录成功！'); - navigate('/'); + message.success("登录成功！"); + navigate("/"); } catch (error: unknown) { - if (!(error as { __msgShown?: boolean })?.__msgShown) message.error('登录失败，请检查邮箱和密码'); + if (!(error as { __msgShown?: boolean })?.__msgShown) + message.error("登录失败，请检查邮箱和密码"); } }; @@ -51,8 +52,8 @@ const Login: React.FC = () => { name="email" label="邮箱" rules={[ - { required: true, message: '请输入邮箱' }, - { type: 'email', message: '请输入有效的邮箱' }, + { required: true, message: "请输入邮箱" }, + { type: "email", message: "请输入有效的邮箱" }, ]} > @@ -61,7 +62,7 @@ const Login: React.FC = () => { @@ -70,7 +71,10 @@ const Login: React.FC = () => { 记住我 - + 忘记密码？ @@ -79,10 +83,10 @@ const Login: React.FC = () => { diff --git a/apps/web/src/pages/auth/Register.css b/apps/web/src/pages/auth/Register.css index a5a19847e..97fd0dfab 100644 --- a/apps/web/src/pages/auth/Register.css +++ b/apps/web/src/pages/auth/Register.css @@ -3,7 +3,11 @@ display: grid; place-items: center; min-height: 100vh; - background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(16, 185, 129, 0.06)); + background: linear-gradient( + 135deg, + rgba(79, 70, 229, 0.08), + rgba(16, 185, 129, 0.06) + ); padding: 24px; } diff --git a/apps/web/src/pages/auth/Register.tsx b/apps/web/src/pages/auth/Register.tsx index c31342e8b..9d00a6700 100644 --- a/apps/web/src/pages/auth/Register.tsx +++ b/apps/web/src/pages/auth/Register.tsx @@ -1,12 +1,12 @@ /** * 注册页面 - V21 完全对标 */ -import React from 'react'; -import { Form, Input, message } from 'antd'; -import { UserOutlined, LockOutlined, MailOutlined } from '@ant-design/icons'; -import { Link } from 'react-router-dom'; -import { useRegister } from '@/hooks/useAuth'; -import './Register.css'; +import React from "react"; +import { Form, Input, message } from "antd"; +import { UserOutlined, LockOutlined, MailOutlined } from "@ant-design/icons"; +import { Link } from "react-router-dom"; +import { useRegister } from "@/hooks/useAuth"; +import "./Register.css"; interface RegisterFormValues { email: string; @@ -27,9 +27,10 @@ const Register: React.FC = () => { password: values.password, display_name: values.username, }); - message.success('注册成功！请查收验证邮件。'); + message.success("注册成功！请查收验证邮件。"); } catch (error: unknown) { - if (!(error as { __msgShown?: boolean })?.__msgShown) message.error('注册失败，请重试'); + if (!(error as { __msgShown?: boolean })?.__msgShown) + message.error("注册失败，请重试"); } }; @@ -53,8 +54,8 @@ const Register: React.FC = () => { name="email" label="邮箱" rules={[ - { required: true, message: '请输入邮箱' }, - { type: 'email', message: '请输入有效的邮箱地址' }, + { required: true, message: "请输入邮箱" }, + { type: "email", message: "请输入有效的邮箱地址" }, ]} > { name="username" label="用户名" rules={[ - { required: true, message: '请输入用户名' }, - { min: 3, message: '用户名至少 3 个字符' }, - { max: 20, message: '用户名最多 20 个字符' }, + { required: true, message: "请输入用户名" }, + { min: 3, message: "用户名至少 3 个字符" }, + { max: 20, message: "用户名最多 20 个字符" }, { pattern: /^[a-zA-Z0-9_]+$/, - message: '用户名只能包含字母、数字和下划线', + message: "用户名只能包含字母、数字和下划线", }, ]} > @@ -88,11 +89,11 @@ const Register: React.FC = () => { name="password" label="密码" rules={[ - { required: true, message: '请输入密码' }, - { min: 8, message: '密码至少 8 个字符' }, + { required: true, message: "请输入密码" }, + { min: 8, message: "密码至少 8 个字符" }, { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/, - message: '密码必须包含大小写字母和数字', + message: "密码必须包含大小写字母和数字", }, ]} > @@ -106,15 +107,15 @@ const Register: React.FC = () => { ({ validator(_, value) { - if (!value || getFieldValue('password') === value) { + if (!value || getFieldValue("password") === value) { return Promise.resolve(); } - return Promise.reject(new Error('两次输入的密码不一致')); + return Promise.reject(new Error("两次输入的密码不一致")); }, }), ]} @@ -130,10 +131,10 @@ const Register: React.FC = () => { diff --git a/apps/web/src/pages/auth/ResetPassword.css b/apps/web/src/pages/auth/ResetPassword.css index 6b4a238fc..6094fb2d7 100644 --- a/apps/web/src/pages/auth/ResetPassword.css +++ b/apps/web/src/pages/auth/ResetPassword.css @@ -3,7 +3,11 @@ display: grid; place-items: center; min-height: 100vh; - background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(16, 185, 129, 0.06)); + background: linear-gradient( + 135deg, + rgba(79, 70, 229, 0.08), + rgba(16, 185, 129, 0.06) + ); padding: 24px; } @@ -82,7 +86,11 @@ display: grid; place-items: center; min-height: 100vh; - background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(16, 185, 129, 0.06)); + background: linear-gradient( + 135deg, + rgba(79, 70, 229, 0.08), + rgba(16, 185, 129, 0.06) + ); padding: 24px; } diff --git a/apps/web/src/pages/auth/ResetPassword.tsx b/apps/web/src/pages/auth/ResetPassword.tsx index e7cd58a6d..01caafd80 100644 --- a/apps/web/src/pages/auth/ResetPassword.tsx +++ b/apps/web/src/pages/auth/ResetPassword.tsx @@ -1,28 +1,29 @@ /** * 重置密码页面 - V21 完全对标 */ -import React from 'react'; -import { Form, Input, Button, Result, message } from 'antd'; -import { LockOutlined } from '@ant-design/icons'; -import { Link, useSearchParams, useNavigate } from 'react-router-dom'; -import { useMutation } from '@tanstack/react-query'; -import { resetPassword } from '@/api/auth'; -import './ResetPassword.css'; +import React from "react"; +import { Form, Input, Button, Result, message } from "antd"; +import { LockOutlined } from "@ant-design/icons"; +import { Link, useSearchParams, useNavigate } from "react-router-dom"; +import { useMutation } from "@tanstack/react-query"; +import { resetPassword } from "@/api/auth"; +import "./ResetPassword.css"; const ResetPassword: React.FC = () => { const [form] = Form.useForm(); const [searchParams] = useSearchParams(); const navigate = useNavigate(); - const token = searchParams.get('token'); + const token = searchParams.get("token"); const resetMutation = useMutation({ mutationFn: (password: string) => resetPassword(token!, password), onSuccess: () => { - message.success('密码重置成功！'); - setTimeout(() => navigate('/login'), 2000); + message.success("密码重置成功！"); + setTimeout(() => navigate("/login"), 2000); }, onError: (error: unknown) => { - if (!(error as { __msgShown?: boolean })?.__msgShown) message.error('重置失败，请重试'); + if (!(error as { __msgShown?: boolean })?.__msgShown) + message.error("重置失败，请重试"); }, }); @@ -77,16 +78,21 @@ const ResetPassword: React.FC = () => {

设置新密码

-
+ @@ -100,15 +106,15 @@ const ResetPassword: React.FC = () => { ({ validator(_, value) { - if (!value || getFieldValue('password') === value) { + if (!value || getFieldValue("password") === value) { return Promise.resolve(); } - return Promise.reject(new Error('两次输入的密码不一致')); + return Promise.reject(new Error("两次输入的密码不一致")); }, }), ]} @@ -124,10 +130,10 @@ const ResetPassword: React.FC = () => { diff --git a/apps/web/src/pages/dashboard/Dashboard.tsx b/apps/web/src/pages/dashboard/Dashboard.tsx index 891ea5fc5..c3cafcac1 100644 --- a/apps/web/src/pages/dashboard/Dashboard.tsx +++ b/apps/web/src/pages/dashboard/Dashboard.tsx @@ -2,8 +2,8 @@ * 仪表盘页面 * 展示用户用量总览和最近生成记录 */ -import React from 'react'; -import { useQuery } from '@tanstack/react-query'; +import React from "react"; +import { useQuery } from "@tanstack/react-query"; import { Card, Col, @@ -17,7 +17,7 @@ import { Progress, Space, Alert, -} from 'antd'; +} from "antd"; import { FileOutlined, VideoCameraOutlined, @@ -27,17 +27,17 @@ import { CheckCircleOutlined, ClockCircleOutlined, CloseCircleOutlined, -} from '@ant-design/icons'; -import { useNavigate } from 'react-router-dom'; -import { getDashboardOverview } from '@/api/dashboard'; -import type { ColumnsType } from 'antd/es/table'; +} from "@ant-design/icons"; +import { useNavigate } from "react-router-dom"; +import { getDashboardOverview } from "@/api/dashboard"; +import type { ColumnsType } from "antd/es/table"; const { Title } = Typography; /** 格式化文件大小 */ const formatFileSize = (bytes: number): string => { - if (bytes === 0) return '0 B'; - const units = ['B', 'KB', 'MB', 'GB', 'TB']; + if (bytes === 0) return "0 B"; + const units = ["B", "KB", "MB", "GB", "TB"]; const i = Math.floor(Math.log(bytes) / Math.log(1024)); return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${units[i]}`; }; @@ -45,10 +45,10 @@ const formatFileSize = (bytes: number): string => { /** 任务状态标签 */ const StatusTag: React.FC<{ status: string }> = ({ status }) => { const config: Record = { - completed: { color: 'success', icon: }, - processing: { color: 'processing', icon: }, - pending: { color: 'default', icon: }, - failed: { color: 'error', icon: }, + completed: { color: "success", icon: }, + processing: { color: "processing", icon: }, + pending: { color: "default", icon: }, + failed: { color: "error", icon: }, }; const c = config[status] || config.pending; return ( @@ -62,51 +62,50 @@ const Dashboard: React.FC = () => { const navigate = useNavigate(); const { data, isLoading, isError } = useQuery({ - queryKey: ['dashboard-overview'], + queryKey: ["dashboard-overview"], queryFn: getDashboardOverview, }); - const taskColumns: ColumnsType['recent_tasks'][number]> = - [ - { - title: '任务类型', - dataIndex: 'task_type', - key: 'task_type', - render: (type: string) => - type === 'generation' ? '视频生成' : type, - }, - { - title: '状态', - dataIndex: 'status', - key: 'status', - render: (status: string) => , - }, - { - title: '进度', - dataIndex: 'progress', - key: 'progress', - render: (progress: number) => ( - - ), - }, - { - title: '信息', - dataIndex: 'user_message', - key: 'user_message', - ellipsis: true, - }, - { - title: '创建时间', - dataIndex: 'created_at', - key: 'created_at', - render: (t: string) => - t ? new Date(t).toLocaleString('zh-CN') : '-', - }, - ]; + const taskColumns: ColumnsType< + NonNullable["recent_tasks"][number] + > = [ + { + title: "任务类型", + dataIndex: "task_type", + key: "task_type", + render: (type: string) => (type === "generation" ? "视频生成" : type), + }, + { + title: "状态", + dataIndex: "status", + key: "status", + render: (status: string) => , + }, + { + title: "进度", + dataIndex: "progress", + key: "progress", + render: (progress: number) => ( + + ), + }, + { + title: "信息", + dataIndex: "user_message", + key: "user_message", + ellipsis: true, + }, + { + title: "创建时间", + dataIndex: "created_at", + key: "created_at", + render: (t: string) => (t ? new Date(t).toLocaleString("zh-CN") : "-"), + }, + ]; if (isLoading) { return ( -
+
); @@ -114,14 +113,19 @@ const Dashboard: React.FC = () => { if (isError) { return ( -
- +
+
); } return ( -
+
概览 @@ -129,7 +133,7 @@ const Dashboard: React.FC = () => { {/* 用量统计卡片 */} - navigate('/assets')}> + navigate("/assets")}> { - navigate('/assets')}> + navigate("/assets")}> { - navigate('/titles')}> + navigate("/titles")}> { - navigate('/voices')}> + navigate("/voices")}> { - navigate('/history')}> + navigate("/history")}> { - navigate('/products')}> + navigate("/products")}> { {/* 快捷操作 */} - - - - + + + @@ -209,12 +213,12 @@ const Dashboard: React.FC = () => { rowKey="id" pagination={false} size="small" - locale={{ emptyText: '暂无生成记录' }} + locale={{ emptyText: "暂无生成记录" }} scroll={{ x: 600 }} /> {(data?.recent_tasks?.length ?? 0) > 0 && ( -
-
diff --git a/apps/web/src/pages/duplication/DuplicationDetail.tsx b/apps/web/src/pages/duplication/DuplicationDetail.tsx index 5bf90291b..04ba83d12 100644 --- a/apps/web/src/pages/duplication/DuplicationDetail.tsx +++ b/apps/web/src/pages/duplication/DuplicationDetail.tsx @@ -2,8 +2,8 @@ * 重复视频对比详情页面 * 展示查重结果中的重复片段详情，支持时间线对比 */ -import React from 'react'; -import { useQuery } from '@tanstack/react-query'; +import React from "react"; +import { useQuery } from "@tanstack/react-query"; import { Typography, Card, @@ -18,18 +18,15 @@ import { Col, Tooltip, Divider, -} from 'antd'; +} from "antd"; import { ArrowLeftOutlined, VideoCameraOutlined, ClockCircleOutlined, WarningOutlined, -} from '@ant-design/icons'; -import { useParams, useNavigate } from 'react-router-dom'; -import { - getDuplicationDetail, - type DuplicateSegment, -} from '@/api/duplication'; +} from "@ant-design/icons"; +import { useParams, useNavigate } from "react-router-dom"; +import { getDuplicationDetail, type DuplicateSegment } from "@/api/duplication"; const { Title, Text, Paragraph } = Typography; @@ -37,7 +34,7 @@ const { Title, Text, Paragraph } = Typography; const formatTime = (seconds: number) => { const m = Math.floor(seconds / 60); const s = Math.floor(seconds % 60); - return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`; + return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`; }; /** 格式化文件大小 */ @@ -50,16 +47,16 @@ const formatSize = (bytes: number) => { /** 查重率颜色 */ const getRateColor = (rate: number) => { - if (rate <= 10) return '#52c41a'; - if (rate <= 30) return '#faad14'; - return '#ff4d4f'; + if (rate <= 10) return "#52c41a"; + if (rate <= 30) return "#faad14"; + return "#ff4d4f"; }; /** 相似度颜色 */ const getSimilarityColor = (similarity: number) => { - if (similarity >= 90) return '#ff4d4f'; - if (similarity >= 70) return '#faad14'; - return '#52c41a'; + if (similarity >= 90) return "#ff4d4f"; + if (similarity >= 70) return "#faad14"; + return "#52c41a"; }; /** 单个重复片段卡片 */ @@ -78,7 +75,7 @@ const SegmentCard: React.FC<{ segment: DuplicateSegment; index: number }> = ({ 片段 {index + 1} 相似度 {segment.similarity.toFixed(1)}% @@ -102,7 +99,7 @@ const SegmentCard: React.FC<{ segment: DuplicateSegment; index: number }> = ({ - {formatTime(segment.source_start)} -{' '} + {formatTime(segment.source_start)} -{" "} {formatTime(segment.source_end)} @@ -115,32 +112,32 @@ const SegmentCard: React.FC<{ segment: DuplicateSegment; index: number }> = ({
{sourceDuration.toFixed(0)}s @@ -157,7 +154,7 @@ const SegmentCard: React.FC<{ segment: DuplicateSegment; index: number }> = ({ type="inner" title={ - + 匹配到的已有视频 } @@ -172,7 +169,7 @@ const SegmentCard: React.FC<{ segment: DuplicateSegment; index: number }> = ({ - {formatTime(segment.matched_start)} -{' '} + {formatTime(segment.matched_start)} -{" "} {formatTime(segment.matched_end)} @@ -185,32 +182,32 @@ const SegmentCard: React.FC<{ segment: DuplicateSegment; index: number }> = ({
{matchedDuration.toFixed(0)}s @@ -228,15 +225,19 @@ const DuplicationDetail: React.FC = () => { const { id } = useParams<{ id: string }>(); const navigate = useNavigate(); - const { data: detail, isLoading, isError } = useQuery({ - queryKey: ['duplication-detail', id], + const { + data: detail, + isLoading, + isError, + } = useQuery({ + queryKey: ["duplication-detail", id], queryFn: () => getDuplicationDetail(id!), enabled: !!id, }); if (isLoading) { return ( -
+
); @@ -246,7 +247,7 @@ const DuplicationDetail: React.FC = () => { return (
- @@ -258,7 +259,7 @@ const DuplicationDetail: React.FC = () => { return (
- @@ -267,12 +268,12 @@ const DuplicationDetail: React.FC = () => { } return ( -
+
{/* 顶部导航 */} @@ -298,14 +299,14 @@ const DuplicationDetail: React.FC = () => { {detail.duration_seconds ? `${Math.floor(detail.duration_seconds / 60)}分${detail.duration_seconds % 60}秒` - : '-'} + : "-"} - {new Date(detail.created_at).toLocaleString('zh-CN')} + {new Date(detail.created_at).toLocaleString("zh-CN")} @@ -325,7 +326,7 @@ const DuplicationDetail: React.FC = () => { ) : ( - '-' + "-" )} @@ -343,10 +344,10 @@ const DuplicationDetail: React.FC = () => { strokeColor={getRateColor(detail.duplicate_rate)} status={ detail.duplicate_rate <= 10 - ? 'success' + ? "success" : detail.duplicate_rate <= 30 - ? 'normal' - : 'exception' + ? "normal" + : "exception" } />
@@ -368,7 +369,7 @@ const DuplicationDetail: React.FC = () => { 以下片段与素材库中的已有视频存在重复，高相似度片段建议进行替换或裁剪。 - + {detail.segments.map((segment, index) => ( ))} diff --git a/apps/web/src/pages/duplication/DuplicationResults.tsx b/apps/web/src/pages/duplication/DuplicationResults.tsx index af2b590e4..182d209eb 100644 --- a/apps/web/src/pages/duplication/DuplicationResults.tsx +++ b/apps/web/src/pages/duplication/DuplicationResults.tsx @@ -2,8 +2,8 @@ * 查重结果列表页面 * 展示所有查重记录，支持查看详情、删除、重新查重 */ -import React, { useState } from 'react'; -import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; +import React, { useState } from "react"; +import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; import { Typography, Table, @@ -14,8 +14,8 @@ import { message, Progress, Tooltip, -} from 'antd'; -import type { ColumnsType } from 'antd/es/table'; +} from "antd"; +import type { ColumnsType } from "antd/es/table"; import { EyeOutlined, DeleteOutlined, @@ -25,15 +25,15 @@ import { ClockCircleOutlined, CloseCircleOutlined, SyncOutlined, -} from '@ant-design/icons'; -import { useNavigate } from 'react-router-dom'; +} from "@ant-design/icons"; +import { useNavigate } from "react-router-dom"; import { getDuplicationRecords, deleteDuplicationRecord, retryDuplication, type DuplicationRecord, type DuplicationStatus, -} from '@/api/duplication'; +} from "@/api/duplication"; const { Title, Text } = Typography; @@ -43,32 +43,32 @@ const STATUS_CONFIG: Record< { color: string; text: string; icon: React.ReactNode } > = { pending: { - color: 'default', - text: '等待中', + color: "default", + text: "等待中", icon: , }, processing: { - color: 'processing', - text: '查重中', + color: "processing", + text: "查重中", icon: , }, completed: { - color: 'success', - text: '已完成', + color: "success", + text: "已完成", icon: , }, failed: { - color: 'error', - text: '失败', + color: "error", + text: "失败", icon: , }, }; /** 查重率颜色 */ const getRateColor = (rate: number) => { - if (rate <= 10) return '#52c41a'; - if (rate <= 30) return '#faad14'; - return '#ff4d4f'; + if (rate <= 10) return "#52c41a"; + if (rate <= 30) return "#faad14"; + return "#ff4d4f"; }; /** 格式化文件大小 */ @@ -81,7 +81,7 @@ const formatSize = (bytes: number) => { /** 格式化时长 */ const formatDuration = (seconds?: number) => { - if (!seconds) return '-'; + if (!seconds) return "-"; const m = Math.floor(seconds / 60); const s = seconds % 60; return m > 0 ? `${m}分${s}秒` : `${s}秒`; @@ -94,7 +94,7 @@ const DuplicationResults: React.FC = () => { // 获取查重记录 const { data: records = [], isLoading } = useQuery({ - queryKey: ['duplication-records'], + queryKey: ["duplication-records"], queryFn: getDuplicationRecords, }); @@ -102,28 +102,34 @@ const DuplicationResults: React.FC = () => { const deleteMutation = useMutation({ mutationFn: deleteDuplicationRecord, onSuccess: () => { - message.success('已删除'); - queryClient.invalidateQueries({ queryKey: ['duplication-records'] }); + message.success("已删除"); + queryClient.invalidateQueries({ queryKey: ["duplication-records"] }); + }, + onError: (err: unknown) => { + if (!(err as { __msgShown?: boolean })?.__msgShown) + message.error("删除失败"); }, - onError: (err: unknown) => { if (!(err as { __msgShown?: boolean })?.__msgShown) message.error('删除失败') }, }); // 重新查重 const retryMutation = useMutation({ mutationFn: retryDuplication, onSuccess: () => { - message.success('已重新提交查重'); - queryClient.invalidateQueries({ queryKey: ['duplication-records'] }); + message.success("已重新提交查重"); + queryClient.invalidateQueries({ queryKey: ["duplication-records"] }); + }, + onError: (err: unknown) => { + if (!(err as { __msgShown?: boolean })?.__msgShown) + message.error("重新查重失败"); }, - onError: (err: unknown) => { if (!(err as { __msgShown?: boolean })?.__msgShown) message.error('重新查重失败') }, }); /** 批量删除 */ const handleBatchDelete = async () => { const results = await Promise.allSettled( - selectedRowKeys.map((key) => deleteDuplicationRecord(String(key))) + selectedRowKeys.map((key) => deleteDuplicationRecord(String(key))), ); - const succeeded = results.filter((r) => r.status === 'fulfilled').length; + const succeeded = results.filter((r) => r.status === "fulfilled").length; const failed = results.length - succeeded; if (failed === 0) { message.success(`已删除 ${succeeded} 条记录`); @@ -131,14 +137,14 @@ const DuplicationResults: React.FC = () => { message.warning(`删除完成：${succeeded} 条成功，${failed} 条失败`); } setSelectedRowKeys([]); - queryClient.invalidateQueries({ queryKey: ['duplication-records'] }); + queryClient.invalidateQueries({ queryKey: ["duplication-records"] }); }; const columns: ColumnsType = [ { - title: '文件名', - dataIndex: 'filename', - key: 'filename', + title: "文件名", + dataIndex: "filename", + key: "filename", ellipsis: true, width: 200, render: (text: string) => ( @@ -148,23 +154,23 @@ const DuplicationResults: React.FC = () => { ), }, { - title: '文件大小', - dataIndex: 'file_size', - key: 'file_size', + title: "文件大小", + dataIndex: "file_size", + key: "file_size", width: 100, render: (size: number) => formatSize(size), }, { - title: '时长', - dataIndex: 'duration_seconds', - key: 'duration_seconds', + title: "时长", + dataIndex: "duration_seconds", + key: "duration_seconds", width: 80, render: (seconds?: number) => formatDuration(seconds), }, { - title: '状态', - dataIndex: 'status', - key: 'status', + title: "状态", + dataIndex: "status", + key: "status", width: 100, render: (status: DuplicationStatus) => { const cfg = STATUS_CONFIG[status]; @@ -176,12 +182,12 @@ const DuplicationResults: React.FC = () => { }, }, { - title: '查重率', - dataIndex: 'duplicate_rate', - key: 'duplicate_rate', + title: "查重率", + dataIndex: "duplicate_rate", + key: "duplicate_rate", width: 140, render: (rate?: number, record?: DuplicationRecord) => { - if (record?.status !== 'completed' || rate === undefined) return '-'; + if (record?.status !== "completed" || rate === undefined) return "-"; return ( { }, }, { - title: '重复片段', - dataIndex: 'duplicate_count', - key: 'duplicate_count', + title: "重复片段", + dataIndex: "duplicate_count", + key: "duplicate_count", width: 80, - align: 'center', + align: "center", render: (count?: number, record?: DuplicationRecord) => { - if (record?.status !== 'completed') return '-'; + if (record?.status !== "completed") return "-"; return {count ?? 0}; }, }, { - title: '提交时间', - dataIndex: 'created_at', - key: 'created_at', + title: "提交时间", + dataIndex: "created_at", + key: "created_at", width: 160, - render: (time: string) => new Date(time).toLocaleString('zh-CN'), + render: (time: string) => new Date(time).toLocaleString("zh-CN"), }, { - title: '操作', - key: 'action', + title: "操作", + key: "action", width: 160, - fixed: 'right', + fixed: "right", render: (_: unknown, record: DuplicationRecord) => ( - {record.status === 'completed' && ( + {record.status === "completed" && ( diff --git a/apps/web/src/pages/duplication/DuplicationUpload.tsx b/apps/web/src/pages/duplication/DuplicationUpload.tsx index 7548bd950..59464104c 100644 --- a/apps/web/src/pages/duplication/DuplicationUpload.tsx +++ b/apps/web/src/pages/duplication/DuplicationUpload.tsx @@ -2,8 +2,8 @@ * 上传查重页面 * 用户上传视频文件，系统进行查重检测 */ -import React, { useState } from 'react'; -import { useMutation } from '@tanstack/react-query'; +import React, { useState } from "react"; +import { useMutation } from "@tanstack/react-query"; import { Button, Typography, @@ -14,22 +14,22 @@ import { Alert, Space, Result, -} from 'antd'; +} from "antd"; import { InboxOutlined, VideoCameraOutlined, CheckCircleOutlined, LoadingOutlined, -} from '@ant-design/icons'; -import { uploadForDuplication } from '@/api/duplication'; -import { useNavigate } from 'react-router-dom'; -import type { UploadFile } from 'antd/es/upload'; +} from "@ant-design/icons"; +import { uploadForDuplication } from "@/api/duplication"; +import { useNavigate } from "react-router-dom"; +import type { UploadFile } from "antd/es/upload"; const { Title, Text, Paragraph } = Typography; const { Dragger } = Upload; /** 支持的视频格式 */ -const ACCEPT_FORMATS = '.mp4,.avi,.mov,.mkv,.wmv,.flv,.webm'; +const ACCEPT_FORMATS = ".mp4,.avi,.mov,.mkv,.wmv,.flv,.webm"; /** 最大文件大小：2GB */ const MAX_FILE_SIZE = 2 * 1024 * 1024 * 1024; @@ -51,11 +51,12 @@ const DuplicationUpload: React.FC = () => { id: data.id, message: data.message, }); - message.success('查重任务已提交'); + message.success("查重任务已提交"); }, onError: (err: unknown) => { setUploading(false); - if (!(err as { __msgShown?: boolean })?.__msgShown) message.error('上传失败，请重试'); + if (!(err as { __msgShown?: boolean })?.__msgShown) + message.error("上传失败，请重试"); }, }); @@ -63,14 +64,14 @@ const DuplicationUpload: React.FC = () => { const handleUpload = (file: File) => { // 校验文件大小 if (file.size > MAX_FILE_SIZE) { - message.error('文件大小不能超过 2GB'); + message.error("文件大小不能超过 2GB"); return false; } // 校验文件类型 - const ext = file.name.toLowerCase().split('.').pop(); - const allowedExts = ACCEPT_FORMATS.replace(/\./g, '').split(','); - if (!allowedExts.includes(ext || '')) { + const ext = file.name.toLowerCase().split(".").pop(); + const allowedExts = ACCEPT_FORMATS.replace(/\./g, "").split(","); + if (!allowedExts.includes(ext || "")) { message.error(`不支持的文件格式，支持：${ACCEPT_FORMATS}`); return false; } @@ -89,7 +90,7 @@ const DuplicationUpload: React.FC = () => { }; return ( -
+
<VideoCameraOutlined style={{ marginRight: 8 }} /> 视频查重 @@ -107,17 +108,17 @@ const DuplicationUpload: React.FC = () => { beforeUpload={handleUpload} onChange={({ fileList: newFileList }) => setFileList(newFileList)} disabled={uploading} - style={{ padding: '20px 0' }} + style={{ padding: "20px 0" }} > <p className="ant-upload-drag-icon"> {uploading ? ( - <LoadingOutlined style={{ fontSize: 48, color: '#1890ff' }} /> + <LoadingOutlined style={{ fontSize: 48, color: "#1890ff" }} /> ) : ( <InboxOutlined style={{ fontSize: 48 }} /> )} </p> <p className="ant-upload-text"> - {uploading ? '正在上传并查重...' : '点击或拖拽视频文件到此区域'} + {uploading ? "正在上传并查重..." : "点击或拖拽视频文件到此区域"} </p> <p className="ant-upload-hint"> 支持 MP4、AVI、MOV、MKV 等格式，单个文件不超过 2GB @@ -126,12 +127,12 @@ const DuplicationUpload: React.FC = () => { {/* 上传进度 */} {uploading && ( - <div style={{ marginTop: 24, textAlign: 'center' }}> + <div style={{ marginTop: 24, textAlign: "center" }}> <Progress type="circle" percent={99} status="active" - format={() => '查重中...'} + format={() => "查重中..."} size={120} /> <Paragraph type="secondary" style={{ marginTop: 16 }}> @@ -152,7 +153,7 @@ const DuplicationUpload: React.FC = () => { type="primary" key="view" icon={<CheckCircleOutlined />} - onClick={() => navigate('/duplication/results')} + onClick={() => navigate("/duplication/results")} > 查看结果 </Button>, diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.css b/apps/web/src/pages/editing-planner/EditingPlanner.css index 661ac8c64..ea5138d24 100644 --- a/apps/web/src/pages/editing-planner/EditingPlanner.css +++ b/apps/web/src/pages/editing-planner/EditingPlanner.css @@ -42,7 +42,9 @@ .ep-tpl-card { cursor: pointer; - transition: border-color 0.2s, box-shadow 0.2s; + transition: + border-color 0.2s, + box-shadow 0.2s; } .ep-tpl-card-active { @@ -103,7 +105,9 @@ } .ep-seg-card { - transition: box-shadow 0.2s, border-color 0.2s; + transition: + box-shadow 0.2s, + border-color 0.2s; cursor: grab; } diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.tsx b/apps/web/src/pages/editing-planner/EditingPlanner.tsx index be02260b6..420354f9d 100644 --- a/apps/web/src/pages/editing-planner/EditingPlanner.tsx +++ b/apps/web/src/pages/editing-planner/EditingPlanner.tsx @@ -9,18 +9,18 @@ * P1-5: 分类 Input → Select（在 SaveModal 中实现） * P1-6: SaveTemplatePayload 补充 estimated_duration */ -import React, { useState, useEffect } from 'react'; -import './EditingPlanner.css'; -import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; -import { Button, Space, message } from 'antd'; +import React, { useState, useEffect } from "react"; +import "./EditingPlanner.css"; +import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; +import { Button, Space, message } from "antd"; import { SaveOutlined, VideoCameraOutlined, AppstoreOutlined, UserOutlined, DashboardOutlined, -} from '@ant-design/icons'; -import { useSearchParams } from 'react-router-dom'; +} from "@ant-design/icons"; +import { useSearchParams } from "react-router-dom"; import { getEditingTemplates, getTemplateCategories, @@ -35,45 +35,47 @@ import { type SubtitleConfig, type BgmConfig, type SaveTemplatePayload, -} from '@/api/editingPlanner'; +} from "@/api/editingPlanner"; /* ── 子组件 ── */ -import TemplatePanel from './components/TemplatePanel'; -import TimelinePanel from './components/TimelinePanel'; -import SettingsPanel from './components/SettingsPanel'; -import SaveModal from './components/SaveModal'; -import GenerateModal from './components/GenerateModal'; +import TemplatePanel from "./components/TemplatePanel"; +import TimelinePanel from "./components/TimelinePanel"; +import SettingsPanel from "./components/SettingsPanel"; +import SaveModal from "./components/SaveModal"; +import GenerateModal from "./components/GenerateModal"; /* ──────────── 常量 ──────────── */ const MODES: { key: TemplateMode; icon: React.ReactNode; desc: string }[] = [ - { key: 'pip', icon: <AppstoreOutlined />, desc: '多画面叠加' }, - { key: 'voice_over', icon: <UserOutlined />, desc: '人物讲解为主' }, - { key: 'one_take', icon: <VideoCameraOutlined />, desc: '连续不中断' }, - { key: 'voice_pip', icon: <DashboardOutlined />, desc: '口播搭配混剪素材' }, + { key: "pip", icon: <AppstoreOutlined />, desc: "多画面叠加" }, + { key: "voice_over", icon: <UserOutlined />, desc: "人物讲解为主" }, + { key: "one_take", icon: <VideoCameraOutlined />, desc: "连续不中断" }, + { key: "voice_pip", icon: <DashboardOutlined />, desc: "口播搭配混剪素材" }, ]; const DEFAULT_TITLE: TitleConfig = { ai_auto_select: true, - content: '', - font_preset: '思源黑体', - font_color: '#ffffff', + content: "", + font_preset: "思源黑体", + font_color: "#ffffff", font_size: 32, - position: 'top', + position: "top", }; const DEFAULT_SUBTITLE: SubtitleConfig = { enabled: true, - position: 'bottom', - font: '思源黑体', - color: '#ffffff', + position: "bottom", + font: "思源黑体", + color: "#ffffff", size: 24, - animation: 'fade', + animation: "fade", }; -const DEFAULT_BGM: BgmConfig = { enabled: false, music_id: '' }; +const DEFAULT_BGM: BgmConfig = { enabled: false, music_id: "" }; /** 计算预估时长 = Σ 片段时长范围中值 */ const calcEstimatedDuration = (segs: TemplateSegment[]) => - Math.round(segs.reduce((s, seg) => s + (seg.duration_min + seg.duration_max) / 2, 0)); + Math.round( + segs.reduce((s, seg) => s + (seg.duration_min + seg.duration_max) / 2, 0), + ); let _segId = 0; const newSegId = () => `seg-new-${++_segId}`; @@ -85,15 +87,15 @@ const EditingPlanner: React.FC = () => { const [searchParams] = useSearchParams(); /* ── P0-2: URL 参数 ── */ - const urlTemplateId = searchParams.get('template'); - const urlGenerate = searchParams.get('generate'); + const urlTemplateId = searchParams.get("template"); + const urlGenerate = searchParams.get("generate"); /* ── 数据查询 ── */ - const [searchText, setSearchText] = useState(''); - const [filterCategory, setFilterCategory] = useState(''); + const [searchText, setSearchText] = useState(""); + const [filterCategory, setFilterCategory] = useState(""); const { data: templates = [], isLoading: tplLoading } = useQuery({ - queryKey: ['editing-templates', filterCategory, searchText], + queryKey: ["editing-templates", filterCategory, searchText], queryFn: () => getEditingTemplates({ category: filterCategory || undefined, @@ -102,28 +104,40 @@ const EditingPlanner: React.FC = () => { }); const { data: categories = [] } = useQuery({ - queryKey: ['template-categories'], + queryKey: ["template-categories"], queryFn: getTemplateCategories, }); /* ── 编辑器状态 ── */ - const [currentMode, setCurrentMode] = useState<TemplateMode>('pip'); + const [currentMode, setCurrentMode] = useState<TemplateMode>("pip"); const [segments, setSegments] = useState<TemplateSegment[]>([ - { id: newSegId(), segment_order: 1, duration_min: 5, duration_max: 15, material_type: null }, + { + id: newSegId(), + segment_order: 1, + duration_min: 5, + duration_max: 15, + material_type: null, + }, ]); const [loadedTemplateId, setLoadedTemplateId] = useState<string | null>(null); - const [titleConfig, setTitleConfig] = useState<TitleConfig>({ ...DEFAULT_TITLE }); - const [subtitleConfig, setSubtitleConfig] = useState<SubtitleConfig>({ ...DEFAULT_SUBTITLE }); + const [titleConfig, setTitleConfig] = useState<TitleConfig>({ + ...DEFAULT_TITLE, + }); + const [subtitleConfig, setSubtitleConfig] = useState<SubtitleConfig>({ + ...DEFAULT_SUBTITLE, + }); const [bgmConfig, setBgmConfig] = useState<BgmConfig>({ ...DEFAULT_BGM }); /* ── UI 状态 ── */ const [saveModalOpen, setSaveModalOpen] = useState(false); const [generateModalOpen, setGenerateModalOpen] = useState(false); - const [draftName, setDraftName] = useState(''); - const [draftCategory, setDraftCategory] = useState(''); - const [draftTags, setDraftTags] = useState(''); - const [voiceoverDuration, setVoiceoverDuration] = useState<number | null>(null); + const [draftName, setDraftName] = useState(""); + const [draftCategory, setDraftCategory] = useState(""); + const [draftTags, setDraftTags] = useState(""); + const [voiceoverDuration, setVoiceoverDuration] = useState<number | null>( + null, + ); const [dragIdx, setDragIdx] = useState<number | null>(null); /* ── P0-2: 自动加载 URL 指定的模板 ── */ @@ -133,7 +147,7 @@ const EditingPlanner: React.FC = () => { if (tpl) { loadTemplate(tpl); // 如果 URL 有 generate=1，自动打开发成弹窗 - if (urlGenerate === '1') { + if (urlGenerate === "1") { setGenerateModalOpen(true); } } @@ -144,37 +158,49 @@ const EditingPlanner: React.FC = () => { const createMutation = useMutation({ mutationFn: createEditingTemplate, onSuccess: () => { - message.success('模板已保存'); - queryClient.invalidateQueries({ queryKey: ['editing-templates'] }); + message.success("模板已保存"); + queryClient.invalidateQueries({ queryKey: ["editing-templates"] }); setSaveModalOpen(false); }, onError: (err: unknown) => { - if (!(err as { __msgShown?: boolean })?.__msgShown) message.error('保存失败'); + if (!(err as { __msgShown?: boolean })?.__msgShown) + message.error("保存失败"); }, }); const updateMutation = useMutation({ - mutationFn: ({ id, data }: { id: string; data: SaveTemplatePayload }) => updateEditingTemplate(id, data), + mutationFn: ({ id, data }: { id: string; data: SaveTemplatePayload }) => + updateEditingTemplate(id, data), onSuccess: () => { - message.success('模板已更新'); - queryClient.invalidateQueries({ queryKey: ['editing-templates'] }); + message.success("模板已更新"); + queryClient.invalidateQueries({ queryKey: ["editing-templates"] }); setSaveModalOpen(false); }, onError: (err: unknown) => { - if (!(err as { __msgShown?: boolean })?.__msgShown) message.error('保存失败'); + if (!(err as { __msgShown?: boolean })?.__msgShown) + message.error("保存失败"); }, }); const generateMutation = useMutation({ - mutationFn: ({ templateId, duration }: { templateId: string; duration: number }) => - generateFromTemplate(templateId, { voiceover_duration: duration }), + mutationFn: ({ + templateId, + duration, + }: { + templateId: string; + duration: number; + }) => generateFromTemplate(templateId, { voiceover_duration: duration }), onSuccess: (data) => { - const msg = data.warnings && data.warnings.length > 0 ? `生成任务已提交（${data.warnings.map(w => w.message).join('; ')}）` : '生成任务已提交'; + const msg = + data.warnings && data.warnings.length > 0 + ? `生成任务已提交（${data.warnings.map((w) => w.message).join("; ")}）` + : "生成任务已提交"; message.success(msg); setGenerateModalOpen(false); }, onError: (err: unknown) => { - if (!(err as { __msgShown?: boolean })?.__msgShown) message.error('生成失败'); + if (!(err as { __msgShown?: boolean })?.__msgShown) + message.error("生成失败"); }, }); @@ -183,7 +209,7 @@ const EditingPlanner: React.FC = () => { /* ──────────── 片段操作 ──────────── */ const addSegment = () => { - if (currentMode === 'one_take') return; + if (currentMode === "one_take") return; setSegments((prev) => [ ...prev, { @@ -191,20 +217,24 @@ const EditingPlanner: React.FC = () => { segment_order: prev.length + 1, duration_min: 5, duration_max: 15, - material_type: currentMode === 'voice_pip' ? '人物' : null, + material_type: currentMode === "voice_pip" ? "人物" : null, }, ]); }; const removeSegment = (id: string) => { - if (currentMode === 'one_take') return; + if (currentMode === "one_take") return; setSegments((prev) => - prev.filter((s) => s.id !== id).map((s, i) => ({ ...s, segment_order: i + 1 })), + prev + .filter((s) => s.id !== id) + .map((s, i) => ({ ...s, segment_order: i + 1 })), ); }; const updateSegment = (id: string, patch: Partial<TemplateSegment>) => { - setSegments((prev) => prev.map((s) => (s.id === id ? { ...s, ...patch } : s))); + setSegments((prev) => + prev.map((s) => (s.id === id ? { ...s, ...patch } : s)), + ); }; const handleDragStart = (idx: number) => setDragIdx(idx); @@ -227,7 +257,7 @@ const EditingPlanner: React.FC = () => { const handleModeChange = (mode: TemplateMode) => { setCurrentMode(mode); - if (mode === 'one_take') { + if (mode === "one_take") { // 锁定为 1 个片段 setSegments([ { @@ -238,12 +268,12 @@ const EditingPlanner: React.FC = () => { material_type: null, }, ]); - } else if (mode === 'voice_pip') { + } else if (mode === "voice_pip") { // 确保每个片段有 material_type setSegments((prev) => prev.map((s) => ({ ...s, - material_type: s.material_type || '人物', + material_type: s.material_type || "人物", })), ); } @@ -262,9 +292,15 @@ const EditingPlanner: React.FC = () => { const resetEditor = () => { setLoadedTemplateId(null); - setCurrentMode('pip'); + setCurrentMode("pip"); setSegments([ - { id: newSegId(), segment_order: 1, duration_min: 5, duration_max: 15, material_type: null }, + { + id: newSegId(), + segment_order: 1, + duration_min: 5, + duration_max: 15, + material_type: null, + }, ]); setTitleConfig({ ...DEFAULT_TITLE }); setSubtitleConfig({ ...DEFAULT_SUBTITLE }); @@ -273,22 +309,31 @@ const EditingPlanner: React.FC = () => { const openSaveModal = () => { if (segments.length === 0) { - message.warning('请至少添加一个片段'); + message.warning("请至少添加一个片段"); return; } - setDraftName(loadedTemplateId ? templates.find((t) => t.id === loadedTemplateId)?.name || '' : ''); + setDraftName( + loadedTemplateId + ? templates.find((t) => t.id === loadedTemplateId)?.name || "" + : "", + ); setDraftCategory( - loadedTemplateId ? templates.find((t) => t.id === loadedTemplateId)?.category || '' : '', + loadedTemplateId + ? templates.find((t) => t.id === loadedTemplateId)?.category || "" + : "", ); setDraftTags( - loadedTemplateId ? templates.find((t) => t.id === loadedTemplateId)?.tags.join(', ') || '' : '', + loadedTemplateId + ? templates.find((t) => t.id === loadedTemplateId)?.tags.join(", ") || + "" + : "", ); setSaveModalOpen(true); }; const handleSave = () => { if (!draftName.trim()) { - message.warning('请输入模板名称'); + message.warning("请输入模板名称"); return; } const estimatedDuration = calcEstimatedDuration(segments); @@ -316,7 +361,7 @@ const EditingPlanner: React.FC = () => { const handleGenerate = () => { if (!loadedTemplateId) { - message.warning('请先保存模板'); + message.warning("请先保存模板"); return; } setGenerateModalOpen(true); @@ -324,10 +369,13 @@ const EditingPlanner: React.FC = () => { const doGenerate = () => { if (!voiceoverDuration || voiceoverDuration <= 0) { - message.warning('请输入配音时长'); + message.warning("请输入配音时长"); return; } - generateMutation.mutate({ templateId: loadedTemplateId!, duration: voiceoverDuration }); + generateMutation.mutate({ + templateId: loadedTemplateId!, + duration: voiceoverDuration, + }); }; const estimatedDuration = calcEstimatedDuration(segments); @@ -342,7 +390,7 @@ const EditingPlanner: React.FC = () => { {MODES.map((m) => ( <Button key={m.key} - type={currentMode === m.key ? 'primary' : 'default'} + type={currentMode === m.key ? "primary" : "default"} icon={m.icon} onClick={() => handleModeChange(m.key)} > diff --git a/apps/web/src/pages/editing-planner/components/GenerateModal.tsx b/apps/web/src/pages/editing-planner/components/GenerateModal.tsx index 6fd02beb2..05bde01dc 100644 --- a/apps/web/src/pages/editing-planner/components/GenerateModal.tsx +++ b/apps/web/src/pages/editing-planner/components/GenerateModal.tsx @@ -2,8 +2,8 @@ * 使用模板生成视频弹窗 * P1-4: voiceover_id → voiceover_duration (number) */ -import React from 'react'; -import { Modal, InputNumber, Space, Typography } from 'antd'; +import React from "react"; +import { Modal, InputNumber, Space, Typography } from "antd"; const { Text } = Typography; @@ -35,7 +35,7 @@ const GenerateModal: React.FC<GenerateModalProps> = ({ confirmLoading={loading} okText="开始生成" > - <Space direction="vertical" style={{ width: '100%' }} size={12}> + <Space direction="vertical" style={{ width: "100%" }} size={12}> <div> <Text style={{ fontSize: 13 }}>配音时长（秒）*</Text> <InputNumber @@ -44,7 +44,7 @@ const GenerateModal: React.FC<GenerateModalProps> = ({ onChange={onDurationChange} min={1} max={600} - style={{ width: '100%' }} + style={{ width: "100%" }} /> </div> <Text type="secondary" style={{ fontSize: 12 }}> diff --git a/apps/web/src/pages/editing-planner/components/SaveModal.tsx b/apps/web/src/pages/editing-planner/components/SaveModal.tsx index aa60d2c81..7e5fdd03e 100644 --- a/apps/web/src/pages/editing-planner/components/SaveModal.tsx +++ b/apps/web/src/pages/editing-planner/components/SaveModal.tsx @@ -2,9 +2,9 @@ * 保存/更新模板弹窗 * 分类使用 Select 关联后端分类 API（P1-5） */ -import React from 'react'; -import { Modal, Input, Select, Space, Typography } from 'antd'; -import type { TemplateCategory } from '@/api/editingPlanner'; +import React from "react"; +import { Modal, Input, Select, Space, Typography } from "antd"; +import type { TemplateCategory } from "@/api/editingPlanner"; const { Text } = Typography; @@ -41,14 +41,14 @@ const SaveModal: React.FC<SaveModalProps> = ({ }) => { return ( <Modal - title={isUpdate ? '更新模板' : '保存模板'} + title={isUpdate ? "更新模板" : "保存模板"} open={open} onCancel={onCancel} onOk={onSave} confirmLoading={loading} okText="保存" > - <Space direction="vertical" style={{ width: '100%' }} size={12}> + <Space direction="vertical" style={{ width: "100%" }} size={12}> <div> <Text style={{ fontSize: 13 }}>模板名称 *</Text> <Input @@ -62,10 +62,10 @@ const SaveModal: React.FC<SaveModalProps> = ({ <Select placeholder="选择分类" value={draftCategory || undefined} - onChange={(v) => onCategoryChange(v || '')} + onChange={(v) => onCategoryChange(v || "")} allowClear showSearch - style={{ width: '100%' }} + style={{ width: "100%" }} options={categories.map((c) => ({ value: c.name, label: c.name }))} /> </div> diff --git a/apps/web/src/pages/editing-planner/components/SettingsPanel.tsx b/apps/web/src/pages/editing-planner/components/SettingsPanel.tsx index 2c1da27d2..67d279ddd 100644 --- a/apps/web/src/pages/editing-planner/components/SettingsPanel.tsx +++ b/apps/web/src/pages/editing-planner/components/SettingsPanel.tsx @@ -2,26 +2,30 @@ * 右侧设置面板 * 标题设置 / 字幕设置 / BGM 设置 */ -import React from 'react'; -import { Typography, Input, Switch, Select, Slider, Tag } from 'antd'; -import { SoundOutlined, FontSizeOutlined } from '@ant-design/icons'; -import type { TitleConfig, SubtitleConfig, BgmConfig } from '@/api/editingPlanner'; +import React from "react"; +import { Typography, Input, Switch, Select, Slider, Tag } from "antd"; +import { SoundOutlined, FontSizeOutlined } from "@ant-design/icons"; +import type { + TitleConfig, + SubtitleConfig, + BgmConfig, +} from "@/api/editingPlanner"; const { Text } = Typography; /* ── 常量 ── */ -const FONT_PRESETS = ['思源黑体', '站酷快乐体', '方正兰亭', '汉仪旗黑']; +const FONT_PRESETS = ["思源黑体", "站酷快乐体", "方正兰亭", "汉仪旗黑"]; const POSITIONS = [ - { value: 'top', label: '顶部' }, - { value: 'center', label: '居中' }, - { value: 'bottom', label: '底部' }, + { value: "top", label: "顶部" }, + { value: "center", label: "居中" }, + { value: "bottom", label: "底部" }, ]; -const SUBTITLE_FONTS = ['思源黑体', '微软雅黑', '苹方']; +const SUBTITLE_FONTS = ["思源黑体", "微软雅黑", "苹方"]; const SUBTITLE_ANIMATIONS = [ - { value: 'none', label: '无' }, - { value: 'fade', label: '淡入' }, - { value: 'typewriter', label: '打字机' }, - { value: 'slide', label: '滑动' }, + { value: "none", label: "无" }, + { value: "fade", label: "淡入" }, + { value: "typewriter", label: "打字机" }, + { value: "slide", label: "滑动" }, ]; interface SettingsPanelProps { @@ -45,17 +49,26 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({ <div className="ep-right"> {/* 标题设置 */} <div className="ep-settings-group"> - <Text strong style={{ display: 'block', marginBottom: 12 }}> + <Text strong style={{ display: "block", marginBottom: 12 }}> <FontSizeOutlined style={{ marginRight: 6 }} /> 标题设置 </Text> - <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}> + <div + style={{ + display: "flex", + justifyContent: "space-between", + alignItems: "center", + marginBottom: 12, + }} + > <Text style={{ fontSize: 13 }}>AI 自动选择</Text> <Switch size="small" checked={titleConfig.ai_auto_select} - onChange={(checked) => onTitleChange({ ...titleConfig, ai_auto_select: checked })} + onChange={(checked) => + onTitleChange({ ...titleConfig, ai_auto_select: checked }) + } checkedChildren="ON" unCheckedChildren="OFF" /> @@ -65,7 +78,9 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({ <Input.TextArea placeholder="手动输入标题内容" value={titleConfig.content} - onChange={(e) => onTitleChange({ ...titleConfig, content: e.target.value })} + onChange={(e) => + onTitleChange({ ...titleConfig, content: e.target.value }) + } rows={2} size="small" style={{ marginBottom: 12 }} @@ -74,13 +89,17 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({ <div style={{ marginBottom: 8 }}> <Text style={{ fontSize: 12 }}>字体预设</Text> - <div style={{ display: 'flex', gap: 4, marginTop: 4, flexWrap: 'wrap' }}> + <div + style={{ display: "flex", gap: 4, marginTop: 4, flexWrap: "wrap" }} + > {FONT_PRESETS.map((font) => ( <Tag key={font} - color={titleConfig.font_preset === font ? 'blue' : 'default'} - style={{ cursor: 'pointer' }} - onClick={() => onTitleChange({ ...titleConfig, font_preset: font })} + color={titleConfig.font_preset === font ? "blue" : "default"} + style={{ cursor: "pointer" }} + onClick={() => + onTitleChange({ ...titleConfig, font_preset: font }) + } > {font} </Tag> @@ -88,13 +107,15 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({ </div> </div> - <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}> + <div style={{ display: "flex", gap: 8, marginBottom: 8 }}> <div style={{ flex: 1 }}> <Text style={{ fontSize: 12 }}>颜色</Text> <Input size="small" value={titleConfig.font_color} - onChange={(e) => onTitleChange({ ...titleConfig, font_color: e.target.value })} + onChange={(e) => + onTitleChange({ ...titleConfig, font_color: e.target.value }) + } style={{ marginTop: 4 }} /> </div> @@ -105,7 +126,7 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({ value={titleConfig.position} onChange={(v) => onTitleChange({ ...titleConfig, position: v })} options={POSITIONS} - style={{ width: '100%', marginTop: 4 }} + style={{ width: "100%", marginTop: 4 }} /> </div> </div> @@ -123,7 +144,14 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({ {/* 字幕设置 */} <div className="ep-settings-group"> - <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}> + <div + style={{ + display: "flex", + justifyContent: "space-between", + alignItems: "center", + marginBottom: 12, + }} + > <Text strong> <FontSizeOutlined style={{ marginRight: 6 }} /> 字幕设置 @@ -131,7 +159,9 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({ <Switch size="small" checked={subtitleConfig.enabled} - onChange={(checked) => onSubtitleChange({ ...subtitleConfig, enabled: checked })} + onChange={(checked) => + onSubtitleChange({ ...subtitleConfig, enabled: checked }) + } /> </div> @@ -142,9 +172,11 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({ <Select size="small" value={subtitleConfig.position} - onChange={(v) => onSubtitleChange({ ...subtitleConfig, position: v })} + onChange={(v) => + onSubtitleChange({ ...subtitleConfig, position: v }) + } options={POSITIONS} - style={{ width: '100%', marginTop: 4 }} + style={{ width: "100%", marginTop: 4 }} /> </div> <div style={{ marginBottom: 8 }}> @@ -152,18 +184,25 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({ <Select size="small" value={subtitleConfig.font} - onChange={(v) => onSubtitleChange({ ...subtitleConfig, font: v })} + onChange={(v) => + onSubtitleChange({ ...subtitleConfig, font: v }) + } options={SUBTITLE_FONTS.map((f) => ({ value: f, label: f }))} - style={{ width: '100%', marginTop: 4 }} + style={{ width: "100%", marginTop: 4 }} /> </div> - <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}> + <div style={{ display: "flex", gap: 8, marginBottom: 8 }}> <div style={{ flex: 1 }}> <Text style={{ fontSize: 12 }}>颜色</Text> <Input size="small" value={subtitleConfig.color} - onChange={(e) => onSubtitleChange({ ...subtitleConfig, color: e.target.value })} + onChange={(e) => + onSubtitleChange({ + ...subtitleConfig, + color: e.target.value, + }) + } style={{ marginTop: 4 }} /> </div> @@ -172,9 +211,11 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({ <Select size="small" value={subtitleConfig.animation} - onChange={(v) => onSubtitleChange({ ...subtitleConfig, animation: v })} + onChange={(v) => + onSubtitleChange({ ...subtitleConfig, animation: v }) + } options={SUBTITLE_ANIMATIONS} - style={{ width: '100%', marginTop: 4 }} + style={{ width: "100%", marginTop: 4 }} /> </div> </div> @@ -184,7 +225,9 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({ min={12} max={48} value={subtitleConfig.size} - onChange={(v) => onSubtitleChange({ ...subtitleConfig, size: v })} + onChange={(v) => + onSubtitleChange({ ...subtitleConfig, size: v }) + } /> </div> </> @@ -193,7 +236,14 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({ {/* BGM 设置 */} <div className="ep-settings-group"> - <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}> + <div + style={{ + display: "flex", + justifyContent: "space-between", + alignItems: "center", + marginBottom: 12, + }} + > <Text strong> <SoundOutlined style={{ marginRight: 6 }} /> BGM 设置 @@ -201,7 +251,9 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({ <Switch size="small" checked={bgmConfig.enabled} - onChange={(checked) => onBgmChange({ ...bgmConfig, enabled: checked })} + onChange={(checked) => + onBgmChange({ ...bgmConfig, enabled: checked }) + } /> </div> {bgmConfig.enabled && ( @@ -212,11 +264,11 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({ placeholder="选择背景音乐" value={bgmConfig.music_id || undefined} onChange={(v) => onBgmChange({ ...bgmConfig, music_id: v })} - style={{ width: '100%', marginTop: 4 }} + style={{ width: "100%", marginTop: 4 }} options={[ - { value: 'bgm-1', label: '轻快节奏' }, - { value: 'bgm-2', label: '舒缓氛围' }, - { value: 'bgm-3', label: '动感活力' }, + { value: "bgm-1", label: "轻快节奏" }, + { value: "bgm-2", label: "舒缓氛围" }, + { value: "bgm-3", label: "动感活力" }, ]} /> </div> diff --git a/apps/web/src/pages/editing-planner/components/TemplatePanel.tsx b/apps/web/src/pages/editing-planner/components/TemplatePanel.tsx index 91be782a1..bf284787b 100644 --- a/apps/web/src/pages/editing-planner/components/TemplatePanel.tsx +++ b/apps/web/src/pages/editing-planner/components/TemplatePanel.tsx @@ -2,18 +2,25 @@ * 左侧模板面板 * 搜索、分类筛选、模板卡片列表 */ -import React from 'react'; -import { Input, Select, Card, Tag, Empty, Spin, Button, Typography } from 'antd'; +import React from "react"; import { - SearchOutlined, -} from '@ant-design/icons'; + Input, + Select, + Card, + Tag, + Empty, + Spin, + Button, + Typography, +} from "antd"; +import { SearchOutlined } from "@ant-design/icons"; import { MODE_LABELS, MODE_COLORS, type EditingTemplate, type TemplateCategory, type TemplateMode, -} from '@/api/editingPlanner'; +} from "@/api/editingPlanner"; const { Text } = Typography; @@ -44,8 +51,11 @@ const TemplatePanel: React.FC<TemplatePanelProps> = ({ }) => { return ( <div className="ep-left"> - <div style={{ padding: '0 12px', marginBottom: 12 }}> - <Text strong style={{ fontSize: 14, display: 'block', marginBottom: 8 }}> + <div style={{ padding: "0 12px", marginBottom: 12 }}> + <Text + strong + style={{ fontSize: 14, display: "block", marginBottom: 8 }} + > 我的模板 </Text> <Input @@ -60,17 +70,17 @@ const TemplatePanel: React.FC<TemplatePanelProps> = ({ <Select placeholder="按分类筛选" value={filterCategory || undefined} - onChange={(v) => onCategoryChange(v || '')} + onChange={(v) => onCategoryChange(v || "")} allowClear size="small" - style={{ width: '100%' }} + style={{ width: "100%" }} options={categories.map((c) => ({ value: c.name, label: c.name }))} /> </div> - <div style={{ padding: '0 12px', flex: 1, overflowY: 'auto' }}> + <div style={{ padding: "0 12px", flex: 1, overflowY: "auto" }}> {isLoading ? ( - <div style={{ textAlign: 'center', padding: 40 }}> + <div style={{ textAlign: "center", padding: 40 }}> <Spin /> </div> ) : templates.length === 0 ? ( @@ -85,15 +95,24 @@ const TemplatePanel: React.FC<TemplatePanelProps> = ({ key={tpl.id} size="small" hoverable - className={`ep-tpl-card ${loadedTemplateId === tpl.id ? 'ep-tpl-card-active' : ''}`} + className={`ep-tpl-card ${loadedTemplateId === tpl.id ? "ep-tpl-card-active" : ""}`} onClick={() => onTemplateSelect(tpl)} style={{ marginBottom: 8 }} > - <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> + <div + style={{ + display: "flex", + justifyContent: "space-between", + alignItems: "center", + }} + > <Text strong ellipsis style={{ maxWidth: 140 }}> {tpl.name} </Text> - <Tag color={MODE_COLORS[tpl.mode as TemplateMode] || 'blue'} style={{ marginRight: 0 }}> + <Tag + color={MODE_COLORS[tpl.mode as TemplateMode] || "blue"} + style={{ marginRight: 0 }} + > {MODE_LABELS[tpl.mode as TemplateMode] || tpl.mode} </Tag> </div> @@ -117,7 +136,7 @@ const TemplatePanel: React.FC<TemplatePanelProps> = ({ </div> {loadedTemplateId && ( - <div style={{ padding: 12, borderTop: '1px solid #f0f0f0' }}> + <div style={{ padding: 12, borderTop: "1px solid #f0f0f0" }}> <Button size="small" block onClick={onNewTemplate}> 新建空白模板 </Button> diff --git a/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx b/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx index 709be93c7..6f41acb89 100644 --- a/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx +++ b/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx @@ -2,16 +2,16 @@ * 中间预览 + 时间线面板 * 视频/封面预览区 + 片段卡片时间线 */ -import React from 'react'; -import { Card, Button, Tag, Typography, Select, Slider } from 'antd'; +import React from "react"; +import { Card, Button, Tag, Typography, Select, Slider } from "antd"; import { PlusOutlined, DeleteOutlined, DragOutlined, VideoCameraOutlined, PictureOutlined, -} from '@ant-design/icons'; -import type { TemplateSegment, TemplateMode } from '@/api/editingPlanner'; +} from "@ant-design/icons"; +import type { TemplateSegment, TemplateMode } from "@/api/editingPlanner"; const { Text } = Typography; @@ -38,8 +38,8 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({ onDragOver, onDragEnd, }) => { - const isOneShot = currentMode === 'one_take'; - const isMixedCut = currentMode === 'voice_pip'; + const isOneShot = currentMode === "one_take"; + const isMixedCut = currentMode === "voice_pip"; const handleDragOver = (e: React.DragEvent, idx: number) => { onDragOver(e, idx); @@ -52,7 +52,7 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({ {/* 视频预览 */} <div className="ep-preview-box"> <div className="ep-preview-frame"> - <VideoCameraOutlined style={{ fontSize: 40, color: '#bbb' }} /> + <VideoCameraOutlined style={{ fontSize: 40, color: "#bbb" }} /> <Text type="secondary" style={{ marginTop: 8 }}> 视频预览 </Text> @@ -63,10 +63,10 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({ </div> {/* 封面预览 + 方案按钮 */} - <div style={{ display: 'flex', gap: 12, flex: '0 0 auto' }}> + <div style={{ display: "flex", gap: 12, flex: "0 0 auto" }}> <div className="ep-preview-box"> <div className="ep-preview-frame"> - <PictureOutlined style={{ fontSize: 40, color: '#bbb' }} /> + <PictureOutlined style={{ fontSize: 40, color: "#bbb" }} /> <Text type="secondary" style={{ marginTop: 8 }}> 封面预览 </Text> @@ -94,10 +94,20 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({ {/* 时间线 */} <div className="ep-timeline"> - <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}> + <div + style={{ + display: "flex", + justifyContent: "space-between", + alignItems: "center", + marginBottom: 12, + }} + > <Text strong> - 时间线{' '} - <Text type="secondary" style={{ fontWeight: 'normal', fontSize: 12 }}> + 时间线{" "} + <Text + type="secondary" + style={{ fontWeight: "normal", fontSize: 12 }} + > （预估总时长：~{estimatedDuration}s） </Text> </Text> @@ -112,7 +122,14 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({ </Button> </div> - <div style={{ display: 'flex', gap: 12, overflowX: 'auto', paddingBottom: 8 }}> + <div + style={{ + display: "flex", + gap: 12, + overflowX: "auto", + paddingBottom: 8, + }} + > {segments.map((seg, idx) => ( <Card key={seg.id} @@ -124,9 +141,19 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({ onDragEnd={onDragEnd} style={{ minWidth: 180, maxWidth: 220, flexShrink: 0 }} > - <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}> + <div + style={{ + display: "flex", + alignItems: "center", + gap: 8, + marginBottom: 8, + }} + > <span - style={{ cursor: isOneShot ? 'default' : 'grab', color: '#999' }} + style={{ + cursor: isOneShot ? "default" : "grab", + color: "#999", + }} > <DragOutlined /> </span> @@ -138,7 +165,7 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({ icon={<DeleteOutlined />} onClick={() => onRemoveSegment(seg.id!)} disabled={isOneShot} - style={{ marginLeft: 'auto' }} + style={{ marginLeft: "auto" }} /> </div> @@ -154,7 +181,9 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({ min={1} max={seg.duration_max} value={seg.duration_min} - onChange={(v) => onUpdateSegment(seg.id!, { duration_min: v })} + onChange={(v) => + onUpdateSegment(seg.id!, { duration_min: v }) + } /> </div> <div> @@ -163,7 +192,9 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({ min={seg.duration_min} max={60} value={seg.duration_max} - onChange={(v) => onUpdateSegment(seg.id!, { duration_max: v })} + onChange={(v) => + onUpdateSegment(seg.id!, { duration_max: v }) + } /> </div> </> @@ -174,12 +205,14 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({ <Text style={{ fontSize: 12 }}>素材类型</Text> <Select size="small" - value={seg.material_type || '人物'} - onChange={(v) => onUpdateSegment(seg.id!, { material_type: v })} - style={{ width: '100%', marginTop: 4 }} + value={seg.material_type || "人物"} + onChange={(v) => + onUpdateSegment(seg.id!, { material_type: v }) + } + style={{ width: "100%", marginTop: 4 }} options={[ - { value: '人物', label: '人物' }, - { value: '场景', label: '场景' }, + { value: "人物", label: "人物" }, + { value: "场景", label: "场景" }, ]} /> </div> diff --git a/apps/web/src/pages/generate/GeneratePage.tsx b/apps/web/src/pages/generate/GeneratePage.tsx index 16c608bbb..8e8edb2a7 100644 --- a/apps/web/src/pages/generate/GeneratePage.tsx +++ b/apps/web/src/pages/generate/GeneratePage.tsx @@ -2,9 +2,9 @@ * 一键生成页面 * 流程：选择模板 → 选择素材 → 选择标题 → 选择配音 → 批量生成 */ -import React, { useState } from 'react'; -import { useNavigate } from 'react-router-dom'; -import { useQuery, useMutation } from '@tanstack/react-query'; +import React, { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { useQuery, useMutation } from "@tanstack/react-query"; import { Card, Button, @@ -19,26 +19,26 @@ import { Col, Tag, Alert, -} from 'antd'; +} from "antd"; import { CheckCircleOutlined, VideoCameraOutlined, FileTextOutlined, AudioOutlined, PictureOutlined, -} from '@ant-design/icons'; -import { getTemplates } from '@/api/templates'; -import { getAssetLibraries, getAssets, type AssetItem } from '@/api/assets'; -import { getTitles } from '@/api/titles'; -import { getVoices } from '@/api/voices'; -import { createGenerationTask } from '@/api/tasks'; +} from "@ant-design/icons"; +import { getTemplates } from "@/api/templates"; +import { getAssetLibraries, getAssets, type AssetItem } from "@/api/assets"; +import { getTitles } from "@/api/titles"; +import { getVoices } from "@/api/voices"; +import { createGenerationTask } from "@/api/tasks"; const { Title, Text } = Typography; const GeneratePage: React.FC = () => { const navigate = useNavigate(); const [currentStep, setCurrentStep] = useState(0); - const [selectedTemplate, setSelectedTemplate] = useState<string>(''); + const [selectedTemplate, setSelectedTemplate] = useState<string>(""); const [selectedAssets, setSelectedAssets] = useState<string[]>([]); const [selectedTitles, setSelectedTitles] = useState<string[]>([]); const [selectedVoices, setSelectedVoices] = useState<string[]>([]); @@ -46,32 +46,52 @@ const GeneratePage: React.FC = () => { const [generated, setGenerated] = useState(false); // 获取模板列表 - const { data: templates = [], isLoading: tplLoading, isError: tplError } = useQuery({ - queryKey: ['templates'], + const { + data: templates = [], + isLoading: tplLoading, + isError: tplError, + } = useQuery({ + queryKey: ["templates"], queryFn: getTemplates, }); // 获取素材库和素材 - const { data: libraries = [], isLoading: libLoading, isError: libError } = useQuery({ - queryKey: ['asset-libraries'], + const { + data: libraries = [], + isLoading: libLoading, + isError: libError, + } = useQuery({ + queryKey: ["asset-libraries"], queryFn: getAssetLibraries, }); // 获取标题 - const { data: titles = [], isLoading: titleLoading, isError: titleError } = useQuery({ - queryKey: ['titles'], + const { + data: titles = [], + isLoading: titleLoading, + isError: titleError, + } = useQuery({ + queryKey: ["titles"], queryFn: getTitles, }); // 获取配音 - const { data: voices = [], isLoading: voiceLoading, isError: voiceError } = useQuery({ - queryKey: ['voices'], + const { + data: voices = [], + isLoading: voiceLoading, + isError: voiceError, + } = useQuery({ + queryKey: ["voices"], queryFn: getVoices, }); // 获取所有素材（跨库） - const { data: allAssets = [], isLoading: assetsLoading, isError: assetsError } = useQuery({ - queryKey: ['all-assets'], + const { + data: allAssets = [], + isLoading: assetsLoading, + isError: assetsError, + } = useQuery({ + queryKey: ["all-assets"], queryFn: async () => { const all: AssetItem[] = []; for (const lib of libraries) { @@ -83,19 +103,22 @@ const GeneratePage: React.FC = () => { enabled: libraries.length > 0, }); - const pageLoading = tplLoading || libLoading || titleLoading || voiceLoading || assetsLoading; - const pageError = tplError || libError || titleError || voiceError || assetsError; + const pageLoading = + tplLoading || libLoading || titleLoading || voiceLoading || assetsLoading; + const pageError = + tplError || libError || titleError || voiceError || assetsError; // 创建生成任务 const generateMutation = useMutation({ mutationFn: createGenerationTask, onSuccess: () => { - message.success('生成任务已提交'); + message.success("生成任务已提交"); setGenerated(true); setGenerating(false); }, onError: (err: unknown) => { - if (!(err as { __msgShown?: boolean })?.__msgShown) message.error('生成失败'); + if (!(err as { __msgShown?: boolean })?.__msgShown) + message.error("生成失败"); setGenerating(false); }, }); @@ -103,7 +126,7 @@ const GeneratePage: React.FC = () => { /** 开始生成 */ const handleGenerate = async () => { if (!selectedTemplate) { - message.warning('请选择模板'); + message.warning("请选择模板"); return; } setGenerating(true); @@ -117,7 +140,7 @@ const GeneratePage: React.FC = () => { const steps = [ { - title: '选择模板', + title: "选择模板", icon: <VideoCameraOutlined />, content: ( <Row gutter={[16, 16]}> @@ -135,7 +158,7 @@ const GeneratePage: React.FC = () => { style={{ border: selectedTemplate === t.id - ? '2px solid #1890ff' + ? "2px solid #1890ff" : undefined, }} > @@ -144,9 +167,7 @@ const GeneratePage: React.FC = () => { description={ <Space> {t.category && <Tag>{t.category}</Tag>} - {t.target_duration && ( - <Tag>{t.target_duration}s</Tag> - )} + {t.target_duration && <Tag>{t.target_duration}s</Tag>} </Space> } /> @@ -158,7 +179,7 @@ const GeneratePage: React.FC = () => { ), }, { - title: '选择素材', + title: "选择素材", icon: <PictureOutlined />, content: ( <div> @@ -168,12 +189,12 @@ const GeneratePage: React.FC = () => { <Checkbox.Group value={selectedAssets} onChange={(vals) => setSelectedAssets(vals as string[])} - style={{ width: '100%' }} + style={{ width: "100%" }} > <Row gutter={[12, 12]}> {allAssets.map((a) => ( <Col xs={24} sm={12} md={8} key={a.id}> - <Checkbox value={a.id} style={{ width: '100%' }}> + <Checkbox value={a.id} style={{ width: "100%" }}> {a.name} </Checkbox> </Col> @@ -185,7 +206,7 @@ const GeneratePage: React.FC = () => { ), }, { - title: '选择标题', + title: "选择标题", icon: <FileTextOutlined />, content: ( <div> @@ -195,12 +216,12 @@ const GeneratePage: React.FC = () => { <Checkbox.Group value={selectedTitles} onChange={(vals) => setSelectedTitles(vals as string[])} - style={{ width: '100%' }} + style={{ width: "100%" }} > <Row gutter={[12, 12]}> {titles.map((t) => ( <Col xs={24} sm={12} md={8} key={t.id}> - <Checkbox value={t.id} style={{ width: '100%' }}> + <Checkbox value={t.id} style={{ width: "100%" }}> <Text ellipsis>{t.content}</Text> </Checkbox> </Col> @@ -212,7 +233,7 @@ const GeneratePage: React.FC = () => { ), }, { - title: '选择配音', + title: "选择配音", icon: <AudioOutlined />, content: ( <div> @@ -222,12 +243,12 @@ const GeneratePage: React.FC = () => { <Checkbox.Group value={selectedVoices} onChange={(vals) => setSelectedVoices(vals as string[])} - style={{ width: '100%' }} + style={{ width: "100%" }} > <Row gutter={[12, 12]}> {voices.map((v) => ( <Col xs={24} sm={12} md={8} key={v.id}> - <Checkbox value={v.id} style={{ width: '100%' }}> + <Checkbox value={v.id} style={{ width: "100%" }}> {v.name} </Checkbox> </Col> @@ -239,7 +260,7 @@ const GeneratePage: React.FC = () => { ), }, { - title: '生成', + title: "生成", icon: <CheckCircleOutlined />, content: generated ? ( <Result @@ -247,19 +268,19 @@ const GeneratePage: React.FC = () => { title="生成任务已提交" subTitle="您可以在任务历史中查看生成进度" extra={ - <Button type="primary" onClick={() => navigate('/history')}> + <Button type="primary" onClick={() => navigate("/history")}> 查看任务 </Button> } /> ) : ( - <div style={{ textAlign: 'center', padding: 40 }}> + <div style={{ textAlign: "center", padding: 40 }}> {generating ? ( <Spin size="large" tip="正在生成..." /> ) : ( <Space direction="vertical" size={16}> <Text> - 已选择：{selectedAssets.length} 个素材，{selectedTitles.length}{' '} + 已选择：{selectedAssets.length} 个素材，{selectedTitles.length}{" "} 个标题，{selectedVoices.length} 个配音 </Text> <Button @@ -280,7 +301,7 @@ const GeneratePage: React.FC = () => { if (pageLoading) { return ( - <div style={{ textAlign: 'center', padding: 80 }}> + <div style={{ textAlign: "center", padding: 80 }}> <Spin size="large" /> </div> ); @@ -288,20 +309,22 @@ const GeneratePage: React.FC = () => { if (pageError) { return ( - <div style={{ padding: '24px', maxWidth: 1200, margin: '0 auto' }}> + <div style={{ padding: "24px", maxWidth: 1200, margin: "0 auto" }}> <Alert type="error" message="加载数据失败" description="部分数据获取失败，请刷新页面重试。" showIcon - action={<Button onClick={() => window.location.reload()}>刷新页面</Button>} + action={ + <Button onClick={() => window.location.reload()}>刷新页面</Button> + } /> </div> ); } return ( - <div style={{ padding: '24px', maxWidth: 1200, margin: '0 auto' }}> + <div style={{ padding: "24px", maxWidth: 1200, margin: "0 auto" }}> <Title level={3} style={{ marginBottom: 24 }}> 一键生成 @@ -320,8 +343,8 @@ const GeneratePage: React.FC = () => { {!generated && (
diff --git a/apps/web/src/pages/history/TaskHistory.tsx b/apps/web/src/pages/history/TaskHistory.tsx index 1b417045d..12104c8e2 100644 --- a/apps/web/src/pages/history/TaskHistory.tsx +++ b/apps/web/src/pages/history/TaskHistory.tsx @@ -2,8 +2,8 @@ * 任务历史页面 * 展示用户所有生成任务，支持筛选和重试 */ -import React, { useState } from 'react'; -import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; +import React, { useState } from "react"; +import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; import { Button, Typography, @@ -15,26 +15,41 @@ import { Progress, Popconfirm, message, -} from 'antd'; +} from "antd"; import { ReloadOutlined, CheckCircleOutlined, ClockCircleOutlined, CloseCircleOutlined, SyncOutlined, -} from '@ant-design/icons'; -import { getUserTasks, retryTask, type TaskItem } from '@/api/tasks'; -import type { ColumnsType } from 'antd/es/table'; +} from "@ant-design/icons"; +import { getUserTasks, retryTask, type TaskItem } from "@/api/tasks"; +import type { ColumnsType } from "antd/es/table"; const { Title } = Typography; /** 任务状态标签 */ const StatusTag: React.FC<{ status: string }> = ({ status }) => { - const config: Record = { - completed: { color: 'success', icon: , text: '已完成' }, - processing: { color: 'processing', icon: , text: '处理中' }, - pending: { color: 'default', icon: , text: '等待中' }, - failed: { color: 'error', icon: , text: '失败' }, + const config: Record< + string, + { color: string; icon: React.ReactNode; text: string } + > = { + completed: { + color: "success", + icon: , + text: "已完成", + }, + processing: { + color: "processing", + icon: , + text: "处理中", + }, + pending: { + color: "default", + icon: , + text: "等待中", + }, + failed: { color: "error", icon: , text: "失败" }, }; const c = config[status] || config.pending; return ( @@ -46,11 +61,11 @@ const StatusTag: React.FC<{ status: string }> = ({ status }) => { const TaskHistory: React.FC = () => { const queryClient = useQueryClient(); - const [statusFilter, setStatusFilter] = useState(''); + const [statusFilter, setStatusFilter] = useState(""); // 获取任务列表 const { data: tasks = [], isLoading } = useQuery({ - queryKey: ['user-tasks'], + queryKey: ["user-tasks"], queryFn: getUserTasks, }); @@ -58,10 +73,13 @@ const TaskHistory: React.FC = () => { const retryMutation = useMutation({ mutationFn: retryTask, onSuccess: () => { - message.success('任务已重新提交'); - queryClient.invalidateQueries({ queryKey: ['user-tasks'] }); + message.success("任务已重新提交"); + queryClient.invalidateQueries({ queryKey: ["user-tasks"] }); + }, + onError: (err: unknown) => { + if (!(err as { __msgShown?: boolean })?.__msgShown) + message.error("重试失败"); }, - onError: (err: unknown) => { if (!(err as { __msgShown?: boolean })?.__msgShown) message.error('重试失败') }, }); /** 过滤后的任务 */ @@ -71,64 +89,60 @@ const TaskHistory: React.FC = () => { const columns: ColumnsType = [ { - title: '任务类型', - dataIndex: 'task_type', - key: 'task_type', + title: "任务类型", + dataIndex: "task_type", + key: "task_type", width: 120, render: (type: string) => { const map: Record = { - generation: '视频生成', - ingest: '素材入库', - classification: '素材分类', - voice_generate: '配音生成', + generation: "视频生成", + ingest: "素材入库", + classification: "素材分类", + voice_generate: "配音生成", }; return map[type] || type; }, }, { - title: '状态', - dataIndex: 'status', - key: 'status', + title: "状态", + dataIndex: "status", + key: "status", width: 100, render: (status: string) => , }, { - title: '进度', - dataIndex: 'progress', - key: 'progress', + title: "进度", + dataIndex: "progress", + key: "progress", width: 120, render: (progress: number) => ( ), }, { - title: '信息', - dataIndex: 'user_message', - key: 'user_message', + title: "信息", + dataIndex: "user_message", + key: "user_message", ellipsis: true, }, { - title: '创建时间', - dataIndex: 'created_at', - key: 'created_at', + title: "创建时间", + dataIndex: "created_at", + key: "created_at", width: 180, - render: (t: string) => (t ? new Date(t).toLocaleString('zh-CN') : '-'), + render: (t: string) => (t ? new Date(t).toLocaleString("zh-CN") : "-"), }, { - title: '操作', - key: 'actions', + title: "操作", + key: "actions", width: 80, render: (_, record) => - record.status === 'failed' ? ( + record.status === "failed" ? ( retryMutation.mutate(record.id)} > - @@ -137,14 +151,14 @@ const TaskHistory: React.FC = () => { ]; return ( -
+
@@ -158,20 +172,20 @@ const TaskHistory: React.FC = () => { allowClear style={{ width: 150 }} options={[ - { value: 'pending', label: '等待中' }, - { value: 'processing', label: '处理中' }, - { value: 'completed', label: '已完成' }, - { value: 'failed', label: '失败' }, + { value: "pending", label: "等待中" }, + { value: "processing", label: "处理中" }, + { value: "completed", label: "已完成" }, + { value: "failed", label: "失败" }, ]} />
{isLoading ? ( -
+
) : filteredTasks.length === 0 ? ( - + ) : ( { const navigate = useNavigate(); const queryClient = useQueryClient(); - const [searchText, setSearchText] = useState(''); - const [filterCategory, setFilterCategory] = useState(''); + const [searchText, setSearchText] = useState(""); + const [filterCategory, setFilterCategory] = useState(""); /* ── 数据查询 ── */ const { data: templates = [], isLoading } = useQuery({ - queryKey: ['editing-templates', filterCategory, searchText], + queryKey: ["editing-templates", filterCategory, searchText], queryFn: () => getEditingTemplates({ category: filterCategory || undefined, @@ -63,7 +63,7 @@ const MyTemplates: React.FC = () => { }); const { data: categories = [] } = useQuery({ - queryKey: ['template-categories'], + queryKey: ["template-categories"], queryFn: getTemplateCategories, }); @@ -71,11 +71,12 @@ const MyTemplates: React.FC = () => { const deleteMutation = useMutation({ mutationFn: deleteEditingTemplate, onSuccess: () => { - message.success('模板已删除'); - queryClient.invalidateQueries({ queryKey: ['editing-templates'] }); + message.success("模板已删除"); + queryClient.invalidateQueries({ queryKey: ["editing-templates"] }); }, onError: (err: unknown) => { - if (!(err as { __msgShown?: boolean })?.__msgShown) message.error('删除失败'); + if (!(err as { __msgShown?: boolean })?.__msgShown) + message.error("删除失败"); }, }); @@ -89,15 +90,23 @@ const MyTemplates: React.FC = () => { title_config: tpl.title_config, subtitle_config: tpl.subtitle_config, bgm_config: tpl.bgm_config, - estimated_duration: tpl.estimated_duration ?? Math.round(tpl.segments.reduce((s, seg) => s + (seg.duration_min + seg.duration_max) / 2, 0)), + estimated_duration: + tpl.estimated_duration ?? + Math.round( + tpl.segments.reduce( + (s, seg) => s + (seg.duration_min + seg.duration_max) / 2, + 0, + ), + ), segments: tpl.segments.map(({ id: _id, ...rest }) => rest), }), onSuccess: () => { - message.success('模板已复制'); - queryClient.invalidateQueries({ queryKey: ['editing-templates'] }); + message.success("模板已复制"); + queryClient.invalidateQueries({ queryKey: ["editing-templates"] }); }, onError: (err: unknown) => { - if (!(err as { __msgShown?: boolean })?.__msgShown) message.error('复制失败'); + if (!(err as { __msgShown?: boolean })?.__msgShown) + message.error("复制失败"); }, }); @@ -132,7 +141,7 @@ const MyTemplates: React.FC = () => { @@ -151,7 +160,7 @@ const MyTemplates: React.FC = () => {