+ {crumbs.length > 0 && (
+ ({
+ title: c.path ? {c.title} : c.title,
+ }))}
+ />
+ )}
+
+ )
+}
diff --git a/web/src/config/demoAccounts.ts b/web/src/config/demoAccounts.ts
new file mode 100644
index 0000000..89223e7
--- /dev/null
+++ b/web/src/config/demoAccounts.ts
@@ -0,0 +1,48 @@
+export type DemoAccount = {
+ key: string
+ label: string
+ description: string
+ actorId: string
+ tokenType: 'customer' | 'staff'
+ defaultRoute: string
+ roleLabel: string
+}
+
+export const DEMO_ACCOUNTS: DemoAccount[] = [
+ {
+ key: 'customer',
+ label: '客户 Demo',
+ description: 'CUST-9527 · 客户财富线',
+ actorId: 'CUST-9527',
+ tokenType: 'customer',
+ defaultRoute: '#/app/customer/home',
+ roleLabel: '客户',
+ },
+ {
+ key: 'advisor',
+ label: '理财师 Demo',
+ description: 'STAFF-10086 · 代理人助手',
+ actorId: 'STAFF-10086',
+ tokenType: 'staff',
+ defaultRoute: '#/app/advisor/customers',
+ roleLabel: '理财师',
+ },
+ {
+ key: 'analyst',
+ label: '分析员 Demo',
+ description: 'STAFF-20001 · 数据分析',
+ actorId: 'STAFF-20001',
+ tokenType: 'staff',
+ defaultRoute: '#/app/analytics/query',
+ roleLabel: '分析员',
+ },
+ {
+ key: 'risk',
+ label: '风控专员 Demo',
+ description: 'STAFF-30001 · 风控监测',
+ actorId: 'STAFF-30001',
+ tokenType: 'staff',
+ defaultRoute: '#/app/risk/alerts',
+ roleLabel: '风控',
+ },
+]
diff --git a/web/src/index.css b/web/src/index.css
new file mode 100644
index 0000000..5fb3313
--- /dev/null
+++ b/web/src/index.css
@@ -0,0 +1,111 @@
+:root {
+ --text: #6b6375;
+ --text-h: #08060d;
+ --bg: #fff;
+ --border: #e5e4e7;
+ --code-bg: #f4f3ec;
+ --accent: #aa3bff;
+ --accent-bg: rgba(170, 59, 255, 0.1);
+ --accent-border: rgba(170, 59, 255, 0.5);
+ --social-bg: rgba(244, 243, 236, 0.5);
+ --shadow:
+ rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+
+ --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
+ --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
+ --mono: ui-monospace, Consolas, monospace;
+
+ font: 18px/145% var(--sans);
+ letter-spacing: 0.18px;
+ color-scheme: light dark;
+ color: var(--text);
+ background: var(--bg);
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+ @media (max-width: 1024px) {
+ font-size: 16px;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --text: #9ca3af;
+ --text-h: #f3f4f6;
+ --bg: #16171d;
+ --border: #2e303a;
+ --code-bg: #1f2028;
+ --accent: #c084fc;
+ --accent-bg: rgba(192, 132, 252, 0.15);
+ --accent-border: rgba(192, 132, 252, 0.5);
+ --social-bg: rgba(47, 48, 58, 0.5);
+ --shadow:
+ rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
+ }
+
+ #social .button-icon {
+ filter: invert(1) brightness(2);
+ }
+}
+
+#root {
+ width: 1126px;
+ max-width: 100%;
+ margin: 0 auto;
+ text-align: center;
+ border-inline: 1px solid var(--border);
+ min-height: 100svh;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+}
+
+h1,
+h2 {
+ font-family: var(--heading);
+ font-weight: 500;
+ color: var(--text-h);
+}
+
+h1 {
+ font-size: 56px;
+ letter-spacing: -1.68px;
+ margin: 32px 0;
+ @media (max-width: 1024px) {
+ font-size: 36px;
+ margin: 20px 0;
+ }
+}
+h2 {
+ font-size: 24px;
+ line-height: 118%;
+ letter-spacing: -0.24px;
+ margin: 0 0 8px;
+ @media (max-width: 1024px) {
+ font-size: 20px;
+ }
+}
+p {
+ margin: 0;
+}
+
+code,
+.counter {
+ font-family: var(--mono);
+ display: inline-flex;
+ border-radius: 4px;
+ color: var(--text-h);
+}
+
+code {
+ font-size: 15px;
+ line-height: 135%;
+ padding: 4px 8px;
+ background: var(--code-bg);
+}
diff --git a/web/src/layouts/AppLayout.tsx b/web/src/layouts/AppLayout.tsx
new file mode 100644
index 0000000..e7f6bc6
--- /dev/null
+++ b/web/src/layouts/AppLayout.tsx
@@ -0,0 +1,106 @@
+import {
+ Layout,
+ Menu,
+ Button,
+ Space,
+ Tag,
+ Typography,
+ theme,
+} from 'antd'
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
+import { useMemo, useState } from 'react'
+import { Outlet, useLocation, useNavigate } from 'react-router-dom'
+import { clearAuth, loadAuth, type AuthState } from '../stores/authStore'
+import { buildMenuGroups, flattenMenuPaths, toAntdMenuItems } from '../routes/menus'
+
+const { Header, Sider, Content } = Layout
+
+type AppLayoutProps = {
+ auth: AuthState
+}
+
+export function AppLayout({ auth }: AppLayoutProps) {
+ const [collapsed, setCollapsed] = useState(false)
+ const navigate = useNavigate()
+ const location = useLocation()
+ const { token } = theme.useToken()
+
+ const menuGroups = useMemo(() => buildMenuGroups(auth.roleLabel), [auth.roleLabel])
+ const menuItems = useMemo(() => toAntdMenuItems(menuGroups), [menuGroups])
+ const allowedPaths = useMemo(() => flattenMenuPaths(menuGroups), [menuGroups])
+
+ const selectedKey =
+ allowedPaths.find((p) => location.pathname.startsWith(p)) ?? location.pathname
+
+ const onMenuClick = ({ key }: { key: string }) => {
+ navigate(key)
+ }
+
+ const logout = () => {
+ clearAuth()
+ navigate('/login')
+ }
+
+ return (
+
+
+ {title}
+
+ {extra}
+
+ {alert}
+ {children}
+
+ 
+ {!collapsed && (
+
+ JinRong
+
+ )}
+
+
+
+ {!collapsed && (
+
+
+ )
+}
diff --git a/web/src/routes/menus.tsx b/web/src/routes/menus.tsx
new file mode 100644
index 0000000..47caa69
--- /dev/null
+++ b/web/src/routes/menus.tsx
@@ -0,0 +1,127 @@
+import {
+ AlertOutlined,
+ BarChartOutlined,
+ CommentOutlined,
+ HomeOutlined,
+ LineChartOutlined,
+ TeamOutlined,
+ UserOutlined,
+ WalletOutlined,
+} from '@ant-design/icons'
+import type { MenuProps } from 'antd'
+import type { ReactNode } from 'react'
+
+export type RouteMenuLeaf = {
+ key: string
+ label: string
+ icon: ReactNode
+ path: string
+}
+
+export type RouteMenuGroup = {
+ type: 'group'
+ label: string
+ children: RouteMenuLeaf[]
+}
+
+const sharedPlatform: RouteMenuLeaf[] = [
+ { key: '/app/market', icon:
+
+
+
+
+
+ 
+
+ 稳重金融工作台风格 · 平台读 API 真接 · Agent 能力逐步接入
+
+
+
+
+
+ JinRong 智能管家
+
+ 四 Agent · 代销平台 · 演示环境
+
+
+
+
+
+ {DEMO_ACCOUNTS.map((acc) => (
+
+ ))}
+
+
+ Mock JWT · 联调本机 FastAPI :8000 · 仅供开发演示
+
+
+
+