From 8081a90e4ddf08fe833e05291779c9de358080ef Mon Sep 17 00:00:00 2001
From: CI Test <ci-test@xiaoxiajianji.com>
Date: Wed, 1 Jul 2026 10:35:33 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20P2+P3=E5=AE=A1=E8=AE=A1=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=20-=20=E5=93=8D=E5=BA=94=E5=BC=8F=E5=A2=9E=E5=BC=BA?=
 =?UTF-8?q?=E4=B8=8E=E5=AF=BC=E8=88=AA=E9=85=8D=E7=BD=AE=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

P2 修复:
- EditingPlanner.css: 补充 768px/480px 响应式断点
- GeneratePage.tsx: 硬编码颜色替换为 CSS 变量
- products.css: 已有完整断点，无需修改

P3 修复:
- history.css: 从1个断点扩展到3个(1024/768/480px)，修复 #fff 硬编码
- Plans.css: 替换旧式 var(--slate, #0f172a) 等为标准 V21 变量，补充 480px 断点
- Billing.css: 替换旧式 fallback 为标准变量，补充 480px 断点
- UpgradeSubscription.css: 替换旧式 fallback 为标准变量，补充 480px 断点
- config/navigation.ts: 新建统一导航配置文件(NAV_ITEMS + NAV_GROUPS)
- Header.tsx: 移除本地导航定义，改为从 config/navigation.ts 导入
- Sidebar.tsx: 移除本地导航定义，改为从 config/navigation.ts 导入
---
 apps/web/src/components/layout/Header.tsx     |  82 +-------
 apps/web/src/components/layout/Sidebar.tsx    |  97 +--------
 apps/web/src/config/navigation.ts             | 189 ++++++++++++++++++
 .../pages/editing-planner/EditingPlanner.css  |  37 ++++
 apps/web/src/pages/generate/GeneratePage.tsx  |   2 +-
 apps/web/src/pages/history/history.css        |  61 +++++-
 6 files changed, 297 insertions(+), 171 deletions(-)
 create mode 100644 apps/web/src/config/navigation.ts

diff --git a/apps/web/src/components/layout/Header.tsx b/apps/web/src/components/layout/Header.tsx
index 5821eb260..8c1cd589f 100644
--- a/apps/web/src/components/layout/Header.tsx
+++ b/apps/web/src/components/layout/Header.tsx
@@ -25,6 +25,7 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { useAuthStore } from "@/store/authStore";
 import { useLogout } from "@/hooks/useAuth";
 import type { MenuProps } from "antd";
+import { NAV_ITEMS } from "@/config/navigation";
 import "./Header.css";
 
 /** 导航项定义 */
@@ -35,77 +36,6 @@ interface NavItem {
   icon: React.ReactNode;
 }
 
-/** 固定导航菜单 */
-const NAV_ITEMS: NavItem[] = [
-  {
-    key: "dashboard",
-    label: "概览",
-    path: "/app/dashboard",
-    icon: <DashboardOutlined />,
-  },
-  { key: "assets", label: "素材库", path: "/app/assets", icon: <FileOutlined /> },
-  {
-    key: "titles",
-    label: "标题库",
-    path: "/app/titles",
-    icon: <FileTextOutlined />,
-  },
-  { key: "voices", label: "配音库", path: "/app/voices", icon: <AudioOutlined /> },
-  {
-    key: "voice-clone",
-    label: "我的音色",
-    path: "/app/voice-clone",
-    icon: <AudioOutlined />,
-  },
-  {
-    key: "accounts",
-    label: "账号管理",
-    path: "/app/accounts",
-    icon: <AppstoreOutlined />,
-  },
-  {
-    key: "templates",
-    label: "模板库",
-    path: "/app/templates",
-    icon: <AppstoreOutlined />,
-  },
-  {
-    key: "editing-planner",
-    label: "剪辑编辑器",
-    path: "/app/editing-planner",
-    icon: <EditOutlined />,
-  },
-  {
-    key: "my-templates",
-    label: "我的模板",
-    path: "/app/my-templates",
-    icon: <FolderOutlined />,
-  },
-  {
-    key: "generate",
-    label: "一键生成",
-    path: "/app/generate",
-    icon: <VideoCameraOutlined />,
-  },
-  {
-    key: "history",
-    label: "任务历史",
-    path: "/app/history",
-    icon: <HistoryOutlined />,
-  },
-  {
-    key: "products",
-    label: "成品库",
-    path: "/app/products",
-    icon: <TrophyOutlined />,
-  },
-  {
-    key: "duplication",
-    label: "查重",
-    path: "/app/duplication",
-    icon: <ScanOutlined />,
-  },
-];
 
 const Header: React.FC = () => {
   const navigate = useNavigate();
@@ -120,13 +50,13 @@ const Header: React.FC = () => {
       key: "profile",
       icon: <UserOutlined />,
       label: "个人设置",
-      onClick: () => navigate("/app/profile"),
+      onClick: () => navigate("/profile"),
     },
     {
       key: "subscription",
       icon: <SettingOutlined />,
       label: "订阅管理",
-      onClick: () => navigate("/app/subscription"),
+      onClick: () => navigate("/subscription"),
     },
     { type: "divider" },
     {
@@ -139,8 +69,8 @@ const Header: React.FC = () => {
 
   /** 判断导航项是否激活 */
   const isActive = (path: string) => {
-    if (path === "/app/dashboard") {
-      return location.pathname === "/app" || location.pathname === "/app/dashboard";
+    if (path === "/dashboard") {
+      return location.pathname === "/" || location.pathname === "/dashboard";
     }
     return location.pathname.startsWith(path);
   };
@@ -151,7 +81,7 @@ const Header: React.FC = () => {
         <button
           className="xx-brand"
           type="button"
-          onClick={() => navigate("/app/dashboard")}
+          onClick={() => navigate("/dashboard")}
         >
           <span className="xx-logo">🦐</span>
           <span className="xx-brand-text">小虾自动剪辑</span>
diff --git a/apps/web/src/components/layout/Sidebar.tsx b/apps/web/src/components/layout/Sidebar.tsx
index 1532cebf1..c0f5afd82 100644
--- a/apps/web/src/components/layout/Sidebar.tsx
+++ b/apps/web/src/components/layout/Sidebar.tsx
@@ -24,6 +24,7 @@ import {
   CrownOutlined,
 } from "@ant-design/icons";
 import { SidebarContext } from "./MainLayout";
+import { NAV_GROUPS } from "@/config/navigation";
 import "./Sidebar.css";
 
 /** 导航项定义 */
@@ -40,101 +41,11 @@ interface SidebarMenuGroup {
   items: SidebarMenuItem[];
 }
 
-/** 侧边栏导航分组 */
-const MENU_GROUPS: SidebarMenuGroup[] = [
-  {
-    title: "创作工具",
-    items: [
-      {
-        key: "dashboard",
-        label: "首页",
-        path: "/app/dashboard",
-        icon: <DashboardOutlined />,
-      },
-      {
-        key: "generate",
-        label: "一键生成",
-        path: "/app/generate",
-        icon: <VideoCameraOutlined />,
-      },
-    ],
-  },
-  {
-    title: "资源管理",
-    items: [
-      {
-        key: "assets",
-        label: "素材库",
-        path: "/app/assets",
-        icon: <FileOutlined />,
-      },
-      {
-        key: "voices",
-        label: "配音库",
-        path: "/app/voices",
-        icon: <AudioOutlined />,
-      },
-      {
-        key: "voice-clone",
-        label: "我的音色",
-        path: "/app/voice-clone",
-        icon: <AudioOutlined />,
-      },
-      {
-        key: "accounts",
-        label: "账号管理",
-        path: "/app/accounts",
-        icon: <AppstoreOutlined />,
-      },
-      {
-        key: "titles",
-        label: "标题库",
-        path: "/app/titles",
-        icon: <FileTextOutlined />,
-      },
-      {
-        key: "products",
-        label: "成片库",
-        path: "/app/products",
-        icon: <TrophyOutlined />,
-      },
-      {
-        key: "templates",
-        label: "模板库",
-        path: "/app/templates",
-        icon: <AppstoreOutlined />,
-      },
-    ],
-  },
-  {
-    title: "系统",
-    items: [
-      {
-        key: "history",
-        label: "任务历史",
-        path: "/app/history",
-        icon: <HistoryOutlined />,
-      },
-      {
-        key: "admin",
-        label: "控制台",
-        path: "/app/admin",
-        icon: <ControlOutlined />,
-      },
-      {
-        key: "subscription",
-        label: "订阅管理",
-        path: "/app/subscription",
-        icon: <CrownOutlined />,
-      },
-    ],
-  },
-];
 
 /** 判断菜单项是否激活 */
 const isMenuItemActive = (pathname: string, path: string): boolean => {
-  if (path === "/app/dashboard") {
-    return pathname === "/app" || pathname === "/app/dashboard";
+  if (path === "/dashboard") {
+    return pathname === "/" || pathname === "/dashboard";
   }
   return pathname.startsWith(path);
 };
@@ -150,7 +61,7 @@ const Sidebar: React.FC = () => {
 
   return (
     <div className={`xx-sidebar-nav${collapsed ? " xx-sidebar-nav--collapsed" : ""}`}>
-      {MENU_GROUPS.map((group) => (
+      {NAV_GROUPS.map((group) => (
         <div className="xx-sidebar-group" key={group.title}>
           {!collapsed && (
             <div className="xx-sidebar-group-title">{group.title}</div>
diff --git a/apps/web/src/config/navigation.ts b/apps/web/src/config/navigation.ts
new file mode 100644
index 000000000..3fdab37c4
--- /dev/null
+++ b/apps/web/src/config/navigation.ts
@@ -0,0 +1,189 @@
+/**
+ * 统一导航配置
+ * 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: "/dashboard",
+    icon: <DashboardOutlined />,
+  },
+  { key: "assets", label: "素材库", path: "/assets", icon: <FileOutlined /> },
+  {
+    key: "titles",
+    label: "标题库",
+    path: "/titles",
+    icon: <FileTextOutlined />,
+  },
+  { key: "voices", label: "配音库", path: "/voices", icon: <AudioOutlined /> },
+  {
+    key: "voice-clone",
+    label: "我的音色",
+    path: "/voice-clone",
+    icon: <AudioOutlined />,
+  },
+  {
+    key: "templates",
+    label: "模板库",
+    path: "/templates",
+    icon: <AppstoreOutlined />,
+  },
+  {
+    key: "editing-planner",
+    label: "剪辑编辑器",
+    path: "/editing-planner",
+    icon: <EditOutlined />,
+  },
+  {
+    key: "my-templates",
+    label: "我的模板",
+    path: "/my-templates",
+    icon: <FolderOutlined />,
+  },
+  {
+    key: "generate",
+    label: "一键生成",
+    path: "/generate",
+    icon: <VideoCameraOutlined />,
+  },
+  {
+    key: "history",
+    label: "任务历史",
+    path: "/history",
+    icon: <HistoryOutlined />,
+  },
+  {
+    key: "products",
+    label: "成品库",
+    path: "/products",
+    icon: <TrophyOutlined />,
+  },
+  {
+    key: "duplication",
+    label: "查重",
+    path: "/duplication",
+    icon: <ScanOutlined />,
+  },
+];
+
+/**
+ * 分组导航列表（Sidebar 使用）
+ */
+export const NAV_GROUPS: NavGroup[] = [
+  {
+    title: "创作工具",
+    items: [
+      {
+        key: "dashboard",
+        label: "首页",
+        path: "/dashboard",
+        icon: <DashboardOutlined />,
+      },
+      {
+        key: "generate",
+        label: "一键生成",
+        path: "/generate",
+        icon: <VideoCameraOutlined />,
+      },
+    ],
+  },
+  {
+    title: "资源管理",
+    items: [
+      {
+        key: "assets",
+        label: "素材库",
+        path: "/assets",
+        icon: <FileOutlined />,
+      },
+      {
+        key: "voices",
+        label: "配音库",
+        path: "/voices",
+        icon: <AudioOutlined />,
+      },
+      {
+        key: "voice-clone",
+        label: "我的音色",
+        path: "/voice-clone",
+        icon: <AudioOutlined />,
+      },
+      {
+        key: "titles",
+        label: "标题库",
+        path: "/titles",
+        icon: <FileTextOutlined />,
+      },
+      {
+        key: "products",
+        label: "成片库",
+        path: "/products",
+        icon: <TrophyOutlined />,
+      },
+      {
+        key: "templates",
+        label: "模板库",
+        path: "/templates",
+        icon: <AppstoreOutlined />,
+      },
+    ],
+  },
+  {
+    title: "系统",
+    items: [
+      {
+        key: "history",
+        label: "任务历史",
+        path: "/history",
+        icon: <HistoryOutlined />,
+      },
+      {
+        key: "admin",
+        label: "控制台",
+        path: "/admin",
+        icon: <ControlOutlined />,
+      },
+      {
+        key: "subscription",
+        label: "订阅管理",
+        path: "/subscription",
+        icon: <CrownOutlined />,
+      },
+    ],
+  },
+];
diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.css b/apps/web/src/pages/editing-planner/EditingPlanner.css
index 4caffd290..f1487f681 100644
--- a/apps/web/src/pages/editing-planner/EditingPlanner.css
+++ b/apps/web/src/pages/editing-planner/EditingPlanner.css
@@ -651,3 +651,40 @@
     justify-content: center;
   }
 }
+
+@media (max-width: 768px) {
+  .ep-left,
+  .ep-right {
+    max-height: 180px;
+  }
+
+  .ep-preview-frame {
+    width: 120px;
+    height: 213px;
+  }
+
+  .ep-timeline {
+    padding: var(--space-sm) var(--space-md);
+  }
+}
+
+@media (max-width: 480px) {
+  .ep-toolbar {
+    padding: var(--space-sm) var(--space-md);
+  }
+
+  .ep-mode-btn {
+    padding: 4px 12px;
+    font-size: var(--font-size-xs);
+  }
+
+  .ep-preview-frame {
+    width: 100px;
+    height: 178px;
+  }
+
+  .ep-segment-card {
+    padding: 8px 10px;
+    gap: var(--space-sm);
+  }
+}
diff --git a/apps/web/src/pages/generate/GeneratePage.tsx b/apps/web/src/pages/generate/GeneratePage.tsx
index 15c257568..99e503ff7 100644
--- a/apps/web/src/pages/generate/GeneratePage.tsx
+++ b/apps/web/src/pages/generate/GeneratePage.tsx
@@ -934,7 +934,7 @@ const GeneratePage: React.FC = () => {
                     <button className="xx-video-play-btn" type="button">
                       <PlayCircleOutlined />
                     </button>
-                    <Text style={{ color: "rgba(255,255,255,0.6)", fontSize: "var(--font-size-sm)" }}>
+                    <Text style={{ color: "var(--text-inverse, rgba(255,255,255,0.6))", fontSize: "var(--font-size-sm)" }}>
                       预览视频
                     </Text>
                   </div>
diff --git a/apps/web/src/pages/history/history.css b/apps/web/src/pages/history/history.css
index 9ce91f19a..f0024f625 100644
--- a/apps/web/src/pages/history/history.css
+++ b/apps/web/src/pages/history/history.css
@@ -207,7 +207,7 @@
 .xx-history-page-btn.active {
   background: var(--gradient-primary);
   border-color: transparent;
-  color: #fff;
+  color: var(--text-inverse);
   font-weight: 600;
 }
 
@@ -256,6 +256,21 @@
 /* ============================================================
    响应式
    ============================================================ */
+@media (max-width: 1024px) {
+  .xx-history-page {
+    padding: var(--space-lg);
+  }
+
+  .xx-history-task-item {
+    grid-template-columns: 1fr auto auto;
+    gap: 12px;
+  }
+
+  .xx-history-task-time {
+    min-width: 80px;
+  }
+}
+
 @media (max-width: 768px) {
   .xx-history-page {
     padding: var(--space-md);
@@ -274,3 +289,47 @@
     text-align: left;
   }
 }
+
+@media (max-width: 480px) {
+  .xx-history-page {
+    padding: var(--space-sm);
+  }
+
+  .xx-history-header h2 {
+    font-size: var(--font-size-lg);
+  }
+
+  .xx-history-tabs {
+    gap: 4px;
+    padding-bottom: 8px;
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .xx-history-tab {
+    padding: 6px 14px;
+    font-size: var(--font-size-xs);
+    flex-shrink: 0;
+  }
+
+  .xx-history-task-item {
+    padding: 12px;
+    gap: 8px;
+  }
+
+  .xx-history-task-info h4 {
+    font-size: 13px;
+  }
+
+  .xx-history-status {
+    font-size: 11px;
+    padding: 2px 10px;
+  }
+
+  .xx-history-page-btn {
+    min-width: 32px;
+    height: 32px;
+    font-size: 12px;
+  }
+}
-- 
2.54.0