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: , - }, - { 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: "accounts", - label: "账号管理", - path: "/app/accounts", - 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: , - }, -]; const Header: React.FC = () => { const navigate = useNavigate(); @@ -120,13 +50,13 @@ const Header: React.FC = () => { key: "profile", icon: , label: "个人设置", - onClick: () => navigate("/app/profile"), + onClick: () => navigate("/profile"), }, { key: "subscription", icon: , 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 = () => { - + 预览视频 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; + } +}