diff --git a/frontend/src/admin/AdminLayout.tsx b/frontend/src/admin/AdminLayout.tsx
index f7db131..3f4856c 100644
--- a/frontend/src/admin/AdminLayout.tsx
+++ b/frontend/src/admin/AdminLayout.tsx
@@ -12,6 +12,82 @@ import { fetchHealth } from './dal'
import Login from './Login'
import { useCommandPalette, CommandPalette } from './useCommandPalette'
+// 线条风格 SVG 图标组件
+function Icon({ name }: { name: string }) {
+ const common = 'nav-icon'
+ switch (name) {
+ case 'collection':
+ return (
+
+ )
+ case 'chart':
+ return (
+
+ )
+ case 'target':
+ return (
+
+ )
+ case 'repeat':
+ return (
+
+ )
+ case 'eval':
+ return (
+
+ )
+ case 'monitor':
+ return (
+
+ )
+ case 'settings':
+ return (
+
+ )
+ case 'logs':
+ return (
+
+ )
+ default:
+ return null
+ }
+}
+
const NAV_PAGES: Array<{ to: string; label: string; group: string }> = [
{ to: '/admin', label: '仪表盘', group: '概览' },
{ to: '/admin/collection', label: '数据采集', group: '数据流水线' },
@@ -37,29 +113,28 @@ const ROUTE_LABELS: Record = {
'/admin/eval': '评估',
}
-const NAV_SECTIONS: { title: string; items: { to: string; label: string; icon: string; end?: boolean }[] }[] = [
+const NAV_SECTIONS: { title: string; items: Array<{ to: string; label: string; icon: string }> }[] = [
{
title: '数据流水线',
items: [
- { to: '/admin/collection', label: '数据采集', icon: '◈' },
- { to: '/admin/data-completeness', label: '数据完整性', icon: '◫' },
- { to: '/admin/predictions', label: '预测管理', icon: '◆' },
- { to: '/admin/backtest', label: '回测', icon: '◉' },
+ { to: '/admin/collection', label: '数据采集', icon: 'collection' },
+ { to: '/admin/data-completeness', label: '数据完整性', icon: 'chart' },
+ { to: '/admin/predictions', label: '预测管理', icon: 'target' },
+ { to: '/admin/backtest', label: '回测', icon: 'repeat' },
],
},
{
title: '评估与监控',
items: [
- { to: '/admin/eval', label: '评估', icon: '◈' },
- { to: '/admin/monitoring', label: '监控', icon: '◐' },
- { to: '/admin/logs', label: '日志', icon: '▤' },
+ { to: '/admin/eval', label: '评估', icon: 'eval' },
+ { to: '/admin/monitoring', label: '监控', icon: 'monitor' },
],
},
{
title: '系统设置',
items: [
- { to: '/admin/settings', label: '设置', icon: '◑' },
- { to: '/admin/logs', label: '日志', icon: '▤' },
+ { to: '/admin/settings', label: '设置', icon: 'settings' },
+ { to: '/admin/logs', label: '日志', icon: 'logs' },
],
},
]
@@ -227,14 +302,14 @@ export default function AdminLayout() {
to="/admin"
end
className={({ isActive }) =>
- `flex min-h-[40px] items-center gap-2.5 border-l-4 px-3 text-sm transition-all duration-300 ${
+ `nav-icon-wrap flex min-h-[40px] items-center gap-2.5 border-l-4 px-3 text-sm transition-all duration-300 ${
isActive
- ? 'border-press bg-press-wash/60 font-medium text-press'
+ ? 'border-press bg-press-wash/60 font-medium text-press active'
: 'border-transparent text-ink-500 hover:bg-paper-100 hover:text-ink-900'
}`
}
>
- ◇
+
仪表盘
@@ -249,16 +324,14 @@ export default function AdminLayout() {
- `flex min-h-[40px] items-center gap-2.5 border-l-4 px-3 pb-1 text-sm transition-all duration-300 ${
+ `nav-icon-wrap flex min-h-[40px] items-center gap-2.5 border-l-4 px-3 text-sm transition-all duration-300 ${
isActive
- ? 'border-press bg-press-wash/60 font-medium text-press nav-tab-active'
+ ? 'border-press bg-press-wash/60 font-medium text-press active'
: 'border-transparent text-ink-500 hover:bg-paper-100 hover:text-ink-900'
}`
}
>
-
- {item.icon}
-
+
{item.label}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 9ac347c..3f13dfa 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -157,6 +157,22 @@
.skeleton {
@apply animate-pulse rounded-none bg-ink-200;
}
+
+ /* ── 侧边栏图标:统一样式 + hover过渡到品牌色 ── */
+ .nav-icon {
+ width: 1.125rem;
+ height: 1.125rem;
+ stroke-width: 1.5;
+ flex-shrink: 0;
+ opacity: 0.5;
+ transition: all 0.2s ease;
+ }
+ .nav-icon-wrap:hover .nav-icon,
+ .nav-icon-wrap.active .nav-icon {
+ opacity: 1;
+ color: #9E1B1B;
+ stroke-width: 2;
+ }
}
/* ── Admin 后台 ──