From da6ccc265d0ae1e829679bc83b2fa6dcdd677029 Mon Sep 17 00:00:00 2001
From: sinohqb <huangqiaobin2012@gmail.com>
Date: Wed, 5 Aug 2026 03:27:48 +0800
Subject: [PATCH] feat(frontend): restructure admin menu into two-level groups
 and add intelligent-eval entry
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 frontend/web/src/App.tsx                    | 56 ++++++++++++++++++---
 frontend/web/src/index.css                  | 10 ++++
 frontend/web/src/pages/IntelligentEvals.tsx | 14 ++++++
 3 files changed, 73 insertions(+), 7 deletions(-)
 create mode 100644 frontend/web/src/pages/IntelligentEvals.tsx

diff --git a/frontend/web/src/App.tsx b/frontend/web/src/App.tsx
index ece73e2..838146e 100644
--- a/frontend/web/src/App.tsx
+++ b/frontend/web/src/App.tsx
@@ -13,6 +13,10 @@ import {
   CloudServerOutlined,
   ScheduleOutlined,
   LogoutOutlined,
+  BulbOutlined,
+  ExperimentOutlined,
+  SettingOutlined,
+  ToolOutlined,
 } from '@ant-design/icons'
 import TabBar from './components/TabBar'
 import LoginPage from './pages/Login'
@@ -33,6 +37,7 @@ const CampaignsPage = lazy(() => import('./pages/Campaigns'))
 const OpenClawPage = lazy(() => import('./pages/OpenClaw'))
 const FilesPage = lazy(() => import('./pages/Files'))
 const ModelConfigsPage = lazy(() => import('./pages/ModelConfigs'))
+const IntelligentEvalsPage = lazy(() => import('./pages/IntelligentEvals'))
 
 function PageLoader({ children }: { children: ReactNode }) {
   return (
@@ -55,24 +60,60 @@ interface RouteConfig {
 
 const routeConfigs: RouteConfig[] = [
   { 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: '/models', name: '模型配置', icon: <CloudServerOutlined />, component: () => <PageLoader><ModelConfigsPage /></PageLoader> },
   { path: '/scenarios', name: '评测场景', icon: <FileTextOutlined />, component: () => <PageLoader><ScenariosPage /></PageLoader> },
   { path: '/runs', name: '评测执行', icon: <PlayCircleOutlined />, component: () => <PageLoader><RunsPage /></PageLoader> },
   { path: '/campaigns', name: '评估活动', icon: <ScheduleOutlined />, component: () => <PageLoader><CampaignsPage /></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> },
 ]
 
 const componentMap: Record<string, () => ReactNode> = {}
 routeConfigs.forEach((r) => { componentMap[r.path] = r.component })
 
-const menuItems: MenuProps['items'] = routeConfigs.map((r) => ({
-  key: r.path,
-  icon: r.icon,
-  label: r.name,
-}))
+const menuItems: MenuProps['items'] = [
+  { key: '/', icon: <DashboardOutlined />, label: '仪表盘' },
+  { key: '/openclaw', icon: <RobotOutlined />, label: 'AI 助手' },
+  { 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'
 
@@ -182,6 +223,7 @@ function App() {
           theme="dark"
           mode="inline"
           selectedKeys={[activeKey]}
+          defaultOpenKeys={['group-static', 'group-intelligent', 'group-config', 'group-system']}
           items={menuItems}
           onClick={handleMenuClick}
           style={{
diff --git a/frontend/web/src/index.css b/frontend/web/src/index.css
index 5acfb5c..9e03a68 100644
--- a/frontend/web/src/index.css
+++ b/frontend/web/src/index.css
@@ -39,6 +39,16 @@ body {
 .ant-menu-dark .ant-menu-item:hover {
   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 顶部出现空隙 */
 .ant-tabs-editable-card > .ant-tabs-nav {
diff --git a/frontend/web/src/pages/IntelligentEvals.tsx b/frontend/web/src/pages/IntelligentEvals.tsx
new file mode 100644
index 0000000..360d919
--- /dev/null
+++ b/frontend/web/src/pages/IntelligentEvals.tsx
@@ -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>
+  )
+}