feat(frontend): restructure admin menu into two-level groups and add intelligent-eval entry
Some checks failed
CI / test (push) Failing after 50s

Reorganize the sidebar into top-level items plus four groups (静态评估 / 智能评估 /
配置中心 / 系统), add the /intelligent-evals route with a placeholder page, and tune
the expanded-submenu background so nested groups sit harmoniously on the dark sider.
This commit is contained in:
sinohqb 2026-08-05 03:27:48 +08:00
parent 1317552701
commit da6ccc265d
3 changed files with 73 additions and 7 deletions

View File

@ -13,6 +13,10 @@ import {
CloudServerOutlined, CloudServerOutlined,
ScheduleOutlined, ScheduleOutlined,
LogoutOutlined, LogoutOutlined,
BulbOutlined,
ExperimentOutlined,
SettingOutlined,
ToolOutlined,
} from '@ant-design/icons' } from '@ant-design/icons'
import TabBar from './components/TabBar' import TabBar from './components/TabBar'
import LoginPage from './pages/Login' import LoginPage from './pages/Login'
@ -33,6 +37,7 @@ const CampaignsPage = lazy(() => import('./pages/Campaigns'))
const OpenClawPage = lazy(() => import('./pages/OpenClaw')) const OpenClawPage = lazy(() => import('./pages/OpenClaw'))
const FilesPage = lazy(() => import('./pages/Files')) const FilesPage = lazy(() => import('./pages/Files'))
const ModelConfigsPage = lazy(() => import('./pages/ModelConfigs')) const ModelConfigsPage = lazy(() => import('./pages/ModelConfigs'))
const IntelligentEvalsPage = lazy(() => import('./pages/IntelligentEvals'))
function PageLoader({ children }: { children: ReactNode }) { function PageLoader({ children }: { children: ReactNode }) {
return ( return (
@ -55,24 +60,60 @@ interface RouteConfig {
const routeConfigs: RouteConfig[] = [ const routeConfigs: RouteConfig[] = [
{ path: '/', name: '仪表盘', icon: <DashboardOutlined />, component: () => <PageLoader><HomePage /></PageLoader> }, { path: '/', name: '仪表盘', icon: <DashboardOutlined />, component: () => <PageLoader><HomePage /></PageLoader> },
{ path: '/openclaw', name: 'AI 助手', icon: <RobotOutlined />, component: () => <PageLoader><OpenClawPage /></PageLoader> },
{ path: '/targets', name: '评测对象', icon: <AimOutlined />, component: () => <PageLoader><TargetsPage /></PageLoader> }, { path: '/targets', name: '评测对象', icon: <AimOutlined />, component: () => <PageLoader><TargetsPage /></PageLoader> },
{ path: '/models', name: '模型配置', icon: <CloudServerOutlined />, component: () => <PageLoader><ModelConfigsPage /></PageLoader> },
{ path: '/scenarios', name: '评测场景', icon: <FileTextOutlined />, component: () => <PageLoader><ScenariosPage /></PageLoader> }, { path: '/scenarios', name: '评测场景', icon: <FileTextOutlined />, component: () => <PageLoader><ScenariosPage /></PageLoader> },
{ path: '/runs', name: '评测执行', icon: <PlayCircleOutlined />, component: () => <PageLoader><RunsPage /></PageLoader> }, { path: '/runs', name: '评测执行', icon: <PlayCircleOutlined />, component: () => <PageLoader><RunsPage /></PageLoader> },
{ path: '/campaigns', name: '评估活动', icon: <ScheduleOutlined />, component: () => <PageLoader><CampaignsPage /></PageLoader> }, { path: '/campaigns', name: '评估活动', icon: <ScheduleOutlined />, component: () => <PageLoader><CampaignsPage /></PageLoader> },
{ path: '/reports', name: '评测报告', icon: <BarChartOutlined />, component: () => <PageLoader><ReportsPage /></PageLoader> }, { path: '/reports', name: '评测报告', icon: <BarChartOutlined />, component: () => <PageLoader><ReportsPage /></PageLoader> },
{ path: '/openclaw', name: 'AI 助手', icon: <RobotOutlined />, component: () => <PageLoader><OpenClawPage /></PageLoader> }, { path: '/intelligent-evals', name: '智能评估', icon: <BulbOutlined />, component: () => <PageLoader><IntelligentEvalsPage /></PageLoader> },
{ path: '/models', name: '模型配置', icon: <CloudServerOutlined />, component: () => <PageLoader><ModelConfigsPage /></PageLoader> },
{ path: '/files', name: '原始文件', icon: <FolderOpenOutlined />, component: () => <PageLoader><FilesPage /></PageLoader> }, { path: '/files', name: '原始文件', icon: <FolderOpenOutlined />, component: () => <PageLoader><FilesPage /></PageLoader> },
] ]
const componentMap: Record<string, () => ReactNode> = {} const componentMap: Record<string, () => ReactNode> = {}
routeConfigs.forEach((r) => { componentMap[r.path] = r.component }) routeConfigs.forEach((r) => { componentMap[r.path] = r.component })
const menuItems: MenuProps['items'] = routeConfigs.map((r) => ({ const menuItems: MenuProps['items'] = [
key: r.path, { key: '/', icon: <DashboardOutlined />, label: '仪表盘' },
icon: r.icon, { key: '/openclaw', icon: <RobotOutlined />, label: 'AI 助手' },
label: r.name, { key: '/targets', icon: <AimOutlined />, label: '评测对象' },
})) {
key: 'group-static',
icon: <ExperimentOutlined />,
label: '静态评估',
children: [
{ key: '/scenarios', icon: <FileTextOutlined />, label: '评测场景' },
{ key: '/runs', icon: <PlayCircleOutlined />, label: '评测执行' },
{ key: '/campaigns', icon: <ScheduleOutlined />, label: '评估活动' },
{ key: '/reports', icon: <BarChartOutlined />, label: '评测报告' },
],
},
{
key: 'group-intelligent',
icon: <BulbOutlined />,
label: '智能评估',
children: [
{ key: '/intelligent-evals', icon: <BulbOutlined />, label: '评估列表' },
],
},
{
key: 'group-config',
icon: <SettingOutlined />,
label: '配置中心',
children: [
{ key: '/models', icon: <CloudServerOutlined />, label: '模型配置' },
],
},
{
key: 'group-system',
icon: <ToolOutlined />,
label: '系统',
children: [
{ key: '/files', icon: <FolderOpenOutlined />, label: '原始文件' },
],
},
]
type AuthState = 'checking' | 'login' | 'ready' type AuthState = 'checking' | 'login' | 'ready'
@ -182,6 +223,7 @@ function App() {
theme="dark" theme="dark"
mode="inline" mode="inline"
selectedKeys={[activeKey]} selectedKeys={[activeKey]}
defaultOpenKeys={['group-static', 'group-intelligent', 'group-config', 'group-system']}
items={menuItems} items={menuItems}
onClick={handleMenuClick} onClick={handleMenuClick}
style={{ style={{

View File

@ -39,6 +39,16 @@ body {
.ant-menu-dark .ant-menu-item:hover { .ant-menu-dark .ant-menu-item:hover {
background-color: rgba(255, 255, 255, 0.08) !important; background-color: rgba(255, 255, 255, 0.08) !important;
} }
/* 二级菜单展开背景:与侧边栏 #1e2030 协调,用微暗叠加制造层次而非跳色 */
.ant-menu-dark .ant-menu-sub {
background: rgba(0, 0, 0, 0.15) !important;
}
.ant-menu-dark .ant-menu-submenu-title:hover {
background-color: rgba(255, 255, 255, 0.08) !important;
}
.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title {
color: rgba(255, 255, 255, 0.9) !important;
}
/* editable-card Tabs 默认有 4px paddingTop导致 TabBar 顶部出现空隙 */ /* editable-card Tabs 默认有 4px paddingTop导致 TabBar 顶部出现空隙 */
.ant-tabs-editable-card > .ant-tabs-nav { .ant-tabs-editable-card > .ant-tabs-nav {

View File

@ -0,0 +1,14 @@
import { Result } from 'antd'
import { BulbOutlined } from '@ant-design/icons'
export default function IntelligentEvalsPage() {
return (
<div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<Result
icon={<BulbOutlined style={{ color: '#8c8c8c' }} />}
title="智能评估"
subTitle="OpenClaw 驱动的独立评测体系(开发中)"
/>
</div>
)
}