From 857a21910bf89d6b9913dd0d11d5c26ff5ab4aa6 Mon Sep 17 00:00:00 2001 From: shangfangjian Date: Mon, 21 Sep 2026 01:01:01 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=9B=BE=E6=A0=87?= =?UTF-8?q?=E7=BB=9F=E4=B8=80=E4=B8=BA=E7=BA=BF=E6=9D=A1SVG=20+=20hover?= =?UTF-8?q?=E5=93=81=E7=89=8C=E8=89=B2=E8=BF=87=E6=B8=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 Icon 组件:8种线条风格 SVG 图标(collection/chart/target/repeat等) - 统一 stroke-width:1.5,hover 加粗到 2 - hover 时颜色平滑过渡到品牌色(press red) - 添加 .nav-icon 和 .nav-icon-wrap CSS 类 - 活跃/悬停态:opacity 0.5→1,stroke-width 1.5→2 Co-Authored-By: new-provider/LongCat-2.0 <> --- frontend/src/admin/AdminLayout.tsx | 109 ++++++++++++++++++++++++----- frontend/src/index.css | 16 +++++ 2 files changed, 107 insertions(+), 18 deletions(-) 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.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 后台 ──