feat(frontend): restructure admin menu into two-level groups and add intelligent-eval entry
Some checks failed
CI / test (push) Failing after 50s
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:
parent
1317552701
commit
da6ccc265d
@ -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={{
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
14
frontend/web/src/pages/IntelligentEvals.tsx
Normal file
14
frontend/web/src/pages/IntelligentEvals.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user