From b87d7b763e9b4f94bc7f48153893c2de62c22db4 Mon Sep 17 00:00:00 2001 From: CI Test Date: Mon, 13 Jul 2026 14:12:00 +0800 Subject: [PATCH] =?UTF-8?q?chore(frontend):=20Phase=201=20=E6=8A=80?= =?UTF-8?q?=E6=9C=AF=E5=80=BA=E5=8A=A1=E6=B8=85=E7=90=86=20-=20=E5=88=A0?= =?UTF-8?q?=E9=99=A4=E6=AD=BB=E4=BB=A3=E7=A0=81=E5=92=8C=E9=87=8D=E5=A4=8D?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 删除 src/config/navigation.tsx（废弃文件，211行） - 删除 src/components/business/business.css（死CSS，365行） - 删除 src/api/dashboard.ts（废弃API模块，42行） - 移除 router/index.tsx 重复 my-voices 路由（7行） - 清理 generate.css 重复按钮样式（48行，改用 ui.css 统一样式） - 清理 Admin.css 重复 .xx-card/.xx-select 定义（40行） 共减少约 713 行代码，vite build 验证通过 --- apps/web/src/api/dashboard.ts | 42 -- apps/web/src/components/business/business.css | 365 ------------------ apps/web/src/config/navigation.tsx | 211 ---------- apps/web/src/pages/admin/Admin.css | 40 -- apps/web/src/pages/generate/generate.css | 48 --- apps/web/src/router/index.tsx | 7 - 6 files changed, 713 deletions(-) delete mode 100644 apps/web/src/api/dashboard.ts delete mode 100644 apps/web/src/components/business/business.css delete mode 100644 apps/web/src/config/navigation.tsx diff --git a/apps/web/src/api/dashboard.ts b/apps/web/src/api/dashboard.ts deleted file mode 100644 index 6522aa71e..000000000 --- a/apps/web/src/api/dashboard.ts +++ /dev/null @@ -1,42 +0,0 @@ -/** - * 仪表盘 API - * Phase 1 新增：用户仪表盘概览 - */ -import apiClient from "./client"; - -/** 仪表盘概览数据 */ -export interface DashboardOverview { - /** 素材总数 */ - total_assets: number; - /** 已用存储（字节） */ - used_storage_bytes: number; - /** 总标题数 */ - total_titles: number; - /** 总配音数 */ - total_voices: number; - /** 生成任务总数 */ - total_tasks: number; - /** 成品总数 */ - total_products: number; - /** 最近生成任务 */ - recent_tasks: Array<{ - id: string; - task_type: string; - status: string; - progress: number; - user_message: string; - created_at: string; - }>; - /** 订阅信息 */ - subscription: { - 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; -}; diff --git a/apps/web/src/components/business/business.css b/apps/web/src/components/business/business.css deleted file mode 100644 index 40d3fb6a8..000000000 --- a/apps/web/src/components/business/business.css +++ /dev/null @@ -1,365 +0,0 @@ -/* V21 业务组件统一样式 */ - -/* ==================== 按钮 ==================== */ -.xx-primary-btn { - background: var(--gradient-primary) !important; - color: var(--text-inverse) !important; - border: none !important; - border-radius: var(--radius-md) !important; - padding: 10px 20px !important; - font-weight: var(--font-weight-bold) !important; - box-shadow: var(--shadow-primary) !important; - transition: var(--transition-all) !important; - cursor: pointer; - height: auto !important; -} - -.xx-primary-btn:hover { - box-shadow: var(--shadow-hover) !important; - transform: translateY(-1px); -} - -.xx-ghost-btn { - background: transparent !important; - color: var(--primary-color) !important; - border: 2px solid var(--primary-color) !important; - border-radius: var(--radius-md) !important; - padding: var(--space-sm) 18px !important; - font-weight: var(--font-weight-bold) !important; - transition: var(--transition-all) !important; - cursor: pointer; - height: auto !important; -} - -.xx-ghost-btn:hover { - background: var(--primary-soft) !important; -} - -/* ==================== 卡片 ==================== */ -.xx-card { - background: var(--bg-elevated); - border: 1px solid var(--border-color); - border-radius: var(--radius-xl); - box-shadow: var(--shadow-card); - padding: var(--space-lg); - margin-bottom: 20px; - transition: all var(--transition-slow); -} - -.xx-card:hover { - box-shadow: var(--shadow-md); - transform: translateY(-2px); -} - -/* ==================== 页面结构 ==================== */ -.xx-page { - max-width: 1200px; - margin: 0 auto; - padding: var(--space-lg); -} - -.xx-page-head { - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 18px; - margin-bottom: 28px; -} - -.xx-page-head h2 { - font-size: 26px; - font-weight: var(--font-weight-extrabold); - color: var(--text-primary); - margin: 0 0 var(--space-sm); -} - -.xx-page-head p { - font-size: var(--font-size-base); - color: var(--text-secondary); - margin: 0; -} - -/* ==================== 表格样式 ==================== */ -.xx-table-card { - background: var(--bg-elevated); - border: 1px solid var(--border-color); - border-radius: var(--radius-xl); - box-shadow: var(--shadow-card); - padding: 20px; - overflow: hidden; -} - -/* 表格包装器 */ -.xx-table-wrapper { - border-radius: var(--radius-lg); - overflow: hidden; -} - -/* ==================== 标签/Tag ==================== */ -.xx-tag { - padding: var(--space-xs) 12px; - border-radius: var(--radius-xs); - font-size: 13px; - font-weight: var(--font-weight-medium); -} - -.xx-tag-indigo { - background: var(--primary-soft); - color: var(--primary-color); - border: 1px solid var(--color-primary-200); -} - -.xx-tag-success { - background: var(--success-soft); - color: var(--color-secondary-500); - border: 1px solid var(--success-border); -} - -.xx-tag-warning { - background: var(--warning-soft); - color: var(--accent-dark); - border: 1px solid var(--color-accent-200); -} - -.xx-tag-error { - background: var(--error-soft); - color: var(--error-color); - border: 1px solid var(--error-border); -} - -/* ==================== 搜索栏 ==================== */ -.xx-search-bar { - margin-bottom: 20px; -} - -.xx-search-input { - width: 100%; - padding: 12px 18px; - border: 2px solid var(--border-color); - border-radius: var(--radius-md); - font-size: var(--font-size-base); - background: var(--bg-primary); - transition: var(--transition-all); - outline: none; -} - -.xx-search-input:focus { - border-color: var(--primary-color); - box-shadow: 0 0 0 4px - color-mix(in srgb, var(--primary-color) 10%, transparent); -} - -/* ==================== Modal ==================== */ -.xx-modal .ant-modal-content { - border-radius: var(--radius-xl); - padding: var(--space-lg); -} - -.xx-modal .ant-modal-header { - border-radius: var(--radius-xl) var(--radius-xl) 0 0; - padding: 20px var(--space-lg); - border-bottom: 1px solid var(--border-color); -} - -.xx-modal .ant-modal-title { - font-size: var(--font-size-lg); - font-weight: var(--font-weight-bold); - color: var(--text-primary); -} - -.xx-modal .ant-modal-footer { - border-top: 1px solid var(--border-color); - padding: var(--space-md) var(--space-lg); -} - -/* ==================== 空状态 ==================== */ -.xx-empty-state { - text-align: center; - padding: var(--space-3xl) var(--space-lg); - color: var(--text-secondary); -} - -.xx-empty-state-icon { - font-size: 48px; - margin-bottom: var(--space-md); -} - -/* ==================== 网格布局 ==================== */ -.xx-grid-2 { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 20px; -} - -.xx-grid-3 { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 20px; -} - -.xx-grid-4 { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 20px; -} - -@media (max-width: 768px) { - .xx-grid-2, - .xx-grid-3, - .xx-grid-4 { - grid-template-columns: 1fr; - } -} - -/* ==================== 配额展示 ==================== */ -.xx-quota-item { - padding: 20px; - background: var(--bg-primary); - border: 1px solid var(--border-color); - border-radius: var(--radius-lg); - transition: var(--transition-all); -} - -.xx-quota-item:hover { - border-color: var(--primary-color); - box-shadow: 0 8px 24px - color-mix(in srgb, var(--primary-color) 10%, transparent); -} - -/* ==================== 进度条 ==================== */ -.xx-progress { - margin-top: 12px; -} - -/* ==================== Ant Design 覆盖样式 ==================== */ -/* Table overrides */ -.ant-table-wrapper .ant-table-thead > tr > th { - background: var(--bg-secondary) !important; - font-weight: var(--font-weight-bold) !important; - color: var(--text-primary) !important; - border-bottom: 2px solid var(--border-color) !important; - padding: 14px var(--space-md) !important; -} - -.ant-table-wrapper .ant-table-tbody > tr > td { - padding: 14px var(--space-md) !important; - border-bottom: 1px solid var(--color-gray-100) !important; -} - -.ant-table-wrapper .ant-table-tbody > tr:hover > td { - background: var(--color-gray-50) !important; -} - -/* Card overrides */ -.ant-card { - border-radius: var(--radius-xl) !important; - border: 1px solid var(--border-color) !important; -} - -.ant-card-head { - border-bottom: 1px solid var(--border-color) !important; - min-height: 52px !important; - padding: 0 var(--space-lg) !important; -} - -.ant-card-head-title { - font-weight: var(--font-weight-bold) !important; - font-size: var(--font-size-md) !important; - color: var(--text-primary) !important; -} - -.ant-card-body { - padding: 20px var(--space-lg) !important; -} - -/* Modal overrides */ -.ant-modal-content { - border-radius: var(--radius-xl) !important; - overflow: hidden; -} - -.ant-modal-header { - padding: 20px var(--space-lg) !important; - background: var(--bg-primary) !important; -} - -.ant-modal-title { - font-weight: var(--font-weight-bold) !important; - font-size: var(--font-size-lg) !important; - color: var(--text-primary) !important; -} - -.ant-modal-body { - padding: var(--space-lg) !important; -} - -.ant-modal-footer { - padding: var(--space-md) var(--space-lg) !important; -} - -/* Button overrides */ -.ant-btn-primary { - background: var(--gradient-primary) !important; - border: none !important; - border-radius: var(--radius-md) !important; - box-shadow: var(--shadow-primary) !important; - height: auto !important; - padding: 10px 20px !important; - font-weight: var(--font-weight-bold) !important; -} - -.ant-btn-primary:hover { - background: var(--gradient-primary) !important; - box-shadow: var(--shadow-hover) !important; - transform: translateY(-1px); -} - -/* Tag overrides */ -.ant-tag { - border-radius: var(--radius-xs) !important; - padding: var(--space-xs) 12px !important; - font-weight: var(--font-weight-medium) !important; -} - -/* Select overrides */ -.ant-select-selector { - border-radius: var(--radius-md) !important; - border-color: var(--border-color) !important; -} - -.ant-select:not(.ant-select-disabled):hover .ant-select-selector { - border-color: var(--primary-color) !important; -} - -.ant-select-focused .ant-select-selector { - border-color: var(--primary-color) !important; - box-shadow: 0 0 0 3px - color-mix(in srgb, var(--primary-color) 10%, transparent) !important; -} - -/* Input overrides */ -.ant-input { - border-radius: var(--radius-md) !important; - border-color: var(--border-color) !important; - padding: 10px 14px !important; -} - -.ant-input:hover { - border-color: var(--primary-color) !important; -} - -.ant-input:focus { - border-color: var(--primary-color) !important; - box-shadow: 0 0 0 3px - color-mix(in srgb, var(--primary-color) 10%, transparent) !important; -} - -/* Progress overrides */ -.ant-progress-inner { - background: var(--color-gray-100) !important; - border-radius: var(--radius-xs) !important; -} - -.ant-progress-bg { - border-radius: var(--radius-xs) !important; -} diff --git a/apps/web/src/config/navigation.tsx b/apps/web/src/config/navigation.tsx deleted file mode 100644 index 76a689c32..000000000 --- a/apps/web/src/config/navigation.tsx +++ /dev/null @@ -1,211 +0,0 @@ -/** - * 统一导航配置 - * Header 和 Sidebar 共用此数据源 - */ -import React from "react"; -import { - DashboardOutlined, - VideoCameraOutlined, - FileOutlined, - AudioOutlined, - FileTextOutlined, - TrophyOutlined, - AppstoreOutlined, - HistoryOutlined, - ControlOutlined, - CrownOutlined, - ScanOutlined, - EditOutlined, - FolderOutlined, -} from "@ant-design/icons"; - -/** 导航项定义 */ -export interface NavItem { - key: string; - label: string; - path: string; - icon: React.ReactNode; -} - -/** 导航分组定义 */ -export interface NavGroup { - title: string; - items: NavItem[]; -} - -/** - * 扁平导航列表（Header 使用） - */ -export const NAV_ITEMS: NavItem[] = [ - { - key: "dashboard", - label: "概览", - path: "/app/dashboard", - icon: , - }, - { - key: "assets", - label: "素材库", - path: "/app/assets", - icon: , - }, - { - key: "titles", - label: "标题库", - path: "/app/titles", - icon: , - }, - { - key: "voices", - label: "配音库", - path: "/app/voices", - icon: , - }, - { - key: "voice-clone", - label: "我的音色", - path: "/app/voice-clone", - icon: , - }, - { - key: "voice-materials", - label: "配音素材库", - path: "/app/voice-materials", - icon: , - }, - { - key: "templates", - label: "模板库", - path: "/app/templates", - icon: , - }, - { - key: "editing-planner", - label: "剪辑编辑器", - path: "/app/editing-planner", - icon: , - }, - { - key: "my-templates", - label: "我的模板", - path: "/app/my-templates", - icon: , - }, - { - key: "generate", - label: "一键生成", - path: "/app/generate", - icon: , - }, - { - key: "history", - label: "任务历史", - path: "/app/history", - icon: , - }, - { - key: "products", - label: "成品库", - path: "/app/products", - icon: , - }, - { - key: "duplication", - label: "查重", - path: "/app/duplication", - icon: , - }, -]; - -/** - * 分组导航列表（Sidebar 使用） - */ -export const NAV_GROUPS: NavGroup[] = [ - { - title: "创作工具", - items: [ - { - key: "dashboard", - label: "首页", - path: "/app/dashboard", - icon: , - }, - { - key: "generate", - label: "一键生成", - path: "/app/generate", - icon: , - }, - ], - }, - { - title: "资源管理", - items: [ - { - key: "assets", - label: "素材库", - path: "/app/assets", - icon: , - }, - { - key: "voices", - label: "配音库", - path: "/app/voices", - icon: , - }, - { - key: "voice-clone", - label: "我的音色", - path: "/app/voice-clone", - icon: , - }, - { - key: "voice-materials", - label: "配音素材库", - path: "/app/voice-materials", - icon: , - }, - { - key: "titles", - label: "标题库", - path: "/app/titles", - icon: , - }, - { - key: "products", - label: "成片库", - path: "/app/products", - icon: , - }, - { - key: "templates", - label: "模板库", - path: "/app/templates", - icon: , - }, - ], - }, - { - title: "系统", - items: [ - { - key: "history", - label: "任务历史", - path: "/app/history", - icon: , - }, - { - key: "admin", - label: "控制台", - path: "/app/admin", - icon: , - }, - { - key: "subscription", - label: "订阅管理", - path: "/app/subscription", - icon: , - }, - ], - }, -]; diff --git a/apps/web/src/pages/admin/Admin.css b/apps/web/src/pages/admin/Admin.css index 3f6dcf0d6..071cb79cc 100644 --- a/apps/web/src/pages/admin/Admin.css +++ b/apps/web/src/pages/admin/Admin.css @@ -75,35 +75,6 @@ margin: 0; } -/* V21 卡片 */ -.xx-card { - background: rgba(255, 255, 255, 0.94); - border: 1px solid rgba(226, 232, 240, 0.95); - border-radius: var(--radius-lg); - box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); - padding: 24px; - transition: all 0.3s; -} - -.xx-card:hover { - box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08); -} - -.xx-card .ant-card-head { - border-bottom: 1px solid rgba(226, 232, 240, 0.8); - padding: 20px 24px; -} - -.xx-card .ant-card-head-title { - font-weight: 800; - font-size: 17px; - color: var(--slate, #0f172a); -} - -.xx-card .ant-card-body { - padding: 24px; -} - /* 统计卡片网格 - 4列 */ .xx-grid-4 { display: grid; @@ -302,17 +273,6 @@ box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important; } -/* V21 Select */ -.xx-select { - border-radius: var(--radius-md) !important; -} - -.xx-select:hover, -.xx-select:focus { - border-color: var(--indigo, #4f46e5) !important; - box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important; -} - /* V21 Tag */ .xx-tag { border-radius: var(--radius-xs) !important; diff --git a/apps/web/src/pages/generate/generate.css b/apps/web/src/pages/generate/generate.css index 8f915d49e..75c8c826c 100644 --- a/apps/web/src/pages/generate/generate.css +++ b/apps/web/src/pages/generate/generate.css @@ -612,54 +612,6 @@ flex: 1; } -/* ============================================================ - 按钮（匹配原型 .btn .ghost / .btn .primary） - ============================================================ */ -.xx-btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 6px; - height: 42px; - padding: 0 20px; - border-radius: var(--radius-sm); - font-size: 14px; - font-weight: 600; - cursor: pointer; - transition: all 0.15s ease; - border: none; - outline: none; - white-space: nowrap; -} - -.xx-btn:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.xx-btn-primary { - background: var(--gradient-primary); - color: var(--text-inverse); - box-shadow: 0 14px 26px rgba(79, 70, 229, 0.22); -} - -.xx-btn-primary:hover:not(:disabled) { - transform: translateY(-2px); - box-shadow: 0 18px 34px rgba(79, 70, 229, 0.28); -} - -.xx-btn-ghost { - background: var(--bg-primary); - border: 1px solid var(--border-color); - color: var(--text-secondary); -} - -.xx-btn-ghost:hover:not(:disabled) { - border-color: var(--info-border); - color: var(--primary-dark); - background: var(--primary-soft); -} - /* ============================================================ 右侧预览区 generate-preview ============================================================ */ diff --git a/apps/web/src/router/index.tsx b/apps/web/src/router/index.tsx index 4485d2d4a..cadcd756e 100644 --- a/apps/web/src/router/index.tsx +++ b/apps/web/src/router/index.tsx @@ -170,13 +170,6 @@ export const router = createBrowserRouter([ Component: m.default, })), }, - { - path: "my-voices", - lazy: () => - import("@/pages/my-voices/MyVoices").then((m) => ({ - Component: m.default, - })), - }, { path: "accounts", lazy: () => -- 2.54.0