feat: 统一全局 Header 结构

- 新增 AppHeader 组件(Logo + 台入口 + 用户状态)
- 新增 UserDropdown 组件(用户下拉菜单)
- 新增 AppLayout 布局组件
- 移除 SidebarBrand 和 SidebarUser 组件
- 修改各台页面,移除侧边栏中的品牌区和用户区
- 修改 HomePage,移除独立 header/footer
- 修改 Layout 组件,简化为 sidebar + content
- 账户设置改为弹框形式,不中断用户操作
- 更新 README.md 布局系统说明
- 同步 delta specs 到主 specs
This commit is contained in:
2026-03-27 12:27:38 +08:00
parent ce9ebe5784
commit 7f493aa921
22 changed files with 793 additions and 608 deletions

View File

@@ -2,8 +2,6 @@ import { useState, useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { FiHome, FiBarChart2, FiUsers, FiList, FiCheckCircle, FiActivity, FiSettings } from 'react-icons/fi';
import Layout from '../components/Layout.jsx';
import SidebarBrand from '../components/layout/SidebarBrand.jsx';
import SidebarUser from '../components/layout/SidebarUser.jsx';
import SidebarNavItem from '../components/layout/SidebarNavItem.jsx';
import usePageState from '../hooks/usePageState.js';
import { ADMIN_PAGES } from '../constants/pages.js';
@@ -20,7 +18,6 @@ import ConsoleReviewListPage from './console/ConsoleReviewListPage.jsx';
import ConsoleReviewDetailPage from './console/ConsoleReviewDetailPage.jsx';
import ModelConfigsPage from './admin/ModelConfigsPage.jsx';
import AddModelConfigPage from './admin/AddModelConfigPage.jsx';
import AccountPage from '../components/account/AccountPage.jsx';
function AdminPage() {
const location = useLocation();
@@ -107,30 +104,13 @@ function AdminPage() {
onBack={() => navigateTo('modelConfigs')}
editData={editData}
/>;
case 'account':
return <AccountPage />;
default:
return <div>Page not found</div>;
}
};
const getPageTitle = () => {
if (editData && (currentPage === 'addDepartment' || currentPage === 'addUser' || currentPage === 'addProject' || currentPage === 'addModelConfig')) {
const prefix = '编辑';
const nameMap = { addDepartment: '部门', addUser: '用户', addProject: '项目', addModelConfig: '配置' };
return prefix + nameMap[currentPage];
}
if (currentPage === 'reviewDetail') {
return reviewType === 'version' ? '版本审核' : '下架审核';
}
return ADMIN_PAGES[currentPage]?.title || '';
};
const sidebar = (
<>
<div className="admin-sidebar-header">
<SidebarBrand subtitle="运营管理台" />
</div>
<nav className="admin-sidebar-nav">
<SidebarNavItem
icon={<FiHome />}
@@ -196,20 +176,12 @@ function AdminPage() {
textClassName="admin-nav-text"
/>
</nav>
<SidebarUser
onClick={() => navigateTo('account')}
wrapperClassName="admin-sidebar-user"
infoClassName="admin-sidebar-user-info"
nameClassName="admin-sidebar-user-name"
roleClassName="admin-sidebar-user-role"
/>
</>
);
return (
<Layout
sidebar={sidebar}
headerTitle={getPageTitle()}
sidebarClassName="admin-sidebar"
>
{renderPage()}