From ff37553e62d6db33450dd6303e70f40ab398b7ba Mon Sep 17 00:00:00 2001
From: lpm <lpm0698@163.com>
Date: Mon, 14 Sep 2026 19:00:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=89=8D=E7=AB=AF=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |   5 +
 frontend/app/admin/administrator/page.tsx     |   5 +
 frontend/app/admin/advisor/page.tsx           |   7 +-
 frontend/app/admin/advisor/tools/page.tsx     |  26 -
 frontend/app/admin/common/page.tsx            |   7 +-
 frontend/app/admin/risk/page.tsx              |   7 +-
 frontend/app/page.tsx                         |   3 +-
 frontend/app/products/page.tsx                |  77 ++-
 frontend/app/tools/knowledge/page.tsx         |   6 +-
 frontend/app/tools/nl2sql/page.tsx            |   7 +-
 frontend/components/admin/sections/admin.tsx  |  70 +++
 .../components/admin/sections/customers.tsx   | 466 +++++++++++++++++
 frontend/components/admin/sections/drafts.tsx | 199 ++++++++
 frontend/components/admin/sections/funds.tsx  | 152 ++++++
 .../components/admin/sections/overview.tsx    | 318 ++++++++++++
 frontend/components/admin/sections/risk.tsx   | 278 ++++++++++
 frontend/components/admin/sections/todos.tsx  | 179 +++++++
 frontend/components/admin/sections/visits.tsx | 229 +++++++++
 .../components/admin/sections/workorders.tsx  | 282 +++++++++++
 frontend/components/admin/shell.tsx           | 274 ++++++++++
 frontend/components/admin/ui.tsx              | 479 ++++++++++++++++++
 .../components/admin/unified-workspace.tsx    | 212 ++++++++
 frontend/components/agent-mount.tsx           |  12 +-
 frontend/components/role-workspaces.tsx       |  46 --
 frontend/lib/admin-api.ts                     | 266 ++++++++++
 frontend/lib/auth.ts                          |  43 +-
 frontend/lib/risk.ts                          |  18 +
 frontend/lib/roles.ts                         |  90 ++++
 frontend/next-env.d.ts                        |   4 +-
 sql/schema.sql                                |   4 +-
 30 files changed, 3635 insertions(+), 136 deletions(-)
 create mode 100644 frontend/app/admin/administrator/page.tsx
 delete mode 100644 frontend/app/admin/advisor/tools/page.tsx
 create mode 100644 frontend/components/admin/sections/admin.tsx
 create mode 100644 frontend/components/admin/sections/customers.tsx
 create mode 100644 frontend/components/admin/sections/drafts.tsx
 create mode 100644 frontend/components/admin/sections/funds.tsx
 create mode 100644 frontend/components/admin/sections/overview.tsx
 create mode 100644 frontend/components/admin/sections/risk.tsx
 create mode 100644 frontend/components/admin/sections/todos.tsx
 create mode 100644 frontend/components/admin/sections/visits.tsx
 create mode 100644 frontend/components/admin/sections/workorders.tsx
 create mode 100644 frontend/components/admin/shell.tsx
 create mode 100644 frontend/components/admin/ui.tsx
 create mode 100644 frontend/components/admin/unified-workspace.tsx
 delete mode 100644 frontend/components/role-workspaces.tsx
 create mode 100644 frontend/lib/admin-api.ts
 create mode 100644 frontend/lib/risk.ts
 create mode 100644 frontend/lib/roles.ts

diff --git a/.gitignore b/.gitignore
index 5f822aa..67aeed5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -85,3 +85,8 @@ DK2_客服Agent模块完整开发计划（v1.1）.md
 DK4_客服Agent需求文档（修复完善版v1.4）.md
 客服Agent模块 · TODO List（最终修复版v1.2）.md
 客服Agent长期记忆与置信度最终开发文档.md
+开发计划.md
+开发计划-前端.md
+开发计划_用户画像置信度实时更新.md
+需求文档.md
+风控Agent需求文档.md
\ No newline at end of file
diff --git a/frontend/app/admin/administrator/page.tsx b/frontend/app/admin/administrator/page.tsx
new file mode 100644
index 0000000..7030cb9
--- /dev/null
+++ b/frontend/app/admin/administrator/page.tsx
@@ -0,0 +1,5 @@
+import { UnifiedWorkspace } from "@/components/admin/unified-workspace";
+
+export default function AdministratorPage() {
+  return <UnifiedWorkspace defaultSection="admin" />;
+}
diff --git a/frontend/app/admin/advisor/page.tsx b/frontend/app/admin/advisor/page.tsx
index 200eb60..414dd09 100644
--- a/frontend/app/admin/advisor/page.tsx
+++ b/frontend/app/admin/advisor/page.tsx
@@ -1,2 +1,5 @@
-import { AdvisorWorkspace } from "@/components/role-workspaces";
-export default function AdvisorPage() { return <AdvisorWorkspace />; }
+import { UnifiedWorkspace } from "@/components/admin/unified-workspace";
+
+export default function AdvisorPage() {
+  return <UnifiedWorkspace defaultSection="customers" />;
+}
diff --git a/frontend/app/admin/advisor/tools/page.tsx b/frontend/app/admin/advisor/tools/page.tsx
deleted file mode 100644
index 5a58f8f..0000000
--- a/frontend/app/admin/advisor/tools/page.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { ArrowLeft, Download, RefreshCw, Save, Send, Trash2 } from "lucide-react";
-import { FormEvent, useEffect, useState } from "react";
-import { apiFetch } from "@/lib/api";
-
-interface Customer { customer_id?: number; id?: number; real_name?: string; name?: string; }
-interface Draft { draft_id?: string; id?: string; title?: string; content?: string; status?: string; customer_id?: number; }
-interface Visit { id: number; customer_id: number; visit_type?: string; visit_time?: string; summary?: string; content?: string; }
-
-export default function AdvisorToolsPage() {
-  const [customers, setCustomers] = useState<Customer[]>([]); const [customerId, setCustomerId] = useState(""); const [section, setSection] = useState("detail"); const [data, setData] = useState<unknown>(null); const [message, setMessage] = useState("");
-  const [drafts, setDrafts] = useState<Draft[]>([]); const [draftId, setDraftId] = useState(""); const [draftTitle, setDraftTitle] = useState(""); const [draftContent, setDraftContent] = useState("");
-  const [visits, setVisits] = useState<Visit[]>([]); const [visitId, setVisitId] = useState<number | null>(null); const [visitType, setVisitType] = useState("电话回访"); const [visitTime, setVisitTime] = useState(""); const [visitSummary, setVisitSummary] = useState("");
-  useEffect(() => { void apiFetch<{ items?: Customer[] }>("/advisor/customers?page=1&page_size=100").then((result) => { setCustomers(result.items ?? []); const first = result.items?.[0]; if (first) setCustomerId(String(first.customer_id ?? first.id)); }).catch(() => setMessage("客户列表加载失败")); }, []);
-  async function load() { setMessage(""); try { const id = Number(customerId); const paths: Record<string, string> = { detail: `/advisor/customers/${id}`, holdings: `/advisor/customers/${id}/holdings`, reports: `/advisor/customers/${id}/reports`, diagnosis: `/advisor/diagnosis/${id}`, strategies: "/advisor/strategies", funds: "/advisor/funds", audit: "/advisor/audit/ledger" }; if (section === "drafts") { const result = await apiFetch<{ items?: Draft[] }>(`/advisor/drafts?page=1&page_size=50${customerId ? `&customer_id=${id}` : ""}`); setDrafts(result.items ?? []); setData(result); return; } if (section === "visits") { const result = await apiFetch<{ items?: Visit[] }>(`/advisor/visits?page=1&page_size=50${customerId ? `&customer_id=${id}` : ""}`); setVisits(result.items ?? []); setData(result); return; } setData(await apiFetch(paths[section])); } catch (error) { setMessage(error instanceof Error ? error.message : "加载失败"); } }
-  function chooseDraft(draft: Draft) { const id = String(draft.draft_id ?? draft.id ?? ""); setDraftId(id); setDraftTitle(draft.title ?? ""); setDraftContent(draft.content ?? ""); }
-  async function draftAction(action: "save" | "discard" | "send") { if (!draftId) return; try { if (action === "save") await apiFetch(`/advisor/drafts/${draftId}/save`, { method: "PUT", body: JSON.stringify({ title: draftTitle, content: draftContent }) }); else await apiFetch(`/advisor/drafts/${draftId}/${action}`, { method: "POST" }); setMessage(action === "save" ? "草稿已保存" : action === "discard" ? "草稿已废弃" : "草稿已发送"); await load(); } catch (error) { setMessage(error instanceof Error ? error.message : "草稿操作失败"); } }
-  async function saveVisit(event: FormEvent) { event.preventDefault(); try { const body = { customer_id: Number(customerId), visit_type: visitType, visit_time: new Date(visitTime).toISOString(), summary: visitSummary }; if (visitId) await apiFetch(`/advisor/visits/${visitId}`, { method: "PUT", body: JSON.stringify(body) }); else await apiFetch("/advisor/visits", { method: "POST", body: JSON.stringify(body) }); setMessage(visitId ? "回访已更新" : "回访已新增"); setVisitId(null); setVisitSummary(""); await load(); } catch (error) { setMessage(error instanceof Error ? error.message : "回访保存失败"); } }
-  return <main className="min-h-screen bg-slate-50 px-10 py-10"><div className="mx-auto max-w-7xl"><Link href="/admin/advisor" className="inline-flex items-center gap-2 text-sm text-slate-500"><ArrowLeft className="h-4 w-4" />返回投顾工作区</Link><h1 className="mt-8 text-3xl font-semibold text-[var(--brand-navy)]">投顾业务工具</h1><div className="mt-6 flex flex-wrap gap-3 rounded-xl border border-slate-200 bg-white p-5"><select value={customerId} onChange={(event) => setCustomerId(event.target.value)} className="rounded-lg border border-slate-200 px-3 py-2 text-sm"><option value="">选择客户</option>{customers.map((item) => { const id = item.customer_id ?? item.id; return <option key={id} value={id}>{item.real_name ?? item.name ?? `客户 #${id}`}</option>; })}</select><select value={section} onChange={(event) => setSection(event.target.value)} className="rounded-lg border border-slate-200 px-3 py-2 text-sm">{[["detail", "客户详情"], ["holdings", "客户持仓"], ["reports", "历史报告"], ["diagnosis", "持仓诊断"], ["strategies", "标准策略"], ["funds", "白名单基金"], ["drafts", "投顾草稿"], ["visits", "回访记录"], ["audit", "审计台账"]].map(([value, label]) => <option key={value} value={value}>{label}</option>)}</select><button onClick={() => void load()} disabled={!customerId && ["detail", "holdings", "reports", "diagnosis", "visits"].includes(section)} className="flex items-center gap-2 rounded-lg bg-[var(--brand-primary)] px-4 py-2 text-sm text-white"><RefreshCw className="h-4 w-4" />加载</button>{section === "audit" && <button onClick={() => window.open("/backend/advisor/audit/export", "_blank")} className="flex items-center gap-2 rounded-lg border px-4 py-2 text-sm"><Download className="h-4 w-4" />导出</button>}</div>{message && <p className="mt-4 rounded-lg bg-rose-50 p-4 text-sm text-rose-600">{message}</p>}
-      {section === "drafts" && <div className="mt-6 grid gap-6 lg:grid-cols-[.8fr_1.2fr]"><div className="rounded-xl border border-slate-200 bg-white p-5"><h2 className="font-semibold">草稿列表</h2><div className="mt-4 divide-y divide-slate-100">{drafts.map((draft) => <button key={draft.draft_id ?? draft.id} onClick={() => chooseDraft(draft)} className={`block w-full px-2 py-3 text-left text-sm ${String(draft.draft_id ?? draft.id) === draftId ? "bg-indigo-50 text-[var(--brand-primary)]" : "text-slate-600"}`}>{draft.title ?? "未命名草稿"}<small className="ml-2 text-slate-400">{draft.status ?? "草稿"}</small></button>)}{!drafts.length && <p className="py-6 text-sm text-slate-400">暂无草稿</p>}</div></div><div className="rounded-xl border border-slate-200 bg-white p-5"><input value={draftTitle} onChange={(event) => setDraftTitle(event.target.value)} placeholder="草稿标题" className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm" /><textarea value={draftContent} onChange={(event) => setDraftContent(event.target.value)} placeholder="草稿内容" className="mt-4 min-h-64 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm" /><div className="mt-4 flex gap-3"><button onClick={() => void draftAction("save")} disabled={!draftId} className="flex items-center gap-2 rounded-lg bg-[var(--brand-primary)] px-4 py-2 text-sm text-white disabled:opacity-50"><Save className="h-4 w-4" />保存</button><button onClick={() => void draftAction("send")} disabled={!draftId} className="flex items-center gap-2 rounded-lg border px-4 py-2 text-sm disabled:opacity-50"><Send className="h-4 w-4" />发送</button><button onClick={() => void draftAction("discard")} disabled={!draftId} className="flex items-center gap-2 rounded-lg border px-4 py-2 text-sm text-rose-600 disabled:opacity-50"><Trash2 className="h-4 w-4" />废弃</button></div></div></div>}
-      {section === "visits" && <div className="mt-6 grid gap-6 lg:grid-cols-[1fr_1fr]"><form onSubmit={saveVisit} className="rounded-xl border border-slate-200 bg-white p-5"><h2 className="font-semibold">{visitId ? "编辑回访" : "新增回访"}</h2><label className="mt-4 block text-sm">回访类型<select value={visitType} onChange={(event) => setVisitType(event.target.value)} className="mt-2 w-full rounded-lg border border-slate-200 px-3 py-2"><option>电话回访</option><option>线上沟通</option><option>线下拜访</option></select></label><label className="mt-4 block text-sm">回访时间<input required type="datetime-local" value={visitTime} onChange={(event) => setVisitTime(event.target.value)} className="mt-2 w-full rounded-lg border border-slate-200 px-3 py-2" /></label><label className="mt-4 block text-sm">回访摘要<textarea value={visitSummary} onChange={(event) => setVisitSummary(event.target.value)} className="mt-2 min-h-32 w-full rounded-lg border border-slate-200 px-3 py-2" /></label><button className="mt-4 rounded-lg bg-[var(--brand-primary)] px-4 py-2 text-sm text-white">保存回访</button></form><div className="rounded-xl border border-slate-200 bg-white p-5"><h2 className="font-semibold">历史回访</h2>{visits.map((visit) => <button key={visit.id} onClick={() => { setVisitId(visit.id); setVisitType(visit.visit_type ?? "电话回访"); setVisitSummary(visit.summary ?? visit.content ?? ""); setVisitTime(visit.visit_time?.slice(0, 16) ?? ""); }} className="mt-3 block w-full rounded-lg bg-slate-50 p-3 text-left text-sm">客户 #{visit.customer_id} · {visit.visit_type ?? "回访"}<p className="mt-1 text-xs text-slate-500">{visit.summary ?? visit.content ?? "暂无摘要"}</p></button>)}{!visits.length && <p className="mt-5 text-sm text-slate-400">暂无回访记录</p>}</div></div>}
-      {!['drafts', 'visits'].includes(section) && <pre className="mt-6 min-h-96 overflow-auto rounded-xl border border-slate-200 bg-white p-6 text-xs text-slate-700">{data ? JSON.stringify(data, null, 2) : "选择模块后点击加载"}</pre>}
-    </div></main>;
-}
diff --git a/frontend/app/admin/common/page.tsx b/frontend/app/admin/common/page.tsx
index 5c2a240..b3118f5 100644
--- a/frontend/app/admin/common/page.tsx
+++ b/frontend/app/admin/common/page.tsx
@@ -1,2 +1,5 @@
-import { CommonWorkspace } from "@/components/role-workspaces";
-export default function CommonPage() { return <CommonWorkspace />; }
+import { UnifiedWorkspace } from "@/components/admin/unified-workspace";
+
+export default function CommonPage() {
+  return <UnifiedWorkspace defaultSection="overview" />;
+}
diff --git a/frontend/app/admin/risk/page.tsx b/frontend/app/admin/risk/page.tsx
index 312b962..06f4927 100644
--- a/frontend/app/admin/risk/page.tsx
+++ b/frontend/app/admin/risk/page.tsx
@@ -1,2 +1,5 @@
-import { RiskWorkspace } from "@/components/role-workspaces";
-export default function RiskPage() { return <RiskWorkspace />; }
+import { UnifiedWorkspace } from "@/components/admin/unified-workspace";
+
+export default function RiskPage() {
+  return <UnifiedWorkspace defaultSection="risk" />;
+}
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 07ca26b..58982b2 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -5,6 +5,7 @@ import { ArrowRight, BarChart3, Globe2, ShieldCheck, Sparkles, TrendingUp } from
 import { useEffect, useState } from "react";
 import { PublicHeader } from "@/components/public-header";
 import { apiFetch } from "@/lib/api";
+import { normalizeRiskLevel } from "@/lib/risk";
 import type { FundProduct, FundProductList } from "@/types/api";
 
 export default function HomePage() {
@@ -39,7 +40,7 @@ export default function HomePage() {
 
       <section id="services" className="bg-slate-50 py-28"><div className="mx-auto max-w-7xl px-8"><div className="max-w-2xl"><p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--brand-primary)]">Core Services</p><h2 className="mt-4 text-4xl font-semibold text-[var(--brand-navy)]">为每一种目标，<br />提供更合适的方案。</h2></div><div className="mt-14 grid gap-5 md:grid-cols-3"><div className="border-t-2 border-[var(--brand-primary)] pt-6"><TrendingUp className="h-6 w-6 text-[var(--brand-primary)]" /><h3 className="mt-8 text-xl font-semibold text-[var(--brand-navy)]">公募基金</h3><p className="mt-3 text-sm leading-7 text-slate-500">覆盖多种基金类型，帮助投资者按风险偏好和目标筛选产品。</p></div><div className="border-t-2 border-[var(--brand-gold)] pt-6"><ShieldCheck className="h-6 w-6 text-[var(--brand-gold)]" /><h3 className="mt-8 text-xl font-semibold text-[var(--brand-navy)]">风险管理</h3><p className="mt-3 text-sm leading-7 text-slate-500">通过风险测评和适当性服务，让投资选择建立在理解之上。</p></div><div className="border-t-2 border-[var(--brand-navy)] pt-6"><Sparkles className="h-6 w-6 text-[var(--brand-navy)]" /><h3 className="mt-8 text-xl font-semibold text-[var(--brand-navy)]">智能投顾</h3><p className="mt-3 text-sm leading-7 text-slate-500">用智能工具辅助信息理解和资产配置，服务每一段长期旅程。</p></div></div></div></section>
 
-      <section id="funds" className="mx-auto max-w-7xl px-8 py-28"><div className="flex flex-col justify-between gap-5 md:flex-row md:items-end"><div><p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--brand-primary)]">Fund Marketplace</p><h2 className="mt-4 text-4xl font-semibold text-[var(--brand-navy)]">从真实数据开始，<br />找到适合自己的基金。</h2></div><Link href="/products" className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--brand-primary)]">查看全部产品 <ArrowRight className="h-4 w-4" /></Link></div><div className="mt-12 grid gap-5 md:grid-cols-3">{fundState === "loading" && [1, 2, 3].map((item) => <div key={item} className="h-64 animate-pulse rounded-2xl bg-slate-100" />)}{fundState === "error" && <div className="rounded-2xl border border-amber-200 bg-amber-50 p-6 text-sm text-amber-800 md:col-span-3">基金数据暂时无法加载，请确认后端服务已启动后重试。</div>}{fundState === "ready" && products.map((product) => <Link href={`/products/${product.product_code}`} key={product.id} className="group rounded-2xl border border-slate-200 bg-white p-6 transition hover:-translate-y-1 hover:border-[var(--brand-primary)] hover:shadow-xl hover:shadow-slate-200/60"><div className="flex items-start justify-between gap-4"><span className="rounded-full bg-indigo-50 px-3 py-1 text-xs font-semibold text-[var(--brand-primary)]">{product.risk_level}</span><ArrowRight className="h-4 w-4 text-slate-300 transition group-hover:text-[var(--brand-primary)]" /></div><h3 className="mt-8 text-lg font-semibold text-[var(--brand-navy)]">{product.product_name}</h3><p className="mt-1 text-xs text-slate-400">{product.product_code} · {product.product_type}</p><div className="mt-8 flex items-end justify-between"><div><p className="text-xs text-slate-400">最新净值</p><p className="mt-1 text-2xl font-semibold text-[var(--brand-navy)]">{product.nav ?? "--"}</p></div><span className="text-xs text-slate-400">{product.nav_date ?? "暂无日期"}</span></div></Link>)}{fundState === "ready" && products.length === 0 && <div className="rounded-2xl border border-slate-200 p-8 text-sm text-slate-500 md:col-span-3">当前暂无可展示的基金产品。</div>}</div></section>
+      <section id="funds" className="mx-auto max-w-7xl px-8 py-28"><div className="flex flex-col justify-between gap-5 md:flex-row md:items-end"><div><p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--brand-primary)]">Fund Marketplace</p><h2 className="mt-4 text-4xl font-semibold text-[var(--brand-navy)]">从真实数据开始，<br />找到适合自己的基金。</h2></div><Link href="/products" className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--brand-primary)]">查看全部产品 <ArrowRight className="h-4 w-4" /></Link></div><div className="mt-12 overflow-hidden rounded-xl border border-slate-200">{fundState === "loading" && [1, 2, 3].map((item) => <div key={item} className="h-20 animate-pulse border-b border-slate-100 bg-slate-50" />)}{fundState === "error" && <div className="p-6 text-sm text-amber-800">基金数据暂时无法加载，请确认后端服务已启动后重试。</div>}{fundState === "ready" && products.map((product) => <Link href={`/products/${product.product_code}`} key={product.id} className="group flex items-center gap-6 border-b border-slate-100 bg-white px-6 py-5 last:border-b-0 hover:bg-slate-50"><div className="min-w-0 flex-1"><h3 className="truncate font-semibold text-[var(--brand-navy)] group-hover:text-[var(--brand-primary)]">{product.product_name}</h3><p className="mt-1 text-xs text-slate-400">{product.product_code} · {product.product_type}</p></div><span className="rounded-full bg-indigo-50 px-3 py-1 text-xs font-semibold text-[var(--brand-primary)]">{normalizeRiskLevel(product.risk_level)}</span><div className="w-28 text-right"><p className="text-xs text-slate-400">最新净值</p><p className="mt-1 font-semibold text-[var(--brand-navy)]">{product.nav ?? "--"}</p></div><span className="hidden w-24 text-right text-xs text-slate-400 sm:block">{product.nav_date ?? "暂无日期"}</span><ArrowRight className="h-4 w-4 shrink-0 text-slate-300 group-hover:text-[var(--brand-primary)]" /></Link>)}{fundState === "ready" && products.length === 0 && <div className="p-8 text-sm text-slate-500">当前暂无可展示的基金产品。</div>}</div></section>
 
       <section className="bg-[var(--brand-navy)] py-20 text-white"><div className="mx-auto flex max-w-7xl flex-col justify-between gap-8 px-8 md:flex-row md:items-center"><div><p className="text-sm font-semibold uppercase tracking-[0.22em] text-blue-200">Start With Clarity</p><h2 className="mt-3 text-3xl font-semibold">先了解自己，再做投资选择。</h2><p className="mt-3 max-w-xl text-sm leading-7 text-blue-100">基金投资有风险，投资者应根据自身风险承受能力选择适合的产品。过往业绩不代表未来表现。</p></div><Link href="/register" className="inline-flex shrink-0 items-center gap-2 rounded-lg bg-white px-5 py-3.5 text-sm font-semibold text-[var(--brand-navy)] transition hover:bg-blue-50">开启账户 <ArrowRight className="h-4 w-4" /></Link></div></section>
       <footer className="bg-white"><div className="mx-auto flex max-w-7xl flex-col gap-7 px-8 py-10 text-sm text-slate-500 md:flex-row md:items-center md:justify-between"><div><p className="font-semibold text-[var(--brand-navy)]">华夏基金</p><p className="mt-2 text-xs">让财富管理更智能、更普惠</p></div><div className="flex flex-wrap gap-5"><Link href="/login" className="hover:text-[var(--brand-primary)]">登录</Link><Link href="/register" className="hover:text-[var(--brand-primary)]">注册</Link><span>风险揭示</span></div></div></footer>
diff --git a/frontend/app/products/page.tsx b/frontend/app/products/page.tsx
index e750dac..5aeacc6 100644
--- a/frontend/app/products/page.tsx
+++ b/frontend/app/products/page.tsx
@@ -5,6 +5,7 @@ import { ArrowLeft, ArrowRight, Search } from "lucide-react";
 import { useEffect, useState } from "react";
 import { PublicHeader } from "@/components/public-header";
 import { apiFetch } from "@/lib/api";
+import { normalizeRiskLevel, RISK_LEVELS, riskLevelDescription } from "@/lib/risk";
 import type { FundProduct, FundProductList } from "@/types/api";
 
 export default function ProductsPage() {
@@ -14,20 +15,78 @@ export default function ProductsPage() {
   const [state, setState] = useState<"loading" | "ready" | "error">("loading");
 
   useEffect(() => {
-    const params = new URLSearchParams({ page: "1", page_size: "24" });
-    if (keyword.trim()) params.set("keyword", keyword.trim());
-    if (riskLevel) params.set("risk_level", riskLevel);
-    setState("loading");
-    apiFetch<FundProductList>(`/products?${params.toString()}`)
-      .then((data) => { setItems(data.items); setState("ready"); })
-      .catch(() => setState("error"));
+    let cancelled = false;
+
+    async function load() {
+      setState("loading");
+      try {
+        const params = new URLSearchParams({ page: "1", page_size: "24" });
+        if (keyword.trim()) params.set("keyword", keyword.trim());
+        if (riskLevel) params.set("risk_level", riskLevel);
+
+        let data = await apiFetch<FundProductList>(`/products?${params.toString()}`);
+        if (riskLevel && data.items.length === 0) {
+          const fallbackParams = new URLSearchParams({ page: "1", page_size: "100" });
+          if (keyword.trim()) fallbackParams.set("keyword", keyword.trim());
+          const fallback = await apiFetch<FundProductList>(`/products?${fallbackParams.toString()}`);
+          data = {
+            ...fallback,
+            items: fallback.items.filter((item) => normalizeRiskLevel(item.risk_level) === riskLevel).slice(0, 24),
+          };
+        }
+
+        if (!cancelled) {
+          setItems(data.items);
+          setState("ready");
+        }
+      } catch {
+        if (!cancelled) setState("error");
+      }
+    }
+
+    void load();
+    return () => { cancelled = true; };
   }, [keyword, riskLevel]);
 
   return (
     <main className="min-h-screen bg-slate-50 text-slate-900">
       <PublicHeader />
-      <section className="bg-[var(--brand-navy)] px-8 pb-16 pt-36 text-white"><div className="mx-auto max-w-7xl"><Link href="/" className="inline-flex items-center gap-2 text-sm text-blue-100 hover:text-white"><ArrowLeft className="h-4 w-4" />返回首页</Link><p className="mt-12 text-sm font-semibold uppercase tracking-[0.22em] text-blue-200">Fund Marketplace</p><h1 className="mt-4 text-5xl font-semibold">基金产品</h1><p className="mt-4 max-w-xl text-base leading-7 text-blue-100">基于真实产品数据，按基金类型、风险等级和投资目标了解更多选择。</p></div></section>
-      <section className="mx-auto max-w-7xl px-8 py-12"><div className="flex flex-wrap gap-3"><div className="relative w-80"><Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" /><input value={keyword} onChange={(event) => setKeyword(event.target.value)} placeholder="搜索基金名称或代码" className="w-full rounded-xl border border-slate-200 bg-white py-3 pl-10 pr-4 text-sm outline-none focus:border-[var(--brand-primary)]" /></div><select value={riskLevel} onChange={(event) => setRiskLevel(event.target.value)} className="rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 outline-none focus:border-[var(--brand-primary)]"><option value="">全部风险等级</option><option value="低风险">低风险</option><option value="中风险">中风险</option><option value="高风险">高风险</option></select></div><div className="mt-8 grid gap-5 md:grid-cols-2 lg:grid-cols-3">{state === "loading" && [1, 2, 3, 4, 5, 6].map((item) => <div key={item} className="h-64 animate-pulse rounded-2xl bg-slate-200" />)}{state === "error" && <div className="rounded-2xl border border-amber-200 bg-amber-50 p-6 text-sm text-amber-800 lg:col-span-3">基金数据暂时无法加载，请确认后端服务已启动后重试。</div>}{state === "ready" && items.map((item) => <Link href={`/products/${item.product_code}`} key={item.id} className="group rounded-2xl border border-slate-200 bg-white p-6 transition hover:-translate-y-1 hover:border-[var(--brand-primary)] hover:shadow-xl hover:shadow-slate-200/50"><div className="flex items-start justify-between"><span className="rounded-full bg-indigo-50 px-3 py-1 text-xs font-semibold text-[var(--brand-primary)]">{item.risk_level}</span><ArrowRight className="h-4 w-4 text-slate-300 group-hover:text-[var(--brand-primary)]" /></div><h2 className="mt-8 text-lg font-semibold text-[var(--brand-navy)]">{item.product_name}</h2><p className="mt-1 text-xs text-slate-400">{item.product_code} · {item.product_type}</p><div className="mt-8 flex items-end justify-between"><div><p className="text-xs text-slate-400">最新净值</p><p className="mt-1 text-2xl font-semibold text-[var(--brand-navy)]">{item.nav ?? "--"}</p></div><span className="text-xs text-slate-400">{item.nav_date ?? "暂无日期"}</span></div></Link>)}{state === "ready" && items.length === 0 && <div className="rounded-2xl border border-slate-200 bg-white p-10 text-center text-sm text-slate-500 lg:col-span-3">没有找到匹配的基金产品。</div>}</div></section>
+      <section className="bg-[var(--brand-navy)] px-8 pb-16 pt-36 text-white">
+        <div className="mx-auto max-w-7xl">
+          <Link href="/" className="inline-flex items-center gap-2 text-sm text-blue-100 hover:text-white"><ArrowLeft className="h-4 w-4" />返回首页</Link>
+          <p className="mt-12 text-sm font-semibold uppercase tracking-[0.22em] text-blue-200">Fund Marketplace</p>
+          <h1 className="mt-4 text-5xl font-semibold">基金产品</h1>
+          <p className="mt-4 max-w-xl text-base leading-7 text-blue-100">基于真实产品数据，按基金类型、风险等级和投资目标了解更多选择。</p>
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-7xl px-8 py-12">
+        <div className="flex flex-wrap gap-3">
+          <div className="relative w-80">
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
+            <input value={keyword} onChange={(event) => setKeyword(event.target.value)} placeholder="搜索基金名称或代码" className="w-full rounded-xl border border-slate-200 bg-white py-3 pl-10 pr-4 text-sm outline-none focus:border-[var(--brand-primary)]" />
+          </div>
+          <select value={riskLevel} onChange={(event) => setRiskLevel(event.target.value)} className="rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 outline-none focus:border-[var(--brand-primary)]">
+            <option value="">全部风险等级</option>
+            {RISK_LEVELS.map((level) => <option key={level} value={level}>{level} · {riskLevelDescription(level)}</option>)}
+          </select>
+        </div>
+
+        <div className="mt-8 overflow-hidden rounded-xl border border-slate-200 bg-white">
+          {state === "loading" && <div className="space-y-px bg-slate-100">{[1, 2, 3, 4, 5, 6].map((item) => <div key={item} className="h-20 animate-pulse bg-white" />)}</div>}
+          {state === "error" && <div className="p-6 text-sm text-amber-800">基金数据暂时无法加载，请确认后端服务已启动后重试。</div>}
+          {state === "ready" && (
+            <>
+              <div className="grid grid-cols-[minmax(280px,1.8fr)_140px_140px_140px_140px_32px] items-center gap-4 border-b border-slate-100 bg-gray-50 px-6 py-3 text-xs font-medium uppercase tracking-wide text-gray-500"><span>基金产品</span><span>风险等级</span><span>基金类型</span><span>最新净值</span><span>净值日期</span><span /></div>
+              {items.map((item) => {
+                const level = normalizeRiskLevel(item.risk_level);
+                return <Link href={`/products/${item.product_code}`} key={item.id} className="group grid min-h-20 grid-cols-[minmax(280px,1.8fr)_140px_140px_140px_140px_32px] items-center gap-4 border-b border-slate-100 px-6 py-4 last:border-b-0 hover:bg-indigo-50/40"><div><h2 className="font-semibold text-[var(--brand-navy)] group-hover:text-[var(--brand-primary)]">{item.product_name}</h2><p className="mt-1 text-xs text-slate-400">{item.product_code}</p></div><span className="w-fit rounded-full bg-indigo-50 px-3 py-1 text-xs font-semibold text-[var(--brand-primary)]">{level}</span><span className="text-sm text-slate-600">{item.product_type}</span><span className="text-lg font-semibold text-[var(--brand-navy)]">{item.nav ?? "--"}</span><span className="text-sm text-slate-500">{item.nav_date ?? "暂无日期"}</span><ArrowRight className="h-4 w-4 text-slate-300 transition group-hover:translate-x-1 group-hover:text-[var(--brand-primary)]" /></Link>;
+              })}
+              {items.length === 0 && <div className="p-10 text-center text-sm text-slate-500">没有找到匹配的基金产品。</div>}
+            </>
+          )}
+        </div>
+      </section>
     </main>
   );
 }
diff --git a/frontend/app/tools/knowledge/page.tsx b/frontend/app/tools/knowledge/page.tsx
index cacbde2..c7adb50 100644
--- a/frontend/app/tools/knowledge/page.tsx
+++ b/frontend/app/tools/knowledge/page.tsx
@@ -4,13 +4,15 @@ import Link from "next/link";
 import { ArrowLeft, Trash2, Upload } from "lucide-react";
 import { useEffect, useState } from "react";
 import { apiFetch } from "@/lib/api";
+import { isAdmin as hasAdminAccess } from "@/lib/roles";
+import type { UserPayload } from "@/types/api";
 
 interface DocumentItem { id?: string; doc_id?: string; title?: string; filename?: string; status?: string; }
 export default function KnowledgePage() {
   const [items, setItems] = useState<DocumentItem[]>([]); const [file, setFile] = useState<File | null>(null); const [message, setMessage] = useState(""); const [isAdmin, setIsAdmin] = useState(false);
   async function load() { try { setItems(await apiFetch<DocumentItem[]>("/knowledge/documents")); } catch (error) { setMessage(error instanceof Error ? error.message : "知识库加载失败"); } }
-  useEffect(() => { void apiFetch<{ user: { user_type?: string } }>("/auth/me").then(({ user }) => { const allowed = user.user_type === "ADMIN"; setIsAdmin(allowed); if (allowed) void load(); else setMessage("知识库管理仅对 ADMIN 开放"); }).catch(() => setMessage("请先登录管理员账号")); }, []);
+  useEffect(() => { void apiFetch<{ user: UserPayload }>("/auth/me").then(({ user }) => { const allowed = hasAdminAccess(user); setIsAdmin(allowed); if (allowed) void load(); else setMessage("知识库管理仅对管理员开放"); }).catch(() => setMessage("请先登录管理员账号")); }, []);
   async function upload(path: "/knowledge/documents/preview" | "/knowledge/documents/confirm") { if (!file) return; const body = new FormData(); body.append("file", file); body.append("title", file.name); body.append("strategy", "default"); const token = localStorage.getItem("huaxia_token"); const response = await fetch(`/backend${path}`, { method: "POST", headers: token ? { Authorization: `Bearer ${token}` } : undefined, body }); const payload = await response.json(); setMessage(payload.message ?? (response.ok ? "操作成功" : "操作失败")); if (response.ok && path.endsWith("confirm")) await load(); }
   async function remove(id: string) { await apiFetch(`/knowledge/documents/${id}`, { method: "DELETE" }); await load(); }
-  return <main className="min-h-screen bg-slate-50 px-10 py-10"><div className="mx-auto max-w-6xl"><Link href="/admin/common" className="inline-flex items-center gap-2 text-sm text-slate-500"><ArrowLeft className="h-4 w-4" />返回员工工作区</Link><h1 className="mt-8 text-3xl font-semibold text-[var(--brand-navy)]">知识库管理</h1>{!isAdmin ? <p className="mt-6 rounded-xl border border-amber-200 bg-amber-50 p-5 text-sm text-amber-800">知识库管理仅对 ADMIN 开放。</p> : <><div className="mt-6 rounded-xl border border-slate-200 bg-white p-6"><input type="file" onChange={(event) => setFile(event.target.files?.[0] ?? null)} /><div className="mt-4 flex gap-3"><button onClick={() => void upload("/knowledge/documents/preview")} className="flex items-center gap-2 rounded-lg border px-4 py-2 text-sm"><Upload className="h-4 w-4" />预览</button><button onClick={() => void upload("/knowledge/documents/confirm")} className="rounded-lg bg-[var(--brand-primary)] px-4 py-2 text-sm text-white">确认入库</button></div>{message && <p className="mt-3 text-sm text-slate-500">{message}</p>}</div><div className="mt-6 divide-y divide-slate-100 rounded-xl border border-slate-200 bg-white">{items.map((item) => { const id = item.id ?? item.doc_id ?? ""; return <div key={id} className="flex items-center justify-between p-5 text-sm"><span>{item.title ?? item.filename ?? id} <small className="ml-3 text-slate-400">{item.status ?? "已入库"}</small></span><button onClick={() => void remove(id)} aria-label="删除文档" className="text-rose-500"><Trash2 className="h-4 w-4" /></button></div>; })}{!items.length && <p className="p-8 text-sm text-slate-400">暂无知识库文档</p>}</div></>}</div></main>;
+  return <main className="min-h-screen bg-slate-50 px-10 py-10"><div className="mx-auto max-w-6xl"><Link href="/admin/common" className="inline-flex items-center gap-2 text-sm text-slate-500"><ArrowLeft className="h-4 w-4" />返回员工工作区</Link><h1 className="mt-8 text-3xl font-semibold text-[var(--brand-navy)]">知识库管理</h1>{!isAdmin ? <p className="mt-6 rounded-xl border border-amber-200 bg-amber-50 p-5 text-sm text-amber-800">知识库管理仅对管理员开放。</p> : <><div className="mt-6 rounded-xl border border-slate-200 bg-white p-6"><input type="file" onChange={(event) => setFile(event.target.files?.[0] ?? null)} /><div className="mt-4 flex gap-3"><button onClick={() => void upload("/knowledge/documents/preview")} className="flex items-center gap-2 rounded-lg border px-4 py-2 text-sm"><Upload className="h-4 w-4" />预览</button><button onClick={() => void upload("/knowledge/documents/confirm")} className="rounded-lg bg-[var(--brand-primary)] px-4 py-2 text-sm text-white">确认入库</button></div>{message && <p className="mt-3 text-sm text-slate-500">{message}</p>}</div><div className="mt-6 divide-y divide-slate-100 rounded-xl border border-slate-200 bg-white">{items.map((item) => { const id = item.id ?? item.doc_id ?? ""; return <div key={id} className="flex items-center justify-between p-5 text-sm"><span>{item.title ?? item.filename ?? id} <small className="ml-3 text-slate-400">{item.status ?? "已入库"}</small></span><button onClick={() => void remove(id)} aria-label="删除文档" className="text-rose-500"><Trash2 className="h-4 w-4" /></button></div>; })}{!items.length && <p className="p-8 text-sm text-slate-400">暂无知识库文档</p>}</div></>}</div></main>;
 }
diff --git a/frontend/app/tools/nl2sql/page.tsx b/frontend/app/tools/nl2sql/page.tsx
index 75f803f..7e94197 100644
--- a/frontend/app/tools/nl2sql/page.tsx
+++ b/frontend/app/tools/nl2sql/page.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import { ArrowLeft, Download, RefreshCw, Send } from "lucide-react";
 import { FormEvent, useEffect, useState } from "react";
 import { ApiError, apiFetch } from "@/lib/api";
+import { USER_TYPE } from "@/lib/roles";
 
 interface HistoryItem { query_id?: string; question?: string; status?: string; row_count?: number; create_time?: string; }
 
@@ -16,15 +17,15 @@ export default function Nl2SqlPage() {
   const [message, setMessage] = useState("");
   const [loading, setLoading] = useState(false);
   const [userType, setUserType] = useState<string | null>(null);
-  const isAdmin = userType === "ADMIN";
-  const canQuery = userType === "EMPLOYEE";
+  const isAdmin = userType === USER_TYPE.ADMIN;
+  const canQuery = userType === USER_TYPE.EMPLOYEE || userType === USER_TYPE.ADMIN;
 
   useEffect(() => {
     void apiFetch<{ user: { user_type?: string } }>("/auth/me")
       .then(({ user }) => {
         const nextType = user.user_type ?? null;
         setUserType(nextType);
-        if (nextType === "ADMIN") setTab("config");
+        if (nextType === USER_TYPE.ADMIN) setTab("config");
       })
       .catch(() => setUserType(null));
   }, []);
diff --git a/frontend/components/admin/sections/admin.tsx b/frontend/components/admin/sections/admin.tsx
new file mode 100644
index 0000000..458a7a5
--- /dev/null
+++ b/frontend/components/admin/sections/admin.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import Link from "next/link";
+import { Activity, Database, FileText, ShieldCheck } from "lucide-react";
+import { Card } from "@/components/admin/ui";
+
+const ENTRIES = [
+  {
+    href: "/tools/nl2sql",
+    icon: Activity,
+    title: "NL2SQL 配置",
+    description: "管理查询策略、角色权限和异常审计",
+  },
+  {
+    href: "/tools/knowledge",
+    icon: Database,
+    title: "知识库管理",
+    description: "维护 RAG 文档和检索数据",
+  },
+  {
+    href: "/products",
+    icon: FileText,
+    title: "基金数据",
+    description: "查看基金产品和历史净值",
+  },
+];
+
+export function AdminSection({ username }: { username: string }) {
+  return (
+    <div className="space-y-6">
+      <Card title="系统管理" description={`当前管理员：${username}`}>
+        <div className="grid gap-4 md:grid-cols-3">
+          {ENTRIES.map((entry) => (
+            <Link
+              key={entry.href}
+              href={entry.href}
+              className="group rounded-xl border border-slate-200 p-6 transition hover:border-indigo-500 hover:shadow-md"
+            >
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600">
+                <entry.icon className="h-5 w-5" />
+              </div>
+              <h3 className="mt-5 font-semibold text-slate-900">{entry.title}</h3>
+              <p className="mt-2 text-sm leading-6 text-slate-500">{entry.description}</p>
+              <span className="mt-6 inline-block text-sm font-medium text-indigo-600 group-hover:underline">
+                进入模块
+              </span>
+            </Link>
+          ))}
+        </div>
+      </Card>
+
+      <Card title="权限说明">
+        <ul className="space-y-2 text-sm leading-6 text-slate-600">
+          <li className="flex items-start gap-2">
+            <ShieldCheck className="mt-1 h-4 w-4 shrink-0 text-emerald-500" />
+            管理员默认拥有投顾和风控的全部前端操作权限，但实际鉴权仍以后端为准。
+          </li>
+          <li className="flex items-start gap-2">
+            <ShieldCheck className="mt-1 h-4 w-4 shrink-0 text-emerald-500" />
+            前端菜单显隐只是体验优化，不能替代后端权限校验。
+          </li>
+          <li className="flex items-start gap-2">
+            <ShieldCheck className="mt-1 h-4 w-4 shrink-0 text-emerald-500" />
+            所有敏感操作和查看行为都会写入审计台账，可在投顾模块导出。
+          </li>
+        </ul>
+      </Card>
+    </div>
+  );
+}
diff --git a/frontend/components/admin/sections/customers.tsx b/frontend/components/admin/sections/customers.tsx
new file mode 100644
index 0000000..b9ba9c1
--- /dev/null
+++ b/frontend/components/admin/sections/customers.tsx
@@ -0,0 +1,466 @@
+"use client";
+
+import { Eye, PieChart, Search, Users } from "lucide-react";
+import { useCallback, useEffect, useState, type ReactNode } from "react";
+import {
+  adminApi,
+  errMessage,
+  type Customer,
+  type CustomerDetail,
+  type Diagnosis,
+  type Holding,
+  type ReportItem,
+} from "@/lib/admin-api";
+import {
+  Badge,
+  Button,
+  Card,
+  EmptyState,
+  ErrorState,
+  LoadingBlock,
+  Modal,
+  Pagination,
+  SearchInput,
+  Select,
+  TableWrap,
+  Td,
+  Th,
+  formatMoney,
+  formatPercent,
+  formatTime,
+  statusTone,
+  useToast,
+} from "@/components/admin/ui";
+
+const STATUS_OPTIONS = [
+  { value: "", label: "全部状态" },
+  { value: "已分配", label: "已分配" },
+  { value: "已签约", label: "已签约" },
+  { value: "已结束", label: "已结束" },
+];
+
+const REPORT_STATUS: Record<string, string> = {
+  draft: "草稿",
+  sent: "已发送",
+  discarded: "已废弃",
+};
+
+export function CustomersSection() {
+  const toast = useToast();
+  const [items, setItems] = useState<Customer[]>([]);
+  const [total, setTotal] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  const [page, setPage] = useState(1);
+  const [keyword, setKeyword] = useState("");
+  const [status, setStatus] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  const [activeId, setActiveId] = useState<number | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const result = await adminApi.customers({
+        status: status || undefined,
+        keyword: keyword || undefined,
+        page,
+        page_size: 10,
+      });
+      setItems(result.items ?? []);
+      setTotal(result.total ?? 0);
+      setTotalPages(result.total_pages ?? 0);
+    } catch (e) {
+      setError(errMessage(e, "客户列表加载失败"));
+    } finally {
+      setLoading(false);
+    }
+  }, [status, keyword, page]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  return (
+    <>
+      <Card title="客户管理" description="仅展示名下客户，敏感信息由后端脱敏" bodyClassName="p-0">
+        <div className="flex flex-wrap items-center gap-3 border-b border-slate-100 p-4">
+          <SearchInput
+            className="w-64"
+            placeholder="搜索姓名或手机号"
+            value={keyword}
+            onChange={(event) => {
+              setKeyword(event.target.value);
+              setPage(1);
+            }}
+          />
+          <Select value={status} onChange={(event) => { setStatus(event.target.value); setPage(1); }}>
+            {STATUS_OPTIONS.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </Select>
+          <Button size="sm" className="ml-auto" onClick={() => void load()} loading={loading}>
+            <Search className="h-3.5 w-3.5" />
+            查询
+          </Button>
+        </div>
+
+        {loading ? (
+          <LoadingBlock />
+        ) : error ? (
+          <ErrorState message={error} onRetry={() => void load()} />
+        ) : items.length === 0 ? (
+          <EmptyState text="没有匹配的客户" />
+        ) : (
+          <>
+            <TableWrap>
+              <thead>
+                <tr>
+                  <Th>客户</Th>
+                  <Th>客户等级</Th>
+                  <Th>风险等级</Th>
+                  <Th>总资产</Th>
+                  <Th>关系状态</Th>
+                  <Th className="text-right">操作</Th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-50">
+                {items.map((customer) => (
+                  <tr key={customer.customer_id} className="transition-colors hover:bg-slate-50">
+                    <Td>
+                      <div className="flex items-center gap-3">
+                        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-slate-100 text-sm font-medium text-slate-600">
+                          <Users className="h-4 w-4" />
+                        </div>
+                        <div>
+                          <p className="font-medium text-slate-900">{customer.real_name ?? "匿名客户"}</p>
+                          <p className="text-xs text-slate-400">{customer.phone ?? "--"}</p>
+                        </div>
+                      </div>
+                    </Td>
+                    <Td>{customer.customer_level ?? "--"}</Td>
+                    <Td>{customer.risk_level ?? "--"}</Td>
+                    <Td>{customer.total_assets !== null ? formatMoney(customer.total_assets) : "--"}</Td>
+                    <Td>
+                      <Badge tone={statusTone(customer.relation_status)}>{customer.relation_status}</Badge>
+                    </Td>
+                    <Td>
+                      <div className="flex justify-end gap-2">
+                        <Button size="sm" onClick={() => setActiveId(customer.customer_id)}>
+                          <Eye className="h-3.5 w-3.5" />
+                          详情
+                        </Button>
+                      </div>
+                    </Td>
+                  </tr>
+                ))}
+              </tbody>
+            </TableWrap>
+            <Pagination page={page} totalPages={totalPages} total={total} onChange={setPage} />
+          </>
+        )}
+      </Card>
+
+      {activeId !== null && (
+        <CustomerDetailModal
+          customerId={activeId}
+          onClose={() => setActiveId(null)}
+          onChanged={() => void load()}
+          onToast={(text, tone) => toast(text, tone)}
+        />
+      )}
+    </>
+  );
+}
+
+function CustomerDetailModal({
+  customerId,
+  onClose,
+  onChanged,
+  onToast,
+}: {
+  customerId: number;
+  onClose: () => void;
+  onChanged: () => void;
+  onToast: (text: string, tone?: "success" | "error" | "info") => void;
+}) {
+  const [tab, setTab] = useState<"profile" | "holdings" | "diagnosis" | "reports">("profile");
+  const [detail, setDetail] = useState<CustomerDetail | null>(null);
+  const [holdings, setHoldings] = useState<Holding[]>([]);
+  const [diagnosis, setDiagnosis] = useState<Diagnosis | null>(null);
+  const [reports, setReports] = useState<ReportItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [unmasked, setUnmasked] = useState(false);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    void (async () => {
+      setLoading(true);
+      setError("");
+      try {
+        const [base, holdingList, diag, reportPage] = await Promise.all([
+          adminApi.customer(customerId),
+          adminApi.holdings(customerId).catch(() => []),
+          adminApi.diagnosis(customerId).catch(() => null),
+          adminApi.reports(customerId).catch(() => null),
+        ]);
+        setDetail(base);
+        setHoldings(holdingList ?? []);
+        setDiagnosis(diag);
+        setReports(reportPage?.items ?? []);
+      } catch (e) {
+        setError(errMessage(e, "客户详情加载失败"));
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [customerId]);
+
+  async function unmaskPhone() {
+    setBusy(true);
+    try {
+      const result = await adminApi.customer(customerId, true);
+      setDetail(result);
+      setUnmasked(true);
+      onToast("已查看完整手机号，操作已记入审计台账", "info");
+    } catch (e) {
+      onToast(errMessage(e, "查看失败"), "error");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function changeRelation(action: "sign" | "close") {
+    const text = action === "sign" ? "确认签约该客户？" : "确认结束对该客户的服务？结束後不可恢复。";
+    if (!window.confirm(text)) return;
+    setBusy(true);
+    try {
+      await adminApi.setRelation(customerId, action);
+      onToast(action === "sign" ? "已签约" : "已结束服务");
+      const refreshed = await adminApi.customer(customerId, unmasked);
+      setDetail(refreshed);
+      onChanged();
+    } catch (e) {
+      onToast(errMessage(e, "操作失败"), "error");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const tabs = [
+    { key: "profile", label: "基本资料" },
+    { key: "holdings", label: `持仓 (${holdings.length})` },
+    { key: "diagnosis", label: "组合诊断" },
+    { key: "reports", label: `历史报告 (${reports.length})` },
+  ] as const;
+
+  return (
+    <Modal
+      open
+      title={`客户 #${customerId} 详情`}
+      onClose={onClose}
+      footer={
+        <>
+          {detail?.relation_status === "已签约" ? (
+            <Button variant="danger" loading={busy} onClick={() => void changeRelation("close")}>
+              结束服务
+            </Button>
+          ) : (
+            <Button variant="primary" loading={busy} onClick={() => void changeRelation("sign")}>
+              签约
+            </Button>
+          )}
+        </>
+      }
+    >
+      {loading ? (
+        <LoadingBlock />
+      ) : error ? (
+        <ErrorState message={error} />
+      ) : (
+        <div className="space-y-4">
+          <div className="flex flex-wrap gap-2 border-b border-slate-100 pb-3">
+            {tabs.map((item) => (
+              <button
+                key={item.key}
+                onClick={() => setTab(item.key)}
+                className={
+                  tab === item.key
+                    ? "rounded-lg bg-indigo-50 px-3 py-1.5 text-xs font-medium text-indigo-600"
+                    : "rounded-lg px-3 py-1.5 text-xs text-slate-500 hover:bg-slate-100"
+                }
+              >
+                {item.label}
+              </button>
+            ))}
+          </div>
+
+          {tab === "profile" && detail && (
+            <dl className="grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
+              <Field label="姓名" value={detail.real_name ?? "--"} />
+              <Field
+                label="手机号"
+                value={
+                  <span className="flex items-center gap-2">
+                    {detail.phone ?? "--"}
+                    {!unmasked && (
+                      <button
+                        onClick={() => void unmaskPhone()}
+                        disabled={busy}
+                        className="text-xs text-indigo-600 hover:underline disabled:opacity-50"
+                      >
+                        查看完整号码
+                      </button>
+                    )}
+                  </span>
+                }
+              />
+              <Field label="客户等级" value={detail.customer_level ?? "--"} />
+              <Field label="风险等级" value={detail.risk_level ?? "--"} />
+              <Field label="风险评分" value={detail.risk_score?.toString() ?? "--"} />
+              <Field label="总资产" value={formatMoney(detail.total_assets)} />
+              <Field
+                label="关系状态"
+                value={<Badge tone={statusTone(detail.relation_status)}>{detail.relation_status}</Badge>}
+              />
+              <Field label="签约时间" value={formatTime(detail.signed_time)} />
+              <Field label="分配时间" value={formatTime(detail.assigned_time)} />
+            </dl>
+          )}
+
+          {tab === "holdings" &&
+            (holdings.length === 0 ? (
+              <EmptyState text="该客户暂无持仓" />
+            ) : (
+              <div className="max-h-80 overflow-y-auto">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="text-xs text-slate-500">
+                      <th className="py-2 text-left">产品</th>
+                      <th className="py-2 text-right">市值</th>
+                      <th className="py-2 text-right">浮动盈亏</th>
+                      <th className="py-2 text-right">收益率</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-slate-100">
+                    {holdings.map((holding) => (
+                      <tr key={holding.product_id}>
+                        <td className="py-2">
+                          <p className="text-slate-900">{holding.product_name ?? "--"}</p>
+                          <p className="text-xs text-slate-400">{holding.product_code ?? ""}</p>
+                        </td>
+                        <td className="py-2 text-right">{formatMoney(holding.current_value)}</td>
+                        <td
+                          className={`py-2 text-right ${
+                            Number(holding.profit_loss) >= 0 ? "text-red-600" : "text-emerald-600"
+                          }`}
+                        >
+                          {formatMoney(holding.profit_loss)}
+                        </td>
+                        <td
+                          className={`py-2 text-right ${
+                            Number(holding.profit_ratio) >= 0 ? "text-red-600" : "text-emerald-600"
+                          }`}
+                        >
+                          {formatPercent(Number(holding.profit_ratio), 2)}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            ))}
+
+          {tab === "diagnosis" &&
+            (diagnosis ? (
+              <div className="space-y-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="rounded-lg bg-slate-50 p-4">
+                    <p className="text-xs text-slate-500">持仓总市值</p>
+                    <p className="mt-1 text-lg font-semibold">{formatMoney(diagnosis.total_value)}</p>
+                  </div>
+                  <div className="rounded-lg bg-slate-50 p-4">
+                    <p className="text-xs text-slate-500">最大单一产品占比</p>
+                    <p className="mt-1 text-lg font-semibold">
+                      {formatPercent(diagnosis.concentration?.top_product_ratio ?? 0)}
+                    </p>
+                    <p className="mt-1 truncate text-xs text-slate-400">
+                      {diagnosis.concentration?.top_product?.product_name ?? "--"}
+                    </p>
+                  </div>
+                </div>
+                <div>
+                  <p className="mb-2 flex items-center gap-2 text-xs font-medium text-slate-500">
+                    <PieChart className="h-3.5 w-3.5" />
+                    资产配置分布
+                  </p>
+                  {Object.keys(diagnosis.allocation ?? {}).length === 0 ? (
+                    <EmptyState text="暂无配置数据" />
+                  ) : (
+                    <div className="space-y-2">
+                      {Object.entries(diagnosis.allocation).map(([type, value]) => {
+                        const totalValue = Number(diagnosis.total_value) || 1;
+                        const ratio = Number(value) / totalValue;
+                        return (
+                          <div key={type}>
+                            <div className="mb-1 flex justify-between text-xs">
+                              <span className="text-slate-600">{type}</span>
+                              <span className="text-slate-900">
+                                {formatMoney(value)} · {formatPercent(ratio)}
+                              </span>
+                            </div>
+                            <div className="h-2 overflow-hidden rounded-full bg-slate-100">
+                              <div
+                                className="h-full rounded-full bg-indigo-500"
+                                style={{ width: `${Math.min(ratio * 100, 100)}%` }}
+                              />
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+              </div>
+            ) : (
+              <EmptyState text="暂无诊断数据" />
+            ))}
+
+          {tab === "reports" &&
+            (reports.length === 0 ? (
+              <EmptyState text="暂无历史建议报告" />
+            ) : (
+              <ul className="max-h-80 divide-y divide-slate-100 overflow-y-auto">
+                {reports.map((report) => (
+                  <li key={report.report_id} className="flex items-center justify-between gap-3 py-3">
+                    <div className="min-w-0">
+                      <p className="truncate text-sm text-slate-900">{report.title ?? "未命名报告"}</p>
+                      <p className="text-xs text-slate-400">
+                        {report.intent ?? "--"} · {formatTime(report.send_time)}
+                      </p>
+                    </div>
+                    <Badge tone={statusTone(report.send_status)}>
+                      {REPORT_STATUS[report.send_status] ?? report.send_status}
+                    </Badge>
+                  </li>
+                ))}
+              </ul>
+            ))}
+        </div>
+      )}
+    </Modal>
+  );
+}
+
+function Field({ label, value }: { label: string; value: ReactNode }) {
+  return (
+    <div>
+      <dt className="text-xs text-slate-500">{label}</dt>
+      <dd className="mt-0.5 text-slate-900">{value}</dd>
+    </div>
+  );
+}
diff --git a/frontend/components/admin/sections/drafts.tsx b/frontend/components/admin/sections/drafts.tsx
new file mode 100644
index 0000000..d102b5d
--- /dev/null
+++ b/frontend/components/admin/sections/drafts.tsx
@@ -0,0 +1,199 @@
+"use client";
+
+import { FileSignature, Save, Send, Trash2 } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { adminApi, errMessage, type Draft } from "@/lib/admin-api";
+import {
+  Badge,
+  Button,
+  Card,
+  EmptyState,
+  ErrorState,
+  LoadingBlock,
+  Pagination,
+  TextInput,
+  cn,
+  formatTime,
+  statusTone,
+  useToast,
+} from "@/components/admin/ui";
+
+function draftKey(draft: Draft) {
+  return String(draft.draft_id ?? draft.id ?? "");
+}
+
+export function DraftsSection() {
+  const toast = useToast();
+  const [items, setItems] = useState<Draft[]>([]);
+  const [total, setTotal] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  const [activeKey, setActiveKey] = useState("");
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [dirty, setDirty] = useState(false);
+  const [busy, setBusy] = useState(false);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const result = await adminApi.drafts({ page, page_size: 20 });
+      setItems(result.items ?? []);
+      setTotal(result.total ?? 0);
+      setTotalPages(result.total_pages ?? 0);
+    } catch (e) {
+      setError(errMessage(e, "草稿列表加载失败"));
+    } finally {
+      setLoading(false);
+    }
+  }, [page]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  async function choose(draft: Draft) {
+    if (dirty && !window.confirm("当前草稿有未保存的修改，确认切换？")) return;
+    setBusy(true);
+    try {
+      const detail = await adminApi.draft(draftKey(draft));
+      setActiveKey(draftKey(draft));
+      setTitle(detail.title ?? "");
+      setContent(detail.content ?? "");
+      setDirty(false);
+    } catch (e) {
+      toast(errMessage(e, "草稿详情加载失败"), "error");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function run(action: "save" | "send" | "discard") {
+    if (!activeKey) return;
+    if (action === "send" && !window.confirm("确认发送该草稿？发送后将进入终审并触达客户。")) return;
+    if (action === "discard" && !window.confirm("确认废弃该草稿？废弃后不可恢复。")) return;
+    setBusy(true);
+    try {
+      if (action === "save") await adminApi.saveDraft(activeKey, { title, content: content });
+      if (action === "send") await adminApi.sendDraft(activeKey);
+      if (action === "discard") await adminApi.discardDraft(activeKey);
+      toast(action === "save" ? "草稿已保存" : action === "send" ? "草稿已发送" : "草稿已废弃");
+      setDirty(false);
+      if (action !== "save") {
+        setActiveKey("");
+        setTitle("");
+        setContent("");
+      }
+      await load();
+    } catch (e) {
+      toast(errMessage(e, "操作失败"), "error");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)]">
+      <Card title="草稿列表" description="由投顾 Agent 生成，可编辑后发送" bodyClassName="p-0">
+        {loading ? (
+          <LoadingBlock />
+        ) : error ? (
+          <ErrorState message={error} onRetry={() => void load()} />
+        ) : items.length === 0 ? (
+          <EmptyState text="暂无草稿" />
+        ) : (
+          <>
+            <ul className="max-h-[520px] divide-y divide-slate-100 overflow-y-auto">
+              {items.map((draft) => (
+                <li key={draftKey(draft) || draft.title}>
+                  <button
+                    onClick={() => void choose(draft)}
+                    className={cn(
+                      "w-full px-4 py-3 text-left text-sm transition-colors",
+                      draftKey(draft) === activeKey
+                        ? "bg-indigo-50 text-indigo-700"
+                        : "text-slate-600 hover:bg-slate-50"
+                    )}
+                  >
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="truncate font-medium">{draft.title ?? "未命名草稿"}</span>
+                      <Badge tone={statusTone(draft.status)}>{draft.status ?? "草稿"}</Badge>
+                    </div>
+                    <p className="mt-1 truncate text-xs text-slate-400">
+                      {draft.customer_id ? `客户 #${draft.customer_id} · ` : ""}
+                      {formatTime(draft.update_time ?? draft.create_time)}
+                    </p>
+                  </button>
+                </li>
+              ))}
+            </ul>
+            <Pagination page={page} totalPages={totalPages} total={total} onChange={setPage} />
+          </>
+        )}
+      </Card>
+
+      <Card
+        title={activeKey ? "编辑草稿" : "选择草稿"}
+        description={activeKey ? `草稿 ID：${activeKey}` : "从左侧列表选择一份草稿进行编辑"}
+        actions={
+          activeKey ? (
+            <>
+              <Button size="sm" variant="primary" loading={busy} onClick={() => void run("save")}>
+                <Save className="h-3.5 w-3.5" />
+                保存
+              </Button>
+              <Button size="sm" loading={busy} onClick={() => void run("send")}>
+                <Send className="h-3.5 w-3.5" />
+                发送
+              </Button>
+              <Button size="sm" variant="danger" loading={busy} onClick={() => void run("discard")}>
+                <Trash2 className="h-3.5 w-3.5" />
+                废弃
+              </Button>
+            </>
+          ) : undefined
+        }
+      >
+        {!activeKey ? (
+          <EmptyState text="暂无选中的草稿" />
+        ) : (
+          <div className="space-y-4">
+            <div>
+              <label className="mb-1 block text-xs text-slate-500">草稿标题</label>
+              <TextInput
+                value={title}
+                onChange={(event) => {
+                  setTitle(event.target.value);
+                  setDirty(true);
+                }}
+                placeholder="请输入草稿标题"
+              />
+            </div>
+            <div>
+              <label className="mb-1 block text-xs text-slate-500">草稿内容</label>
+              <textarea
+                value={content}
+                onChange={(event) => {
+                  setContent(event.target.value);
+                  setDirty(true);
+                }}
+                className="min-h-[360px] w-full rounded-lg border border-slate-200 px-3 py-2 text-sm leading-6 text-slate-700 transition-colors focus:border-indigo-400 focus:outline-none"
+                placeholder="请输入建议内容"
+              />
+            </div>
+            {dirty && (
+              <p className="flex items-center gap-2 text-xs text-amber-600">
+                <FileSignature className="h-3.5 w-3.5" />
+                有未保存的修改
+              </p>
+            )}
+          </div>
+        )}
+      </Card>
+    </div>
+  );
+}
diff --git a/frontend/components/admin/sections/funds.tsx b/frontend/components/admin/sections/funds.tsx
new file mode 100644
index 0000000..0a45902
--- /dev/null
+++ b/frontend/components/admin/sections/funds.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+import { adminApi, errMessage, type FundProduct } from "@/lib/admin-api";
+import { isAdvisor } from "@/lib/roles";
+import type { UserPayload } from "@/types/api";
+import {
+  Badge,
+  Button,
+  Card,
+  EmptyState,
+  ErrorState,
+  LoadingBlock,
+  Pagination,
+  SearchInput,
+  Select,
+  TableWrap,
+  Td,
+  Th,
+  statusTone,
+} from "@/components/admin/ui";
+
+const RISK_OPTIONS = [
+  { value: "", label: "全部风险等级" },
+  { value: "低风险", label: "低风险" },
+  { value: "中低风险", label: "中低风险" },
+  { value: "中风险", label: "中风险" },
+  { value: "中高风险", label: "中高风险" },
+  { value: "高风险", label: "高风险" },
+];
+
+export function FundsSection({ user }: { user: UserPayload }) {
+  const advisor = isAdvisor(user);
+  const [items, setItems] = useState<FundProduct[]>([]);
+  const [total, setTotal] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  const [page, setPage] = useState(1);
+  const [keyword, setKeyword] = useState("");
+  const [riskLevel, setRiskLevel] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const result = advisor
+        ? await adminApi.funds({ keyword: keyword || undefined, risk_level: riskLevel || undefined, page, page_size: 10 })
+        : await adminApi.products({ keyword: keyword || undefined, page, page_size: 10 });
+      setItems(result.items ?? []);
+      setTotal(result.total ?? 0);
+      setTotalPages(result.total_pages ?? 0);
+    } catch (e) {
+      setError(errMessage(e, "基金数据加载失败"));
+    } finally {
+      setLoading(false);
+    }
+  }, [advisor, keyword, riskLevel, page]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  return (
+    <Card
+      title="基金数据"
+      description={advisor ? "白名单在售产品" : "全部在售基金产品"}
+      bodyClassName="p-0"
+      actions={
+        <Link href="/products" className="text-sm font-medium text-indigo-600 hover:underline">
+          在官网查看
+        </Link>
+      }
+    >
+      <div className="flex flex-wrap items-center gap-3 border-b border-slate-100 p-4">
+        <SearchInput
+          className="w-64"
+          placeholder="搜索基金名称或代码"
+          value={keyword}
+          onChange={(event) => {
+            setKeyword(event.target.value);
+            setPage(1);
+          }}
+        />
+        {advisor && (
+          <Select value={riskLevel} onChange={(event) => { setRiskLevel(event.target.value); setPage(1); }}>
+            {RISK_OPTIONS.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </Select>
+        )}
+        <Button size="sm" className="ml-auto" onClick={() => void load()} loading={loading}>
+          查询
+        </Button>
+      </div>
+
+      {loading ? (
+        <LoadingBlock />
+      ) : error ? (
+        <ErrorState message={error} onRetry={() => void load()} />
+      ) : items.length === 0 ? (
+        <EmptyState text="没有匹配的基金产品" />
+      ) : (
+        <>
+          <TableWrap>
+            <thead>
+              <tr>
+                <Th>基金代码</Th>
+                <Th>基金名称</Th>
+                <Th>类型</Th>
+                <Th>风险等级</Th>
+                <Th className="text-right">最新净值</Th>
+                <Th>净值日期</Th>
+                <Th>基金经理</Th>
+                <Th>状态</Th>
+                <Th className="text-right">操作</Th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-50">
+              {items.map((fund) => (
+                <tr key={fund.id} className="transition-colors hover:bg-slate-50">
+                  <Td className="font-medium text-slate-900">{fund.product_code}</Td>
+                  <Td>{fund.product_name}</Td>
+                  <Td>{fund.product_type}</Td>
+                  <Td>{fund.risk_level}</Td>
+                  <Td className="text-right">{fund.nav?.toFixed(4) ?? "--"}</Td>
+                  <Td className="text-xs text-slate-500">{fund.nav_date ?? "--"}</Td>
+                  <Td>{fund.fund_manager ?? "--"}</Td>
+                  <Td>
+                    <Badge tone={statusTone(fund.status)}>{fund.status}</Badge>
+                  </Td>
+                  <Td>
+                    <Link
+                      href={`/products/${fund.product_code}`}
+                      className="block text-right text-sm text-indigo-600 hover:underline"
+                    >
+                      详情
+                    </Link>
+                  </Td>
+                </tr>
+              ))}
+            </tbody>
+          </TableWrap>
+          <Pagination page={page} totalPages={totalPages} total={total} onChange={setPage} />
+        </>
+      )}
+    </Card>
+  );
+}
diff --git a/frontend/components/admin/sections/overview.tsx b/frontend/components/admin/sections/overview.tsx
new file mode 100644
index 0000000..6285fab
--- /dev/null
+++ b/frontend/components/admin/sections/overview.tsx
@@ -0,0 +1,318 @@
+"use client";
+
+import { Activity, AlertTriangle, BarChart3, CheckCircle2, FileText, Users, Wallet } from "lucide-react";
+import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+import { adminApi, errMessage, type DashboardData, type PersonalReport, type RiskAlert, type WorkOrder } from "@/lib/admin-api";
+import { isAdvisor, isRiskOfficer } from "@/lib/roles";
+import type { UserPayload } from "@/types/api";
+import {
+  Badge,
+  Button,
+  Card,
+  EmptyState,
+  ErrorState,
+  LoadingBlock,
+  StatCard,
+  formatMoney,
+  formatPercent,
+  formatTime,
+  isOverdue,
+} from "@/components/admin/ui";
+
+const LEVEL_KEYS = ["C1", "C2", "C3", "C4", "C5", "unknown"];
+const LEVEL_LABEL: Record<string, string> = {
+  C1: "C1 保守型",
+  C2: "C2 稳健型",
+  C3: "C3 平衡型",
+  C4: "C4 成长型",
+  C5: "C5 进取型",
+  unknown: "未测评",
+};
+
+export function OverviewSection({
+  user,
+  onNavigate,
+}: {
+  user: UserPayload;
+  onNavigate: (section: "todos" | "customers" | "risk" | "workorders") => void;
+}) {
+  const advisor = isAdvisor(user);
+  const risk = isRiskOfficer(user);
+
+  const [dashboard, setDashboard] = useState<DashboardData | null>(null);
+  const [personal, setPersonal] = useState<PersonalReport | null>(null);
+  const [alerts, setAlerts] = useState<RiskAlert[]>([]);
+  const [orders, setOrders] = useState<WorkOrder[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const tasks: Promise<unknown>[] = [];
+      if (advisor) {
+        tasks.push(
+          adminApi.dashboard().then(setDashboard).catch(() => setDashboard(null)),
+          adminApi.personalReport().then(setPersonal).catch(() => setPersonal(null))
+        );
+      }
+      if (risk) {
+        tasks.push(
+          adminApi
+            .alerts({ page: 1, page_size: 5 })
+            .then((result) => setAlerts(result.items ?? []))
+            .catch(() => setAlerts([])),
+          adminApi
+            .workOrders({ page: 1, page_size: 5 })
+            .then((result) => setOrders(result.items ?? []))
+            .catch(() => setOrders([]))
+        );
+      }
+      await Promise.all(tasks);
+    } catch (e) {
+      setError(errMessage(e, "工作台数据加载失败"));
+    } finally {
+      setLoading(false);
+    }
+  }, [advisor, risk]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  if (loading) return <LoadingBlock text="正在加载工作台数据..." />;
+  if (error) return <ErrorState message={error} onRetry={() => void load()} />;
+
+  const overview = dashboard?.overview;
+  const pendingTodos = dashboard?.todos?.items ?? [];
+  const levels = dashboard?.customer_levels ?? {};
+  const maxLevel = Math.max(1, ...LEVEL_KEYS.map((key) => levels[key] ?? 0));
+
+  return (
+    <div className="space-y-6">
+      {advisor ? (
+        <>
+          <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+            <StatCard
+              icon={<Users className="h-5 w-5" />}
+              label="名下客户"
+              value={overview?.total_customers ?? "--"}
+              hint={`已签约 ${overview?.signed_customers ?? 0} · 已结束 ${overview?.closed_customers ?? 0}`}
+            />
+            <StatCard
+              icon={<Wallet className="h-5 w-5" />}
+              label="管理资产"
+              value={overview?.total_aum ? formatMoney(overview.total_aum) : "--"}
+              hint="名下客户持有中市值合计"
+            />
+            <StatCard
+              icon={<BarChart3 className="h-5 w-5" />}
+              label="客户流失率"
+              value={overview?.churn_rate !== undefined ? formatPercent(overview.churn_rate) : "--"}
+              hint="已结束 / 总客户"
+            />
+            <StatCard
+              icon={<Activity className="h-5 w-5" />}
+              label="待办事项"
+              value={dashboard?.todos?.pending ?? "--"}
+              hint={
+                pendingTodos.some((item) => isOverdue(item.due_at))
+                  ? `${pendingTodos.filter((item) => isOverdue(item.due_at)).length} 项已逾期`
+                  : "暂无逾期"
+              }
+              hintTone={pendingTodos.some((item) => isOverdue(item.due_at)) ? "danger" : "muted"}
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+            <StatCard label="报告已发送" value={overview?.reports_sent ?? "--"} />
+            <StatCard label="报告草稿" value={overview?.reports_draft ?? "--"} hint="待发送" />
+            <StatCard label="累计回访" value={overview?.visits_count ?? "--"} />
+            <StatCard
+              label="个人绩效 AUM"
+              value={personal?.total_aum ? formatMoney(personal.total_aum) : "--"}
+              hint={`覆盖 ${personal?.total_customers ?? 0} 名客户`}
+            />
+          </div>
+
+          <div className="grid gap-4 lg:grid-cols-3">
+            <Card
+              title="客户风险分层"
+              description="按客户风险等级统计人数"
+              className="lg:col-span-1"
+            >
+              {Object.keys(levels).length === 0 ? (
+                <EmptyState text="暂无分层数据" />
+              ) : (
+                <div className="space-y-3">
+                  {LEVEL_KEYS.filter((key) => (levels[key] ?? 0) > 0 || key === "unknown").map((key) => (
+                    <div key={key}>
+                      <div className="mb-1 flex items-center justify-between text-xs">
+                        <span className="text-slate-600">{LEVEL_LABEL[key] ?? key}</span>
+                        <span className="font-medium text-slate-900">{levels[key] ?? 0}</span>
+                      </div>
+                      <div className="h-2 overflow-hidden rounded-full bg-slate-100">
+                        <div
+                          className="h-full rounded-full bg-indigo-500"
+                          style={{ width: `${((levels[key] ?? 0) / maxLevel) * 100}%` }}
+                        />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </Card>
+
+            <Card
+              title="待办提醒"
+              description="按到期时间排序"
+              className="lg:col-span-2"
+              actions={
+                <Button size="sm" variant="ghost" onClick={() => onNavigate("todos")}>
+                  全部待办
+                </Button>
+              }
+            >
+              {pendingTodos.length === 0 ? (
+                <EmptyState text="暂无待办事项" />
+              ) : (
+                <ul className="divide-y divide-slate-100">
+                  {pendingTodos.slice(0, 6).map((todo) => (
+                    <li key={todo.id} className="flex flex-wrap items-center justify-between gap-3 py-3 text-sm">
+                      <div>
+                        <p className="font-medium text-slate-900">{todo.todo_type}</p>
+                        <p className="mt-0.5 text-xs text-slate-500">
+                          {todo.customer_id ? `客户 #${todo.customer_id}` : "无关联客户"} · 截止{" "}
+                          {formatTime(todo.due_at)}
+                        </p>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {isOverdue(todo.due_at) && <Badge tone="danger">已逾期</Badge>}
+                        <Badge tone={todo.priority === "高" ? "danger" : todo.priority === "中" ? "warning" : "neutral"}>
+                          {todo.priority ?? "普通"}
+                        </Badge>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </Card>
+          </div>
+        </>
+      ) : (
+        <Card title="投顾概览">
+          <EmptyState text="当前账号无投顾权限，投顾概览不可用" />
+        </Card>
+      )}
+
+      {risk ? (
+        <div className="grid gap-4 lg:grid-cols-2">
+          <Card
+            title="最新风险预警"
+            actions={
+              <Button size="sm" variant="ghost" onClick={() => onNavigate("risk")}>
+                进入风控
+              </Button>
+            }
+          >
+            {alerts.length === 0 ? (
+              <EmptyState text="暂无风险预警" />
+            ) : (
+              <ul className="divide-y divide-slate-100">
+                {alerts.map((alert) => (
+                  <li key={alert.id} className="flex items-center justify-between gap-3 py-3 text-sm">
+                    <div className="flex items-center gap-2">
+                      <AlertTriangle className="h-4 w-4 text-amber-500" />
+                      <span className="text-slate-900">{alert.alert_type}</span>
+                      <span className="text-xs text-slate-500">客户 #{alert.customer_id}</span>
+                    </div>
+                    <Badge tone={alert.alert_level === "高" ? "danger" : alert.alert_level === "中" ? "warning" : "neutral"}>
+                      {alert.alert_level}
+                    </Badge>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </Card>
+
+          <Card
+            title="待处理工单"
+            actions={
+              <Button size="sm" variant="ghost" onClick={() => onNavigate("workorders")}>
+                进入工单
+              </Button>
+            }
+          >
+            {orders.length === 0 ? (
+              <EmptyState text="暂无待处理工单" />
+            ) : (
+              <ul className="divide-y divide-slate-100">
+                {orders.map((order) => (
+                  <li key={order.id} className="flex items-center justify-between gap-3 py-3 text-sm">
+                    <div className="flex items-center gap-2">
+                      <FileText className="h-4 w-4 text-indigo-500" />
+                      <span className="text-slate-900">{order.order_type}</span>
+                      <span className="text-xs text-slate-400">{order.work_order_no}</span>
+                    </div>
+                    <Badge tone={order.priority === "特急" ? "danger" : order.priority === "紧急" ? "warning" : "neutral"}>
+                      {order.priority}
+                    </Badge>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </Card>
+        </div>
+      ) : (
+        <Card title="风控概览">
+          <EmptyState text="当前账号无风控权限，风控概览不可用" />
+        </Card>
+      )}
+
+      <Card title="快捷入口" description="常用系统与数据页面">
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+          <Link
+            href="/products"
+            className="group rounded-xl border border-slate-200 p-4 transition hover:border-indigo-500 hover:shadow-sm"
+          >
+            <BarChart3 className="h-5 w-5 text-indigo-600" />
+            <p className="mt-3 text-sm font-semibold">基金产品</p>
+            <p className="mt-1 text-xs leading-5 text-slate-500">查看在售基金与历史净值</p>
+          </Link>
+          <Link
+            href="/tools/nl2sql"
+            className="group rounded-xl border border-slate-200 p-4 transition hover:border-indigo-500 hover:shadow-sm"
+          >
+            <Activity className="h-5 w-5 text-indigo-600" />
+            <p className="mt-3 text-sm font-semibold">NL2SQL 查询</p>
+            <p className="mt-1 text-xs leading-5 text-slate-500">自然语言查询业务数据</p>
+          </Link>
+          <Link
+            href="/tools/knowledge"
+            className="group rounded-xl border border-slate-200 p-4 transition hover:border-indigo-500 hover:shadow-sm"
+          >
+            <FileText className="h-5 w-5 text-indigo-600" />
+            <p className="mt-3 text-sm font-semibold">知识库管理</p>
+            <p className="mt-1 text-xs leading-5 text-slate-500">维护 RAG 文档与检索数据</p>
+          </Link>
+          <button
+            onClick={() => onNavigate("customers")}
+            className="group rounded-xl border border-slate-200 p-4 text-left transition hover:border-indigo-500 hover:shadow-sm"
+          >
+            <Users className="h-5 w-5 text-indigo-600" />
+            <p className="mt-3 text-sm font-semibold">客户管理</p>
+            <p className="mt-1 text-xs leading-5 text-slate-500">查看名下客户与持仓诊断</p>
+          </button>
+        </div>
+        {!isAdvisor(user) && (
+          <p className="mt-4 flex items-center gap-2 text-xs text-amber-600">
+            <CheckCircle2 className="h-3.5 w-3.5" />
+            部分入口需要对应角色权限，无权限时会在目标模块给出提示
+          </p>
+        )}
+      </Card>
+    </div>
+  );
+}
diff --git a/frontend/components/admin/sections/risk.tsx b/frontend/components/admin/sections/risk.tsx
new file mode 100644
index 0000000..9b2cfe3
--- /dev/null
+++ b/frontend/components/admin/sections/risk.tsx
@@ -0,0 +1,278 @@
+"use client";
+
+import { ShieldAlert } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { adminApi, errMessage, type RiskAlert } from "@/lib/admin-api";
+import {
+  Badge,
+  Button,
+  Card,
+  EmptyState,
+  ErrorState,
+  LoadingBlock,
+  Modal,
+  Pagination,
+  Select,
+  StatCard,
+  TableWrap,
+  Td,
+  Th,
+  formatPercent,
+  formatTime,
+  statusTone,
+  useToast,
+} from "@/components/admin/ui";
+
+const STATUS_OPTIONS = [
+  { value: "", label: "全部状态" },
+  { value: "未处理", label: "未处理" },
+  { value: "已确认", label: "已确认" },
+  { value: "已排除", label: "已排除" },
+];
+
+type Action = "release" | "block" | "freeze";
+
+const ACTION_META: Record<
+  Action,
+  { label: string; tone: "primary" | "danger"; impact: string[]; confirmText: string }
+> = {
+  release: {
+    label: "放行",
+    tone: "primary",
+    confirmText: "确认放行",
+    impact: [
+      "该笔交易订单将完成落账并生成交易流水",
+      "预警状态变更为「已排除」",
+      "若客户余额不足，订单将转为失败",
+    ],
+  },
+  block: {
+    label: "拦截",
+    tone: "danger",
+    confirmText: "确认拦截",
+    impact: [
+      "该笔交易订单将作废",
+      "系统将向客户发送「交易被拦截」站内信",
+      "自动生成一张「可疑交易上报」工单",
+    ],
+  },
+  freeze: {
+    label: "冻结",
+    tone: "danger",
+    confirmText: "确认冻结",
+    impact: [
+      "该笔交易订单将作废",
+      "客户账号状态将变更为「冻结」",
+      "系统将向客户发送「账户已被冻结」站内信",
+      "自动生成一张「冻结复核」工单",
+    ],
+  },
+};
+
+export function RiskSection() {
+  const toast = useToast();
+  const [items, setItems] = useState<RiskAlert[]>([]);
+  const [total, setTotal] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  const [page, setPage] = useState(1);
+  const [status, setStatus] = useState("未处理");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [pending, setPending] = useState<{ alert: RiskAlert; action: Action } | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const result = await adminApi.alerts({ status: status || undefined, page, page_size: 10 });
+      setItems(result.items ?? []);
+      setTotal(result.total ?? 0);
+      setTotalPages(result.total_pages ?? 0);
+    } catch (e) {
+      setError(errMessage(e, "预警列表加载失败"));
+    } finally {
+      setLoading(false);
+    }
+  }, [status, page]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  async function confirmAction() {
+    if (!pending) return;
+    setSubmitting(true);
+    try {
+      const result = await adminApi.alertAction(pending.alert.id, pending.action);
+      const message =
+        typeof result?.message === "string" ? result.message : `${ACTION_META[pending.action].label}成功`;
+      toast(message);
+      setPending(null);
+      await load();
+    } catch (e) {
+      toast(errMessage(e, "处置失败"), "error");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  const highRisk = items.filter((item) => item.alert_level === "高").length;
+
+  return (
+    <>
+      <div className="grid gap-4 md:grid-cols-3">
+        <StatCard
+          icon={<ShieldAlert className="h-5 w-5" />}
+          label="当前预警"
+          value={total}
+          hint={status ? `筛选：${status}` : "全部状态"}
+        />
+        <StatCard
+          label="本页高风险"
+          value={highRisk}
+          hint={highRisk > 0 ? "需优先处置" : "暂无高风险预警"}
+          hintTone={highRisk > 0 ? "danger" : "muted"}
+        />
+        <StatCard label="待处置" value={status === "未处理" ? total : "--"} hint="放行 / 拦截 / 冻结" />
+      </div>
+
+      <Card
+        title="风险预警处置"
+        description="放行、拦截、冻结均为不可逆操作，执行前需二次确认"
+        bodyClassName="p-0"
+        className="mt-6"
+        actions={
+          <Select value={status} onChange={(event) => { setStatus(event.target.value); setPage(1); }}>
+            {STATUS_OPTIONS.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </Select>
+        }
+      >
+        {loading ? (
+          <LoadingBlock />
+        ) : error ? (
+          <ErrorState message={error} onRetry={() => void load()} />
+        ) : items.length === 0 ? (
+          <EmptyState text="没有符合条件的风险预警" />
+        ) : (
+          <>
+            <TableWrap>
+              <thead>
+                <tr>
+                  <Th>预警类型</Th>
+                  <Th>客户 / 订单</Th>
+                  <Th>触发详情</Th>
+                  <Th>级别</Th>
+                  <Th>置信度</Th>
+                  <Th>状态</Th>
+                  <Th>创建时间</Th>
+                  <Th className="text-right">处置</Th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-50">
+                {items.map((alert) => {
+                  const done = alert.status !== "未处理";
+                  return (
+                    <tr key={alert.id} className="transition-colors hover:bg-slate-50">
+                      <Td className="font-medium text-slate-900">{alert.alert_type}</Td>
+                      <Td className="text-xs text-slate-500">
+                        客户 #{alert.customer_id}
+                        <br />
+                        订单 #{alert.order_id}
+                      </Td>
+                      <Td className="max-w-[220px] truncate" title={alert.trigger_detail ?? ""}>
+                        {alert.trigger_detail ?? "--"}
+                      </Td>
+                      <Td>
+                        <Badge
+                          tone={
+                            alert.alert_level === "高" ? "danger" : alert.alert_level === "中" ? "warning" : "neutral"
+                          }
+                        >
+                          {alert.alert_level}
+                        </Badge>
+                      </Td>
+                      <Td>{alert.confidence !== null ? formatPercent(alert.confidence, 0) : "--"}</Td>
+                      <Td>
+                        <Badge tone={statusTone(alert.status)}>{alert.status}</Badge>
+                      </Td>
+                      <Td className="text-xs text-slate-500">{formatTime(alert.create_time)}</Td>
+                      <Td>
+                        {done ? (
+                          <span className="block text-right text-xs text-slate-400">
+                            已处置 · {alert.handle_result ?? "--"}
+                          </span>
+                        ) : (
+                          <div className="flex justify-end gap-2">
+                            {(["release", "block", "freeze"] as Action[]).map((action) => (
+                              <Button
+                                key={action}
+                                size="sm"
+                                variant={ACTION_META[action].tone}
+                                onClick={() => setPending({ alert, action })}
+                              >
+                                {ACTION_META[action].label}
+                              </Button>
+                            ))}
+                          </div>
+                        )}
+                      </Td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </TableWrap>
+            <Pagination page={page} totalPages={totalPages} total={total} onChange={setPage} />
+          </>
+        )}
+      </Card>
+
+      <Modal
+        open={!!pending}
+        title={pending ? `${ACTION_META[pending.action].label}确认` : ""}
+        onClose={() => (submitting ? undefined : setPending(null))}
+        footer={
+          <>
+            <Button onClick={() => setPending(null)} disabled={submitting}>
+              取消
+            </Button>
+            <Button
+              variant={pending ? ACTION_META[pending.action].tone : "primary"}
+              loading={submitting}
+              onClick={() => void confirmAction()}
+            >
+              {pending ? ACTION_META[pending.action].confirmText : "确认"}
+            </Button>
+          </>
+        }
+      >
+        {pending && (
+          <div className="space-y-3">
+            <p className="text-slate-900">
+              你即将对 <span className="font-semibold">预警 #{pending.alert.id}</span> 执行
+              <span className="font-semibold">「{ACTION_META[pending.action].label}」</span> 操作。
+            </p>
+            <div className="rounded-lg bg-slate-50 p-3 text-xs text-slate-600">
+              <p>预警类型：{pending.alert.alert_type}</p>
+              <p>风险级别：{pending.alert.alert_level}</p>
+              <p>关联客户：#{pending.alert.customer_id}</p>
+              <p>关联订单：#{pending.alert.order_id}</p>
+            </div>
+            <div>
+              <p className="mb-1 text-xs font-medium text-slate-500">该操作将产生以下影响：</p>
+              <ul className="space-y-1 text-xs leading-5 text-amber-700">
+                {ACTION_META[pending.action].impact.map((line) => (
+                  <li key={line}>• {line}</li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        )}
+      </Modal>
+    </>
+  );
+}
diff --git a/frontend/components/admin/sections/todos.tsx b/frontend/components/admin/sections/todos.tsx
new file mode 100644
index 0000000..9eba477
--- /dev/null
+++ b/frontend/components/admin/sections/todos.tsx
@@ -0,0 +1,179 @@
+"use client";
+
+import { ListChecks } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { adminApi, errMessage, type TodoItem } from "@/lib/admin-api";
+import {
+  Badge,
+  Button,
+  Card,
+  EmptyState,
+  ErrorState,
+  LoadingBlock,
+  Pagination,
+  SearchInput,
+  Select,
+  TableWrap,
+  Td,
+  Th,
+  formatTime,
+  isOverdue,
+  statusTone,
+  useToast,
+} from "@/components/admin/ui";
+
+const STATUS_OPTIONS = [
+  { value: "", label: "全部状态" },
+  { value: "待处理", label: "待处理" },
+  { value: "处理中", label: "处理中" },
+  { value: "已完成", label: "已完成" },
+];
+
+const PRIORITY_TONE = { 高: "danger", 中: "warning", 低: "neutral" } as const;
+
+export function TodosSection({ onOpenCustomer }: { onOpenCustomer?: (customerId: number) => void }) {
+  const toast = useToast();
+  const [items, setItems] = useState<TodoItem[]>([]);
+  const [total, setTotal] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  const [page, setPage] = useState(1);
+  const [status, setStatus] = useState("待处理");
+  const [type, setType] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [busyId, setBusyId] = useState<number | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const result = await adminApi.todos({ status: status || undefined, todo_type: type || undefined, page, page_size: 10 });
+      setItems(result.items ?? []);
+      setTotal(result.total ?? 0);
+      setTotalPages(result.total_pages ?? 0);
+    } catch (e) {
+      setError(errMessage(e, "待办加载失败"));
+    } finally {
+      setLoading(false);
+    }
+  }, [status, type, page]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  async function handle(todo: TodoItem, action: "process" | "done") {
+    setBusyId(todo.id);
+    try {
+      await adminApi.handleTodo(todo.id, action);
+      toast(action === "done" ? "待办已标记完成" : "待办已开始处理");
+      await load();
+    } catch (e) {
+      toast(errMessage(e, "操作失败"), "error");
+    } finally {
+      setBusyId(null);
+    }
+  }
+
+  return (
+    <Card
+      title="我的待办"
+      description="投顾待办事项，支持按状态筛选和直接处理"
+      bodyClassName="p-0"
+    >
+      <div className="flex flex-wrap items-center gap-3 border-b border-slate-100 p-4">
+        <Select value={status} onChange={(event) => { setStatus(event.target.value); setPage(1); }}>
+          {STATUS_OPTIONS.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </Select>
+        <SearchInput
+          className="w-56"
+          placeholder="按待办类型筛选"
+          value={type}
+          onChange={(event) => { setType(event.target.value); setPage(1); }}
+        />
+        <Button size="sm" className="ml-auto" onClick={() => void load()} loading={loading}>
+          刷新
+        </Button>
+      </div>
+
+      {loading ? (
+        <LoadingBlock />
+      ) : error ? (
+        <ErrorState message={error} onRetry={() => void load()} />
+      ) : items.length === 0 ? (
+        <EmptyState text="没有符合条件的待办" />
+      ) : (
+        <>
+          <TableWrap>
+            <thead>
+              <tr>
+                <Th>待办类型</Th>
+                <Th>关联客户</Th>
+                <Th>优先级</Th>
+                <Th>状态</Th>
+                <Th>截止时间</Th>
+                <Th className="text-right">操作</Th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-50">
+              {items.map((todo) => (
+                <tr key={todo.id} className="transition-colors hover:bg-slate-50">
+                  <Td className="font-medium text-slate-900">{todo.todo_type}</Td>
+                  <Td>
+                    {todo.customer_id ? (
+                      <button
+                        onClick={() => onOpenCustomer?.(todo.customer_id as number)}
+                        className="text-indigo-600 hover:underline"
+                      >
+                        客户 #{todo.customer_id}
+                      </button>
+                    ) : (
+                      <span className="text-slate-400">--</span>
+                    )}
+                  </Td>
+                  <Td>
+                    <Badge tone={PRIORITY_TONE[todo.priority as keyof typeof PRIORITY_TONE] ?? "neutral"}>
+                      {todo.priority ?? "普通"}
+                    </Badge>
+                  </Td>
+                  <Td>
+                    <Badge tone={statusTone(todo.status)}>{todo.status}</Badge>
+                  </Td>
+                  <Td className={isOverdue(todo.due_at) && todo.status !== "已完成" ? "text-red-500" : "text-slate-500"}>
+                    {formatTime(todo.due_at)}
+                    {isOverdue(todo.due_at) && todo.status !== "已完成" && " · 已逾期"}
+                  </Td>
+                  <Td>
+                    <div className="flex justify-end gap-2">
+                      {todo.status === "待处理" && (
+                        <Button size="sm" loading={busyId === todo.id} onClick={() => void handle(todo, "process")}>
+                          开始处理
+                        </Button>
+                      )}
+                      {todo.status !== "已完成" && (
+                        <Button
+                          size="sm"
+                          variant="primary"
+                          loading={busyId === todo.id}
+                          onClick={() => void handle(todo, "done")}
+                        >
+                          完成
+                        </Button>
+                      )}
+                      {todo.status === "已完成" && <ListChecks className="h-4 w-4 text-emerald-500" />}
+                    </div>
+                  </Td>
+                </tr>
+              ))}
+            </tbody>
+          </TableWrap>
+          <Pagination page={page} totalPages={totalPages} total={total} onChange={setPage} />
+        </>
+      )}
+    </Card>
+  );
+}
diff --git a/frontend/components/admin/sections/visits.tsx b/frontend/components/admin/sections/visits.tsx
new file mode 100644
index 0000000..52a3ddb
--- /dev/null
+++ b/frontend/components/admin/sections/visits.tsx
@@ -0,0 +1,229 @@
+"use client";
+
+import { MessageSquareQuote, PhoneCall } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { adminApi, errMessage, type Customer, type TalkTemplate, type Visit } from "@/lib/admin-api";
+import {
+  Badge,
+  Button,
+  Card,
+  EmptyState,
+  ErrorState,
+  LoadingBlock,
+  Pagination,
+  Select,
+  TextInput,
+  formatTime,
+  useToast,
+} from "@/components/admin/ui";
+
+const VISIT_TYPES = ["电话回访", "线上沟通", "线下拜访"];
+
+export function VisitsSection() {
+  const toast = useToast();
+  const [customers, setCustomers] = useState<Customer[]>([]);
+  const [items, setItems] = useState<Visit[]>([]);
+  const [total, setTotal] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  const [page, setPage] = useState(1);
+  const [templates, setTemplates] = useState<TalkTemplate[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  const [customerId, setCustomerId] = useState("");
+  const [visitType, setVisitType] = useState(VISIT_TYPES[0]);
+  const [visitTime, setVisitTime] = useState("");
+  const [summary, setSummary] = useState("");
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const result = await adminApi.visits({ page, page_size: 10 });
+      setItems(result.items ?? []);
+      setTotal(result.total ?? 0);
+      setTotalPages(result.total_pages ?? 0);
+    } catch (e) {
+      setError(errMessage(e, "回访记录加载失败"));
+    } finally {
+      setLoading(false);
+    }
+  }, [page]);
+
+  useEffect(() => {
+    void (async () => {
+      try {
+        const [customerPage, templateList] = await Promise.all([
+          adminApi.customers({ page: 1, page_size: 100 }),
+          adminApi.talkTemplates().catch(() => []),
+        ]);
+        setCustomers(customerPage.items ?? []);
+        setTemplates(templateList ?? []);
+        if (!customerId && customerPage.items?.length) {
+          setCustomerId(String(customerPage.items[0].customer_id));
+        }
+      } catch {
+        /* 客户列表失败时用户仍可手动选择 */
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  function resetForm() {
+    setEditingId(null);
+    setVisitType(VISIT_TYPES[0]);
+    setVisitTime("");
+    setSummary("");
+  }
+
+  async function submit() {
+    if (!customerId) {
+      toast("请先选择客户", "error");
+      return;
+    }
+    if (!visitTime) {
+      toast("请选择回访时间", "error");
+      return;
+    }
+    setBusy(true);
+    try {
+      const body = {
+        customer_id: Number(customerId),
+        visit_type: visitType,
+        visit_time: new Date(visitTime).toISOString(),
+        summary: summary || undefined,
+      };
+      if (editingId) await adminApi.updateVisit(editingId, body);
+      else await adminApi.createVisit(body);
+      toast(editingId ? "回访已更新" : "回访已新增");
+      resetForm();
+      await load();
+    } catch (e) {
+      toast(errMessage(e, "保存失败"), "error");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="grid gap-4 lg:grid-cols-2">
+      <Card title={editingId ? "编辑回访" : "新增回访"} description="人工回访仅留痕，不触发客户记忆更新">
+        <div className="space-y-4">
+          <div>
+            <label className="mb-1 block text-xs text-slate-500">客户</label>
+            <Select value={customerId} onChange={(event) => setCustomerId(event.target.value)} className="w-full">
+              <option value="">请选择客户</option>
+              {customers.map((customer) => (
+                <option key={customer.customer_id} value={customer.customer_id}>
+                  {customer.real_name ?? "匿名客户"}（#{customer.customer_id}）
+                </option>
+              ))}
+            </Select>
+          </div>
+          <div>
+            <label className="mb-1 block text-xs text-slate-500">回访类型</label>
+            <Select value={visitType} onChange={(event) => setVisitType(event.target.value)} className="w-full">
+              {VISIT_TYPES.map((type) => (
+                <option key={type} value={type}>
+                  {type}
+                </option>
+              ))}
+            </Select>
+          </div>
+          <div>
+            <label className="mb-1 block text-xs text-slate-500">回访时间</label>
+            <TextInput type="datetime-local" value={visitTime} onChange={(event) => setVisitTime(event.target.value)} />
+          </div>
+          <div>
+            <label className="mb-1 block text-xs text-slate-500">回访摘要</label>
+            <textarea
+              value={summary}
+              onChange={(event) => setSummary(event.target.value)}
+              className="min-h-32 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm leading-6 text-slate-700 transition-colors focus:border-indigo-400 focus:outline-none"
+              placeholder="记录沟通要点"
+            />
+          </div>
+          <div className="flex gap-3">
+            <Button variant="primary" loading={busy} onClick={() => void submit()}>
+              {editingId ? "保存修改" : "保存回访"}
+            </Button>
+            {editingId && (
+              <Button onClick={resetForm} disabled={busy}>
+                取消编辑
+              </Button>
+            )}
+          </div>
+        </div>
+      </Card>
+
+      <div className="space-y-4">
+        <Card title="历史回访" description={`共 ${total} 条记录`} bodyClassName="p-0">
+          {loading ? (
+            <LoadingBlock />
+          ) : error ? (
+            <ErrorState message={error} onRetry={() => void load()} />
+          ) : items.length === 0 ? (
+            <EmptyState text="暂无回访记录" />
+          ) : (
+            <>
+              <ul className="max-h-[420px] divide-y divide-slate-100 overflow-y-auto">
+                {items.map((visit) => (
+                  <li key={visit.id} className="px-5 py-4">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="min-w-0">
+                        <p className="flex items-center gap-2 text-sm font-medium text-slate-900">
+                          <PhoneCall className="h-3.5 w-3.5 text-indigo-500" />
+                          {visit.visit_type}
+                          <Badge tone="neutral">客户 #{visit.customer_id}</Badge>
+                        </p>
+                        <p className="mt-1 text-xs text-slate-400">{formatTime(visit.visit_time)}</p>
+                        <p className="mt-2 text-sm leading-6 text-slate-600">{visit.summary ?? "暂无摘要"}</p>
+                      </div>
+                      <Button
+                        size="sm"
+                        onClick={() => {
+                          setEditingId(visit.id);
+                          setCustomerId(String(visit.customer_id));
+                          setVisitType(visit.visit_type ?? VISIT_TYPES[0]);
+                          setVisitTime(visit.visit_time?.slice(0, 16) ?? "");
+                          setSummary(visit.summary ?? "");
+                        }}
+                      >
+                        编辑
+                      </Button>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+              <Pagination page={page} totalPages={totalPages} total={total} onChange={setPage} />
+            </>
+          )}
+        </Card>
+
+        <Card title="合规话术库" description="仅作参考，正式发送走草稿流程">
+          {templates.length === 0 ? (
+            <EmptyState text="暂无话术模板" />
+          ) : (
+            <ul className="space-y-3">
+              {templates.map((template) => (
+                <li key={template.scene} className="rounded-lg bg-slate-50 p-3">
+                  <p className="flex items-center gap-2 text-sm font-medium text-slate-900">
+                    <MessageSquareQuote className="h-3.5 w-3.5 text-indigo-500" />
+                    {template.scene}
+                  </p>
+                  <p className="mt-1 text-xs leading-6 text-slate-600">{template.content}</p>
+                </li>
+              ))}
+            </ul>
+          )}
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/admin/sections/workorders.tsx b/frontend/components/admin/sections/workorders.tsx
new file mode 100644
index 0000000..094e87d
--- /dev/null
+++ b/frontend/components/admin/sections/workorders.tsx
@@ -0,0 +1,282 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { adminApi, errMessage, type WorkOrder } from "@/lib/admin-api";
+import {
+  Badge,
+  Button,
+  Card,
+  EmptyState,
+  ErrorState,
+  LoadingBlock,
+  Modal,
+  Pagination,
+  Select,
+  StatCard,
+  TableWrap,
+  Td,
+  TextInput,
+  Th,
+  formatTime,
+  statusTone,
+  useToast,
+} from "@/components/admin/ui";
+
+const STATUS_OPTIONS = [
+  { value: "", label: "全部状态" },
+  { value: "待处理", label: "待处理" },
+  { value: "处理中", label: "处理中" },
+  { value: "待审核", label: "待审核" },
+  { value: "已完成", label: "已完成" },
+  { value: "已驳回", label: "已驳回" },
+];
+
+export function WorkOrdersSection() {
+  const toast = useToast();
+  const [items, setItems] = useState<WorkOrder[]>([]);
+  const [total, setTotal] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  const [page, setPage] = useState(1);
+  const [status, setStatus] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [busyId, setBusyId] = useState<number | null>(null);
+  const [reviewing, setReviewing] = useState<WorkOrder | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const result = await adminApi.workOrders({ status: status || undefined, page, page_size: 10 });
+      setItems(result.items ?? []);
+      setTotal(result.total ?? 0);
+      setTotalPages(result.total_pages ?? 0);
+    } catch (e) {
+      setError(errMessage(e, "工单列表加载失败"));
+    } finally {
+      setLoading(false);
+    }
+  }, [status, page]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  async function run(id: number, task: () => Promise<unknown>, message: string) {
+    setBusyId(id);
+    try {
+      await task();
+      toast(message);
+      await load();
+    } catch (e) {
+      toast(errMessage(e, "操作失败"), "error");
+    } finally {
+      setBusyId(null);
+    }
+  }
+
+  const pending = items.filter((item) => item.status === "待处理").length;
+  const reviewingCount = items.filter((item) => item.status === "待审核").length;
+
+  return (
+    <>
+      <div className="grid gap-4 md:grid-cols-3">
+        <StatCard label="工单总数" value={total} hint={status ? `筛选：${status}` : "全部状态"} />
+        <StatCard label="本页待认领" value={pending} hint="待处理状态" />
+        <StatCard
+          label="本页待复核"
+          value={reviewingCount}
+          hint={reviewingCount > 0 ? "等待复核结论" : "暂无待复核工单"}
+        />
+      </div>
+
+      <Card
+        title="工单处理"
+        description="认领 → 提交审核 → 复核，状态由后端流转控制"
+        bodyClassName="p-0"
+        className="mt-6"
+        actions={
+          <Select value={status} onChange={(event) => { setStatus(event.target.value); setPage(1); }}>
+            {STATUS_OPTIONS.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </Select>
+        }
+      >
+        {loading ? (
+          <LoadingBlock />
+        ) : error ? (
+          <ErrorState message={error} onRetry={() => void load()} />
+        ) : items.length === 0 ? (
+          <EmptyState text="没有符合条件的工单" />
+        ) : (
+          <>
+            <TableWrap>
+              <thead>
+                <tr>
+                  <Th>工单号</Th>
+                  <Th>类型</Th>
+                  <Th>客户</Th>
+                  <Th>当前节点</Th>
+                  <Th>优先级</Th>
+                  <Th>状态</Th>
+                  <Th>创建时间</Th>
+                  <Th className="text-right">操作</Th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-50">
+                {items.map((order) => (
+                  <tr key={order.id} className="transition-colors hover:bg-slate-50">
+                    <Td className="font-medium text-slate-900">{order.work_order_no}</Td>
+                    <Td>
+                      {order.order_type}
+                      {order.sub_type && <span className="text-xs text-slate-400"> · {order.sub_type}</span>}
+                    </Td>
+                    <Td className="text-slate-500">#{order.customer_id ?? "--"}</Td>
+                    <Td>{order.current_node ?? "--"}</Td>
+                    <Td>
+                      <Badge
+                        tone={
+                          order.priority === "特急" ? "danger" : order.priority === "紧急" ? "warning" : "neutral"
+                        }
+                      >
+                        {order.priority}
+                      </Badge>
+                    </Td>
+                    <Td>
+                      <Badge tone={statusTone(order.status)}>{order.status}</Badge>
+                    </Td>
+                    <Td className="text-xs text-slate-500">{formatTime(order.create_time)}</Td>
+                    <Td>
+                      <div className="flex justify-end gap-2">
+                        {order.status === "待处理" && (
+                          <Button
+                            size="sm"
+                            variant="primary"
+                            loading={busyId === order.id}
+                            onClick={() => void run(order.id, () => adminApi.claimWorkOrder(order.id), "工单已认领")}
+                          >
+                            认领
+                          </Button>
+                        )}
+                        {order.status === "处理中" && (
+                          <Button
+                            size="sm"
+                            variant="primary"
+                            loading={busyId === order.id}
+                            onClick={() =>
+                              void run(order.id, () => adminApi.submitWorkOrder(order.id), "已提交审核")
+                            }
+                          >
+                            提交审核
+                          </Button>
+                        )}
+                        {order.status === "待审核" && (
+                          <Button size="sm" variant="primary" onClick={() => setReviewing(order)}>
+                            复核
+                          </Button>
+                        )}
+                        {(order.status === "已完成" || order.status === "已驳回") && (
+                          <span className="text-xs text-slate-400">已归档</span>
+                        )}
+                      </div>
+                    </Td>
+                  </tr>
+                ))}
+              </tbody>
+            </TableWrap>
+            <Pagination page={page} totalPages={totalPages} total={total} onChange={setPage} />
+          </>
+        )}
+      </Card>
+
+      {reviewing && (
+        <ReviewModal
+          order={reviewing}
+          onClose={() => setReviewing(null)}
+          onDone={async (approve, comment) => {
+            await run(
+              reviewing.id,
+              () => adminApi.reviewWorkOrder(reviewing.id, approve, comment),
+              approve ? "复核通过" : "已驳回"
+            );
+            setReviewing(null);
+          }}
+        />
+      )}
+    </>
+  );
+}
+
+function ReviewModal({
+  order,
+  onClose,
+  onDone,
+}: {
+  order: WorkOrder;
+  onClose: () => void;
+  onDone: (approve: boolean, comment: string) => Promise<void>;
+}) {
+  const [comment, setComment] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  async function submit(approve: boolean) {
+    setSubmitting(true);
+    try {
+      await onDone(approve, comment);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <Modal
+      open
+      title={`复核工单 ${order.work_order_no}`}
+      onClose={onClose}
+      footer={
+        <>
+          <Button onClick={onClose} disabled={submitting}>
+            取消
+          </Button>
+          <Button variant="danger" loading={submitting} onClick={() => void submit(false)}>
+            驳回
+          </Button>
+          <Button variant="primary" loading={submitting} onClick={() => void submit(true)}>
+            通过
+          </Button>
+        </>
+      }
+    >
+      <div className="space-y-4">
+        <div className="rounded-lg bg-slate-50 p-3 text-xs text-slate-600">
+          <p>工单类型：{order.order_type}</p>
+          <p>关联客户：#{order.customer_id ?? "--"}</p>
+          <p>优先级：{order.priority}</p>
+          <p>当前节点：{order.current_node ?? "--"}</p>
+        </div>
+        {order.biz_content && (
+          <div className="rounded-lg border border-slate-200 p-3 text-xs text-slate-600">
+            <p className="mb-1 font-medium text-slate-500">业务内容</p>
+            <pre className="whitespace-pre-wrap break-all text-[11px] leading-5 text-slate-500">
+              {JSON.stringify(order.biz_content, null, 2)}
+            </pre>
+          </div>
+        )}
+        <div>
+          <label className="mb-1 block text-xs text-slate-500">复核意见（可选）</label>
+          <TextInput
+            value={comment}
+            onChange={(event) => setComment(event.target.value)}
+            placeholder="填写复核说明"
+          />
+        </div>
+        {order.handler_id !== null && (
+          <p className="text-xs text-amber-600">提示：若复核人与处理人为同一人，系统仅提示不阻断。</p>
+        )}
+      </div>
+    </Modal>
+  );
+}
diff --git a/frontend/components/admin/shell.tsx b/frontend/components/admin/shell.tsx
new file mode 100644
index 0000000..3a9bcc9
--- /dev/null
+++ b/frontend/components/admin/shell.tsx
@@ -0,0 +1,274 @@
+"use client";
+
+import Link from "next/link";
+import {
+  Bell,
+  ChevronDown,
+  Database,
+  FileText,
+  LayoutDashboard,
+  ListChecks,
+  LogOut,
+  PanelLeftClose,
+  PanelLeftOpen,
+  PhoneCall,
+  ShieldAlert,
+  Users,
+  X,
+  FileSignature,
+} from "lucide-react";
+import { useState, type ReactNode } from "react";
+import { clearToken, getRoleLabel } from "@/lib/auth";
+import { canUseSection, isAdmin, isStaff, type WorkspaceSection } from "@/lib/roles";
+import type { UserPayload } from "@/types/api";
+import { Badge, cn } from "@/components/admin/ui";
+
+export interface ShellNotification {
+  id: string;
+  title: string;
+  body: string;
+  time: string;
+  tone: "alert" | "info" | "check";
+  section: WorkspaceSection;
+}
+
+const NAV_ITEMS: {
+  section: WorkspaceSection;
+  label: string;
+  icon: typeof Users;
+  requires: "staff" | "advisor" | "risk" | "admin";
+}[] = [
+  { section: "overview", label: "工作台概览", icon: LayoutDashboard, requires: "staff" },
+  { section: "todos", label: "我的待办", icon: ListChecks, requires: "advisor" },
+  { section: "customers", label: "客户管理", icon: Users, requires: "advisor" },
+  { section: "drafts", label: "投顾草稿", icon: FileSignature, requires: "advisor" },
+  { section: "visits", label: "客户回访", icon: PhoneCall, requires: "advisor" },
+  { section: "risk", label: "风险预警", icon: ShieldAlert, requires: "risk" },
+  { section: "workorders", label: "工单处理", icon: FileText, requires: "risk" },
+  { section: "funds", label: "基金数据", icon: Database, requires: "staff" },
+];
+
+const REQUIREMENT_TEXT: Record<string, string> = {
+  staff: "仅员工账号可用",
+  advisor: "需要投顾权限",
+  risk: "需要风控权限",
+  admin: "需要管理员权限",
+};
+
+export function AdminShell({
+  user,
+  section,
+  onSectionChange,
+  title,
+  subtitle,
+  notifications = [],
+  children,
+}: {
+  user: UserPayload;
+  section: WorkspaceSection;
+  onSectionChange: (section: WorkspaceSection) => void;
+  title: string;
+  subtitle: string;
+  notifications?: ShellNotification[];
+  children: ReactNode;
+}) {
+  const [collapsed, setCollapsed] = useState(false);
+  const [showNotifications, setShowNotifications] = useState(false);
+
+  const roleLabel = isAdmin(user) ? "管理员" : getRoleLabel(user.employee_role);
+  const accessible = isStaff(user);
+
+  return (
+    <div className="min-h-screen bg-slate-50 text-slate-900">
+      <aside
+        className={cn(
+          "fixed inset-y-0 left-0 z-40 flex flex-col bg-slate-950 text-white transition-all duration-200",
+          collapsed ? "w-16" : "w-56"
+        )}
+      >
+        <div className={cn("flex items-center gap-3 px-5 py-6", collapsed && "justify-center px-3")}>
+          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-500">
+            <LayoutDashboard className="h-5 w-5" />
+          </div>
+          {!collapsed && (
+            <div className="min-w-0">
+              <p className="truncate text-sm font-semibold">华夏基金</p>
+              <p className="truncate text-xs text-slate-400">统一员工工作台</p>
+            </div>
+          )}
+        </div>
+
+        <nav className="flex-1 space-y-1 px-3">
+          {NAV_ITEMS.map((item) => {
+            const allowed = canUseSection(user, item.section) && accessible;
+            const active = section === item.section;
+            return (
+              <button
+                key={item.section}
+                onClick={() => onSectionChange(item.section)}
+                title={allowed ? item.label : `${item.label}（${REQUIREMENT_TEXT[item.requires]}）`}
+                className={cn(
+                  "flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm transition-colors",
+                  collapsed && "justify-center px-0",
+                  active
+                    ? "bg-white/10 text-white"
+                    : allowed
+                      ? "text-slate-400 hover:bg-white/5 hover:text-white"
+                      : "text-slate-600 hover:bg-white/5"
+                )}
+              >
+                <item.icon className="h-[18px] w-[18px] shrink-0" />
+                {!collapsed && <span className="truncate">{item.label}</span>}
+                {!collapsed && !allowed && (
+                  <span className="ml-auto rounded bg-slate-800 px-1.5 py-0.5 text-[10px] text-slate-400">
+                    无权限
+                  </span>
+                )}
+              </button>
+            );
+          })}
+        </nav>
+
+        <div className={cn("border-t border-white/10 p-4", collapsed && "px-2")}>
+          <Link
+            href="/"
+            className={cn(
+              "mb-3 block text-xs text-slate-400 hover:text-white",
+              collapsed && "text-center"
+            )}
+          >
+            返回官网
+          </Link>
+          <button
+            onClick={() => {
+              clearToken();
+              window.location.href = "/login";
+            }}
+            className={cn(
+              "flex items-center gap-2 text-sm text-slate-300 transition-colors hover:text-white",
+              collapsed && "justify-center w-full"
+            )}
+          >
+            <LogOut className="h-4 w-4 shrink-0" />
+            {!collapsed && "退出登录"}
+          </button>
+        </div>
+      </aside>
+
+      <div
+        className={cn(
+          "min-h-screen transition-all duration-200",
+          collapsed ? "ml-16" : "ml-56"
+        )}
+      >
+        <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-slate-200 bg-white px-6">
+          <div className="flex items-center gap-3">
+            <button
+              onClick={() => setCollapsed(!collapsed)}
+              aria-label={collapsed ? "展开侧边栏" : "收起侧边栏"}
+              className="rounded-lg p-2 text-slate-500 transition-colors hover:bg-slate-100"
+            >
+              {collapsed ? <PanelLeftOpen className="h-5 w-5" /> : <PanelLeftClose className="h-5 w-5" />}
+            </button>
+            <div>
+              <p className="text-sm font-semibold text-slate-800">{title}</p>
+              <p className="text-xs text-slate-500">{subtitle}</p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <div className="relative">
+              <button
+                onClick={() => setShowNotifications(!showNotifications)}
+                aria-label="通知与提醒"
+                className="relative rounded-lg p-2 text-slate-500 transition-colors hover:bg-slate-100"
+              >
+                <Bell className="h-5 w-5" />
+                {notifications.length > 0 && (
+                  <span className="absolute right-1 top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-medium text-white">
+                    {notifications.length > 99 ? "99+" : notifications.length}
+                  </span>
+                )}
+              </button>
+
+              {showNotifications && (
+                <div className="absolute right-0 top-full mt-2 w-80 rounded-xl border border-slate-200 bg-white shadow-lg z-50">
+                  <div className="flex items-center justify-between border-b border-slate-100 px-4 py-3">
+                    <span className="text-sm font-semibold text-slate-900">通知与提醒</span>
+                    <button
+                      onClick={() => setShowNotifications(false)}
+                      aria-label="关闭通知"
+                      className="rounded p-1 text-slate-400 transition-colors hover:bg-slate-100"
+                    >
+                      <X className="h-3.5 w-3.5" />
+                    </button>
+                  </div>
+                  {notifications.length === 0 ? (
+                    <p className="px-4 py-8 text-center text-sm text-slate-400">暂无待处理提醒</p>
+                  ) : (
+                    <>
+                      <ul className="max-h-80 divide-y divide-slate-50 overflow-y-auto">
+                        {notifications.map((item) => (
+                          <li key={item.id}>
+                            <button
+                              onClick={() => {
+                                onSectionChange(item.section);
+                                setShowNotifications(false);
+                              }}
+                              className="w-full px-4 py-3 text-left transition-colors hover:bg-slate-50"
+                            >
+                              <div className="flex items-start gap-2">
+                                <span
+                                  className={cn(
+                                    "mt-1.5 h-2 w-2 shrink-0 rounded-full",
+                                    item.tone === "alert" && "bg-amber-500",
+                                    item.tone === "info" && "bg-indigo-500",
+                                    item.tone === "check" && "bg-emerald-500"
+                                  )}
+                                />
+                                <div className="min-w-0 flex-1">
+                                  <p className="text-sm font-medium text-slate-900">{item.title}</p>
+                                  <p className="mt-0.5 text-xs leading-snug text-slate-500">{item.body}</p>
+                                  <p className="mt-1 text-xs text-slate-400">{item.time}</p>
+                                </div>
+                              </div>
+                            </button>
+                          </li>
+                        ))}
+                      </ul>
+                      <div className="border-t border-slate-100 px-4 py-2.5">
+                        <span className="text-xs text-slate-400">点击提醒可跳转到对应功能区</span>
+                      </div>
+                    </>
+                  )}
+                </div>
+              )}
+            </div>
+
+            <div className="flex items-center gap-2 border-l border-slate-200 pl-4">
+              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-indigo-50 text-sm font-medium text-indigo-600">
+                {(user.real_name ?? user.username ?? "员").slice(0, 1)}
+              </div>
+              <div className="hidden sm:block">
+                <p className="text-sm font-medium leading-tight text-slate-700">
+                  {user.real_name ?? user.username}
+                </p>
+                <p className="text-xs leading-tight text-slate-400">{roleLabel}</p>
+              </div>
+              <ChevronDown className="h-4 w-4 text-slate-400" />
+            </div>
+          </div>
+        </header>
+
+        <main className="mx-auto max-w-[1400px] p-6">
+          {!accessible && (
+            <div className="mb-6">
+              <Badge tone="danger">当前账号不是员工账号，部分功能不可用</Badge>
+            </div>
+          )}
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/admin/ui.tsx b/frontend/components/admin/ui.tsx
new file mode 100644
index 0000000..97db17b
--- /dev/null
+++ b/frontend/components/admin/ui.tsx
@@ -0,0 +1,479 @@
+"use client";
+
+import { CheckCircle2, Info, Loader2, Search, ShieldAlert, X, XCircle } from "lucide-react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ButtonHTMLAttributes,
+  type InputHTMLAttributes,
+  type ReactNode,
+  type SelectHTMLAttributes,
+} from "react";
+
+export function cn(...values: (string | false | null | undefined)[]) {
+  return values.filter(Boolean).join(" ");
+}
+
+/* ------------------------------------------------------------------ 卡片 */
+
+export function Card({
+  title,
+  description,
+  actions,
+  children,
+  className,
+  bodyClassName,
+}: {
+  title?: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  bodyClassName?: string;
+}) {
+  return (
+    <section className={cn("rounded-xl border border-slate-200 bg-white", className)}>
+      {(title || actions) && (
+        <header className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 px-5 py-4">
+          <div>
+            {title && <h2 className="text-sm font-semibold text-slate-900">{title}</h2>}
+            {description && <p className="mt-0.5 text-xs text-slate-400">{description}</p>}
+          </div>
+          {actions && <div className="flex flex-wrap items-center gap-2">{actions}</div>}
+        </header>
+      )}
+      <div className={bodyClassName ?? "p-5"}>{children}</div>
+    </section>
+  );
+}
+
+/* -------------------------------------------------------------- 统计卡片 */
+
+export function StatCard({
+  label,
+  value,
+  hint,
+  hintTone = "muted",
+  icon,
+}: {
+  label: string;
+  value: ReactNode;
+  hint?: ReactNode;
+  hintTone?: "muted" | "danger" | "success";
+  icon?: ReactNode;
+}) {
+  const hintColor =
+    hintTone === "danger" ? "text-red-500" : hintTone === "success" ? "text-emerald-600" : "text-slate-400";
+  return (
+    <div className="rounded-xl border border-slate-200 bg-white p-4">
+      {icon && <div className="text-indigo-600">{icon}</div>}
+      <p className={cn("text-sm text-slate-500", icon ? "mt-3" : undefined)}>{label}</p>
+      <p className="mt-1 text-2xl font-semibold text-slate-900">{value}</p>
+      {hint && <p className={cn("mt-1 text-xs", hintColor)}>{hint}</p>}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ 标签 */
+
+export type Tone = "neutral" | "info" | "success" | "warning" | "danger";
+
+const TONE_CLASS: Record<Tone, string> = {
+  neutral: "bg-slate-100 text-slate-600",
+  info: "bg-indigo-50 text-indigo-600",
+  success: "bg-emerald-50 text-emerald-600",
+  warning: "bg-amber-50 text-amber-600",
+  danger: "bg-red-50 text-red-600",
+};
+
+export function Badge({
+  children,
+  tone = "neutral",
+  className,
+}: {
+  children: ReactNode;
+  tone?: Tone;
+  className?: string;
+}) {
+  return (
+    <span
+      className={cn(
+        "inline-block whitespace-nowrap rounded-full px-2.5 py-1 text-xs font-medium",
+        TONE_CLASS[tone],
+        className
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+
+/** 业务状态 → 标签配色，避免各处散落 if-else。 */
+export function statusTone(value?: string | null): Tone {
+  switch (value) {
+    case "已签约":
+    case "sent":
+    case "已完成":
+    case "已排除":
+    case "已确认":
+      return "success";
+    case "已结束":
+    case "已作废":
+    case "失败":
+    case "discarded":
+      return "neutral";
+    case "待处理":
+    case "处理中":
+    case "未处理":
+    case "draft":
+    case "初审":
+      return "info";
+    case "高":
+    case "特急":
+    case "紧急":
+    case "冻结":
+      return "danger";
+    case "中":
+      return "warning";
+    default:
+      return "neutral";
+  }
+}
+
+/* ------------------------------------------------------------------ 按钮 */
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: "primary" | "secondary" | "danger" | "ghost";
+  size?: "sm" | "md";
+  loading?: boolean;
+};
+
+const BUTTON_VARIANT: Record<NonNullable<ButtonProps["variant"]>, string> = {
+  primary: "bg-indigo-600 text-white hover:bg-indigo-700 disabled:bg-indigo-300",
+  secondary: "border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 disabled:text-slate-300",
+  danger: "border border-red-200 bg-white text-red-600 hover:bg-red-50 disabled:text-red-300",
+  ghost: "text-slate-500 hover:bg-slate-100 disabled:text-slate-300",
+};
+
+export function Button({
+  variant = "secondary",
+  size = "md",
+  loading,
+  disabled,
+  className,
+  children,
+  ...rest
+}: ButtonProps) {
+  return (
+    <button
+      {...rest}
+      disabled={disabled || loading}
+      className={cn(
+        "inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors",
+        size === "sm" ? "px-3 py-1.5 text-xs" : "px-4 py-2.5 text-sm",
+        BUTTON_VARIANT[variant],
+        className
+      )}
+    >
+      {loading && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
+      {children}
+    </button>
+  );
+}
+
+/* ------------------------------------------------------------ 表单控件 */
+
+export function SearchInput({
+  className,
+  ...rest
+}: InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <div className={cn("relative", className)}>
+      <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
+      <input
+        {...rest}
+        className="w-full rounded-lg border border-slate-200 bg-white py-2 pl-10 pr-4 text-sm text-slate-700 transition-colors placeholder:text-slate-400 focus:border-indigo-400 focus:outline-none"
+      />
+    </div>
+  );
+}
+
+export function Select({
+  className,
+  children,
+  ...rest
+}: SelectHTMLAttributes<HTMLSelectElement>) {
+  return (
+    <select
+      {...rest}
+      className={cn(
+        "rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 transition-colors focus:border-indigo-400 focus:outline-none",
+        className
+      )}
+    >
+      {children}
+    </select>
+  );
+}
+
+export function TextInput({ className, ...rest }: InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <input
+      {...rest}
+      className={cn(
+        "w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 transition-colors placeholder:text-slate-400 focus:border-indigo-400 focus:outline-none",
+        className
+      )}
+    />
+  );
+}
+
+/* ------------------------------------------------------------------ 表格 */
+
+export function TableWrap({ children }: { children: ReactNode }) {
+  return (
+    <div className="overflow-x-auto rounded-xl border border-slate-200 bg-white">
+      <table className="w-full min-w-[640px] border-collapse">{children}</table>
+    </div>
+  );
+}
+
+export function Th({ children, className }: { children?: ReactNode; className?: string }) {
+  return (
+    <th
+      className={cn(
+        "whitespace-nowrap bg-slate-50 px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-slate-500",
+        className
+      )}
+    >
+      {children}
+    </th>
+  );
+}
+
+export function Td({
+  children,
+  className,
+  title,
+}: {
+  children?: ReactNode;
+  className?: string;
+  title?: string;
+}) {
+  return (
+    <td title={title} className={cn("px-4 py-3 text-sm text-slate-700", className)}>
+      {children}
+    </td>
+  );
+}
+
+/* ------------------------------------------------------------------ 分页 */
+
+export function Pagination({
+  page,
+  totalPages,
+  total,
+  onChange,
+}: {
+  page: number;
+  totalPages: number;
+  total: number;
+  onChange: (page: number) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between border-t border-slate-100 bg-slate-50 px-4 py-3 text-sm text-slate-500">
+      <span>
+        共 {total} 条 · 第 {page} / {Math.max(totalPages, 1)} 页
+      </span>
+      <div className="flex gap-2">
+        <button
+          onClick={() => onChange(page - 1)}
+          disabled={page <= 1}
+          className="rounded border border-slate-200 bg-white px-3 py-1 text-xs transition-colors hover:bg-slate-100 disabled:opacity-40"
+        >
+          上一页
+        </button>
+        <button
+          onClick={() => onChange(page + 1)}
+          disabled={page >= totalPages}
+          className="rounded border border-slate-200 bg-white px-3 py-1 text-xs transition-colors hover:bg-slate-100 disabled:opacity-40"
+        >
+          下一页
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------ 空 / 加载 / 无权限 */
+
+export function EmptyState({ text = "暂无数据" }: { text?: string }) {
+  return (
+    <div className="flex flex-col items-center justify-center py-12 text-sm text-slate-400">
+      <Info className="mb-2 h-5 w-5" />
+      {text}
+    </div>
+  );
+}
+
+export function LoadingBlock({ text = "加载中..." }: { text?: string }) {
+  return (
+    <div className="flex items-center justify-center gap-2 py-12 text-sm text-slate-400">
+      <Loader2 className="h-4 w-4 animate-spin" />
+      {text}
+    </div>
+  );
+}
+
+/** 模块级无权限提示：不整页拦截，员工仍可使用其它功能区。 */
+export function NoPermission({ module, hint }: { module: string; hint?: string }) {
+  return (
+    <section className="rounded-xl border border-amber-200 bg-amber-50 p-6">
+      <div className="flex items-start gap-3">
+        <ShieldAlert className="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
+        <div>
+          <h2 className="text-sm font-semibold text-amber-900">无权限访问「{module}」</h2>
+          <p className="mt-1 text-sm leading-6 text-amber-700">
+            {hint ?? "当前账号角色不具备该模块的操作权限。如需开通请联系系统管理员。"}
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export function ErrorState({ message, onRetry }: { message: string; onRetry?: () => void }) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-3 py-12 text-sm text-red-500">
+      <XCircle className="h-5 w-5" />
+      {message}
+      {onRetry && (
+        <Button size="sm" onClick={onRetry}>
+          重试
+        </Button>
+      )}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ 弹窗 */
+
+export function Modal({
+  open,
+  title,
+  onClose,
+  children,
+  footer,
+}: {
+  open: boolean;
+  title: string;
+  onClose: () => void;
+  children: ReactNode;
+  footer?: ReactNode;
+}) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event: KeyboardEvent) => event.key === "Escape" && onClose();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-6">
+      <div className="absolute inset-0 bg-slate-900/40" onClick={onClose} />
+      <div className="relative z-10 w-full max-w-lg rounded-xl border border-slate-200 bg-white shadow-xl">
+        <header className="flex items-center justify-between border-b border-slate-100 px-5 py-4">
+          <h3 className="text-sm font-semibold text-slate-900">{title}</h3>
+          <button onClick={onClose} aria-label="关闭" className="rounded p-1 text-slate-400 hover:bg-slate-100">
+            <X className="h-4 w-4" />
+          </button>
+        </header>
+        <div className="px-5 py-4 text-sm text-slate-600">{children}</div>
+        {footer && <footer className="flex justify-end gap-3 border-t border-slate-100 px-5 py-4">{footer}</footer>}
+      </div>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ Toast */
+
+interface ToastItem {
+  id: number;
+  tone: "success" | "error" | "info";
+  text: string;
+}
+
+const ToastContext = createContext<(text: string, tone?: ToastItem["tone"]) => void>(() => {});
+
+export function useToast() {
+  return useContext(ToastContext);
+}
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [items, setItems] = useState<ToastItem[]>([]);
+
+  const push = useCallback((text: string, tone: ToastItem["tone"] = "success") => {
+    const id = Date.now() + Math.random();
+    setItems((prev) => [...prev, { id, tone, text }]);
+    setTimeout(() => setItems((prev) => prev.filter((item) => item.id !== id)), 3200);
+  }, []);
+
+  const value = useMemo(() => push, [push]);
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <div className="pointer-events-none fixed bottom-6 right-6 z-[60] flex flex-col gap-2">
+        {items.map((item) => (
+          <div
+            key={item.id}
+            className={cn(
+              "pointer-events-auto flex items-center gap-2 rounded-lg px-4 py-3 text-sm shadow-lg",
+              item.tone === "success" && "bg-emerald-600 text-white",
+              item.tone === "error" && "bg-red-600 text-white",
+              item.tone === "info" && "bg-slate-900 text-white"
+            )}
+          >
+            {item.tone === "success" && <CheckCircle2 className="h-4 w-4" />}
+            {item.tone === "error" && <XCircle className="h-4 w-4" />}
+            {item.tone === "info" && <Info className="h-4 w-4" />}
+            {item.text}
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+/* ---------------------------------------------------------------- 工具函数 */
+
+export function formatMoney(value?: string | number | null) {
+  if (value === null || value === undefined || value === "") return "--";
+  const num = typeof value === "number" ? value : Number(value);
+  if (Number.isNaN(num)) return "--";
+  return `¥${num.toLocaleString("zh-CN", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+}
+
+export function formatPercent(value?: number | null, digits = 1) {
+  if (value === null || value === undefined) return "--";
+  return `${(value * 100).toFixed(digits)}%`;
+}
+
+export function formatTime(value?: string | null) {
+  if (!value) return "--";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleString("zh-CN", { hour12: false });
+}
+
+/** 判断是否已逾期（due_at 早于当前时间且未完成）。 */
+export function isOverdue(dueAt?: string | null) {
+  if (!dueAt) return false;
+  const time = new Date(dueAt).getTime();
+  return !Number.isNaN(time) && time < Date.now();
+}
diff --git a/frontend/components/admin/unified-workspace.tsx b/frontend/components/admin/unified-workspace.tsx
new file mode 100644
index 0000000..ec35583
--- /dev/null
+++ b/frontend/components/admin/unified-workspace.tsx
@@ -0,0 +1,212 @@
+"use client";
+
+import { ShieldAlert } from "lucide-react";
+import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+import { AdminShell, type ShellNotification } from "@/components/admin/shell";
+import { AdminSection } from "@/components/admin/sections/admin";
+import { CustomersSection } from "@/components/admin/sections/customers";
+import { DraftsSection } from "@/components/admin/sections/drafts";
+import { FundsSection } from "@/components/admin/sections/funds";
+import { OverviewSection } from "@/components/admin/sections/overview";
+import { RiskSection } from "@/components/admin/sections/risk";
+import { TodosSection } from "@/components/admin/sections/todos";
+import { VisitsSection } from "@/components/admin/sections/visits";
+import { WorkOrdersSection } from "@/components/admin/sections/workorders";
+import { LoadingBlock, NoPermission, ToastProvider, formatTime } from "@/components/admin/ui";
+import { adminApi } from "@/lib/admin-api";
+import { canUseSection, isAdvisor, isRiskOfficer, isStaff, isWorkspaceSection, type WorkspaceSection } from "@/lib/roles";
+import type { UserPayload } from "@/types/api";
+
+const SECTION_META: Record<WorkspaceSection, { title: string; subtitle: string }> = {
+  overview: { title: "工作台概览", subtitle: "按当前角色展示核心经营指标" },
+  todos: { title: "我的待办", subtitle: "投顾待办事项的处理与跟踪" },
+  customers: { title: "客户管理", subtitle: "名下客户、持仓、诊断与签约状态" },
+  drafts: { title: "投顾草稿", subtitle: "建议草稿的编辑、发送与废弃" },
+  visits: { title: "客户回访", subtitle: "回访留痕与合规话术参考" },
+  risk: { title: "风险预警", subtitle: "待处置预警与人工处置通道" },
+  workorders: { title: "工单处理", subtitle: "认领、提交审核与复核闭环" },
+  funds: { title: "基金数据", subtitle: "白名单产品与净值数据" },
+  admin: { title: "系统管理", subtitle: "NL2SQL 配置、知识库与数据管理" },
+};
+
+const REQUIRED_ROLE: Record<WorkspaceSection, string> = {
+  overview: "员工账号",
+  todos: "投顾权限",
+  customers: "投顾权限",
+  drafts: "投顾权限",
+  visits: "投顾权限",
+  risk: "风控权限",
+  workorders: "风控权限",
+  funds: "员工账号",
+  admin: "管理员权限",
+};
+
+export function UnifiedWorkspace({ defaultSection = "overview" }: { defaultSection?: WorkspaceSection }) {
+  const [user, setUser] = useState<UserPayload | null>(null);
+  const [access, setAccess] = useState<"checking" | "allowed" | "denied">("checking");
+  const [section, setSection] = useState<WorkspaceSection>(defaultSection);
+  const [notifications, setNotifications] = useState<ShellNotification[]>([]);
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const initial = params.get("section");
+    if (isWorkspaceSection(initial)) setSection(initial);
+  }, []);
+
+  const changeSection = useCallback((next: WorkspaceSection) => {
+    setSection(next);
+    const url = new URL(window.location.href);
+    url.searchParams.set("section", next);
+    window.history.replaceState(null, "", url.toString());
+  }, []);
+
+  useEffect(() => {
+    void (async () => {
+      try {
+        const current = await adminApi.me();
+        setUser(current);
+        setAccess(isStaff(current) ? "allowed" : "denied");
+      } catch {
+        setAccess("denied");
+      }
+    })();
+  }, []);
+
+  useEffect(() => {
+    if (access !== "allowed" || !user) return;
+    void (async () => {
+      const result: ShellNotification[] = [];
+
+      if (isAdvisor(user)) {
+        try {
+          const dashboard = await adminApi.dashboard();
+          for (const todo of (dashboard.todos?.items ?? []).slice(0, 5)) {
+            result.push({
+              id: `todo-${todo.id}`,
+              title: todo.todo_type,
+              body: `${todo.customer_id ? `客户 #${todo.customer_id} · ` : ""}截止 ${formatTime(todo.due_at)}`,
+              time: todo.priority ?? "普通",
+              tone: todo.priority === "高" ? "alert" : "info",
+              section: "todos",
+            });
+          }
+        } catch {
+          /* 无投顾权限时静默跳过 */
+        }
+      }
+
+      if (isRiskOfficer(user)) {
+        try {
+          const alerts = await adminApi.alerts({ status: "未处理", page: 1, page_size: 5 });
+          for (const alert of alerts.items ?? []) {
+            result.push({
+              id: `alert-${alert.id}`,
+              title: `${alert.alert_type}（${alert.alert_level}）`,
+              body: `客户 #${alert.customer_id} · 待处置`,
+              time: formatTime(alert.create_time),
+              tone: alert.alert_level === "高" ? "alert" : "info",
+              section: "risk",
+            });
+          }
+        } catch {
+          /* 无风控权限时静默跳过 */
+        }
+        try {
+          const orders = await adminApi.workOrders({ status: "待审核", page: 1, page_size: 5 });
+          for (const order of orders.items ?? []) {
+            result.push({
+              id: `order-${order.id}`,
+              title: `${order.order_type} 待复核`,
+              body: `${order.work_order_no} · 优先级 ${order.priority}`,
+              time: formatTime(order.create_time),
+              tone: "check",
+              section: "workorders",
+            });
+          }
+        } catch {
+          /* 无风控权限时静默跳过 */
+        }
+      }
+
+      setNotifications(result);
+    })();
+  }, [access, user]);
+
+  if (access === "checking") {
+    return (
+      <main className="flex min-h-screen items-center justify-center bg-slate-50">
+        <LoadingBlock text="正在验证员工身份..." />
+      </main>
+    );
+  }
+
+  if (access === "denied" || !user) {
+    return (
+      <main className="flex min-h-screen items-center justify-center bg-slate-50 px-6">
+        <section className="w-full max-w-md rounded-xl border border-slate-200 bg-white p-8 text-center">
+          <ShieldAlert className="mx-auto h-10 w-10 text-rose-500" />
+          <h1 className="mt-5 text-xl font-semibold text-slate-900">无权限访问员工工作台</h1>
+          <p className="mt-2 text-sm leading-6 text-slate-500">
+            当前账号不是员工账号，无法进入统一员工工作台。请使用员工账号登录，或返回官网浏览基金产品。
+          </p>
+          <div className="mt-6 flex justify-center gap-3">
+            <Link
+              href="/"
+              className="rounded-lg border border-slate-200 px-4 py-2.5 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-50"
+            >
+              返回官网
+            </Link>
+            <Link
+              href="/login"
+              className="rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
+            >
+              重新登录
+            </Link>
+          </div>
+        </section>
+      </main>
+    );
+  }
+
+  const meta = SECTION_META[section];
+  const allowed = canUseSection(user, section);
+
+  return (
+    <ToastProvider>
+      <AdminShell
+        user={user}
+        section={section}
+        onSectionChange={changeSection}
+        title={meta.title}
+        subtitle={meta.subtitle}
+        notifications={notifications}
+      >
+        {!allowed ? (
+          <NoPermission module={meta.title} hint={`该模块需要${REQUIRED_ROLE[section]}，当前账号不具备操作权限。`} />
+        ) : section === "overview" ? (
+          <OverviewSection
+            user={user}
+            onNavigate={(target) => changeSection(target)}
+          />
+        ) : section === "todos" ? (
+          <TodosSection onOpenCustomer={() => changeSection("customers")} />
+        ) : section === "customers" ? (
+          <CustomersSection />
+        ) : section === "drafts" ? (
+          <DraftsSection />
+        ) : section === "visits" ? (
+          <VisitsSection />
+        ) : section === "risk" ? (
+          <RiskSection />
+        ) : section === "workorders" ? (
+          <WorkOrdersSection />
+        ) : section === "funds" ? (
+          <FundsSection user={user} />
+        ) : (
+          <AdminSection username={user.real_name ?? user.username} />
+        )}
+      </AdminShell>
+    </ToastProvider>
+  );
+}
diff --git a/frontend/components/agent-mount.tsx b/frontend/components/agent-mount.tsx
index 348e12c..8246da6 100644
--- a/frontend/components/agent-mount.tsx
+++ b/frontend/components/agent-mount.tsx
@@ -4,11 +4,8 @@ import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 import { apiFetch } from "@/lib/api";
 import { AgentChat } from "@/components/agent-chat";
-
-interface CurrentUser {
-  user_type?: string;
-  employee_role?: string | null;
-}
+import { isAdvisor } from "@/lib/roles";
+import type { UserPayload } from "@/types/api";
 
 export function AgentMount() {
   const pathname = usePathname();
@@ -16,10 +13,9 @@ export function AgentMount() {
 
   useEffect(() => {
     if (!pathname.startsWith("/admin")) return;
-    void apiFetch<{ user: CurrentUser }>("/auth/me")
+    void apiFetch<{ user: UserPayload }>("/auth/me")
       .then(({ user }) => {
-        const advisorRole = user.employee_role === "投顾" || user.employee_role === "投顾专员" || user.employee_role === "ADMIN";
-        setEmployee((user.user_type === "EMPLOYEE" || user.user_type === "ADMIN") && advisorRole);
+        setEmployee(isAdvisor(user));
       })
       .catch(() => setEmployee(false));
   }, [pathname]);
diff --git a/frontend/components/role-workspaces.tsx b/frontend/components/role-workspaces.tsx
deleted file mode 100644
index b55f006..0000000
--- a/frontend/components/role-workspaces.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { Activity, AlertTriangle, BarChart3, Check, FileText, LogOut, ShieldAlert, Users } from "lucide-react";
-import { useEffect, useState } from "react";
-import { apiFetch } from "@/lib/api";
-import { clearToken, getRoleLabel } from "@/lib/auth";
-import type { UserPayload } from "@/types/api";
-
-interface DashboardData { overview?: { total_customers?: number; signed_customers?: number; total_aum?: string }; todos?: { pending?: number } }
-interface RiskAlert { id: number; customer_id: number; alert_type: string; alert_level: string; status: string }
-interface WorkOrder { id: number; work_order_no: string; order_type: string; status: string; priority: string }
-interface Customer { customer_id?: number; id?: number; real_name?: string; name?: string; risk_level?: string; total_aum?: string | number }
-interface Todo { id: number; todo_type: string; status: string; priority: string }
-interface Visit { id: number; customer_id: number; visit_type?: string; content?: string }
-
-function Frame({ title, subtitle, role, children }: { title: string; subtitle: string; role: string; children: React.ReactNode }) {
-  return <main className="min-h-screen bg-slate-50 text-slate-900"><header className="flex h-20 items-center justify-between border-b border-slate-200 bg-white px-10"><div><p className="text-xs uppercase tracking-[0.2em] text-slate-400">Huaxia Fund Operations</p><h1 className="mt-1 text-xl font-semibold text-[var(--brand-navy)]">{title}</h1></div><div className="flex items-center gap-5"><span className="text-sm text-slate-500">{role}</span><button onClick={() => { clearToken(); window.location.href = "/login"; }} className="flex items-center gap-2 text-sm text-slate-500 hover:text-[var(--brand-primary)]"><LogOut className="h-4 w-4" />退出登录</button></div></header><section className="mx-auto max-w-7xl px-10 py-10"><p className="text-sm text-slate-500">{subtitle}</p>{children}</section></main>;
-}
-
-async function getMe() { return (await apiFetch<{ user: UserPayload }>("/auth/me")).user; }
-function Notice({ children }: { children: React.ReactNode }) { return <div className="mt-5 rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">{children}</div>; }
-
-export function AdvisorWorkspace() {
-  const [user, setUser] = useState<UserPayload | null>(null); const [dashboard, setDashboard] = useState<DashboardData | null>(null); const [customers, setCustomers] = useState<Customer[]>([]); const [todos, setTodos] = useState<Todo[]>([]); const [visits, setVisits] = useState<Visit[]>([]); const [report, setReport] = useState<Record<string, unknown> | null>(null); const [error, setError] = useState("");
-  async function load() { try { const [current, overview, customerData, todoData, visitData, personalReport] = await Promise.all([getMe(), apiFetch<DashboardData>("/advisor/dashboard"), apiFetch<{ items?: Customer[] }>("/advisor/customers?page=1&page_size=50"), apiFetch<{ items?: Todo[] }>("/advisor/todos?page=1&page_size=20"), apiFetch<{ items?: Visit[] }>("/advisor/visits?page=1&page_size=20"), apiFetch<Record<string, unknown>>("/advisor/report/personal")]); setUser(current); setDashboard(overview); setCustomers(customerData.items ?? []); setTodos(todoData.items ?? []); setVisits(visitData.items ?? []); setReport(personalReport); } catch { setError("部分投顾数据加载失败，请确认投顾权限或后端服务状态。"); } }
-  useEffect(() => { void load(); }, []);
-  async function finishTodo(id: number) { await apiFetch(`/advisor/todos/${id}/handle`, { method: "POST", body: JSON.stringify({ action: "done" }) }); await load(); }
-  const overview = dashboard?.overview;
-  return <Frame title="投顾工作区" subtitle="客户关系、投顾服务与业务待办" role={getRoleLabel(user?.employee_role)}>{error && <Notice>{error}</Notice>}<div className="mt-8 grid gap-5 md:grid-cols-4"><div className="rounded-xl border border-slate-200 bg-white p-6"><Users className="h-5 w-5 text-[var(--brand-primary)]" /><p className="mt-5 text-sm text-slate-500">名下客户</p><p className="mt-2 text-3xl font-semibold">{overview?.total_customers ?? "--"}</p></div><div className="rounded-xl border border-slate-200 bg-white p-6"><Check className="h-5 w-5 text-[var(--brand-primary)]" /><p className="mt-5 text-sm text-slate-500">签约客户</p><p className="mt-2 text-3xl font-semibold">{overview?.signed_customers ?? "--"}</p></div><div className="rounded-xl border border-slate-200 bg-white p-6"><BarChart3 className="h-5 w-5 text-[var(--brand-primary)]" /><p className="mt-5 text-sm text-slate-500">管理资产</p><p className="mt-2 text-3xl font-semibold">{overview?.total_aum ? `¥${overview.total_aum}` : "--"}</p></div><div className="rounded-xl border border-slate-200 bg-white p-6"><Activity className="h-5 w-5 text-[var(--brand-primary)]" /><p className="mt-5 text-sm text-slate-500">待办事项</p><p className="mt-2 text-3xl font-semibold">{dashboard?.todos?.pending ?? "--"}</p></div></div><div className="mt-8 grid gap-6 lg:grid-cols-2"><section className="rounded-xl border border-slate-200 bg-white p-6"><h2 className="font-semibold">客户管理</h2><div className="mt-4 divide-y divide-slate-100">{customers.slice(0, 8).map((item) => <div key={item.customer_id ?? item.id} className="flex justify-between py-3 text-sm"><span>{item.real_name ?? item.name ?? `客户 #${item.customer_id ?? item.id}`}</span><span className="text-slate-500">{item.risk_level ?? "未评估"} · {item.total_aum ?? "--"}</span></div>)}{!customers.length && <p className="py-6 text-sm text-slate-400">暂无客户数据</p>}</div></section><section className="rounded-xl border border-slate-200 bg-white p-6"><h2 className="font-semibold">待办处理</h2><div className="mt-4 space-y-3">{todos.slice(0, 6).map((todo) => <div key={todo.id} className="flex items-center justify-between rounded-lg bg-slate-50 p-3 text-sm"><span>{todo.todo_type} · {todo.priority}</span><button onClick={() => void finishTodo(todo.id)} className="text-[var(--brand-primary)]">完成</button></div>)}{!todos.length && <p className="py-6 text-sm text-slate-400">暂无待办</p>}</div></section><section className="rounded-xl border border-slate-200 bg-white p-6"><h2 className="font-semibold">回访记录</h2><div className="mt-4 space-y-3">{visits.slice(0, 5).map((visit) => <div key={visit.id} className="rounded-lg bg-slate-50 p-3 text-sm">客户 #{visit.customer_id} · {visit.visit_type ?? "回访"}<p className="mt-1 text-xs text-slate-500">{visit.content ?? "暂无内容"}</p></div>)}{!visits.length && <p className="py-6 text-sm text-slate-400">暂无回访记录</p>}</div></section><section className="rounded-xl border border-slate-200 bg-white p-6"><h2 className="font-semibold">个人绩效</h2><pre className="mt-4 max-h-48 overflow-auto rounded-lg bg-slate-50 p-3 text-xs text-slate-600">{report ? JSON.stringify(report, null, 2) : "暂无绩效数据"}</pre></section></div></Frame>;
-}
-
-export function RiskWorkspace() {
-  const [user, setUser] = useState<UserPayload | null>(null); const [alerts, setAlerts] = useState<RiskAlert[]>([]); const [orders, setOrders] = useState<WorkOrder[]>([]); const [error, setError] = useState("");
-  async function load() { try { const [current, alertData, orderData] = await Promise.all([getMe(), apiFetch<{ items?: RiskAlert[] }>("/risk/alert/list?page=1&page_size=10"), apiFetch<{ items?: WorkOrder[] }>("/work-order/list?page=1&page_size=10")]); setUser(current); setAlerts(alertData.items ?? []); setOrders(orderData.items ?? []); } catch { setError("风控数据加载失败，请确认风控权限或后端服务状态。"); } }
-  useEffect(() => { void load(); }, []);
-  async function alertAction(id: number, action: "release" | "block" | "freeze") { await apiFetch(`/risk/alert/${id}/${action}`, { method: "POST" }); await load(); }
-  async function orderAction(id: number, action: "claim" | "submit-review" | "review") { const body = action === "review" ? { work_order_id: id, approve: window.confirm("确认通过该工单？"), comment: "前端工作区复核" } : { work_order_id: id }; await apiFetch(`/work-order/${action}`, { method: "POST", body: JSON.stringify(body) }); await load(); }
-  return <Frame title="风控工作区" subtitle="风险预警、处置与工单审核" role={getRoleLabel(user?.employee_role)}>{error && <Notice>{error}</Notice>}<div className="mt-8 grid gap-5 md:grid-cols-3"><div className="rounded-xl border border-slate-200 bg-white p-6"><ShieldAlert className="h-5 w-5 text-rose-500" /><p className="mt-5 text-sm text-slate-500">当前预警</p><p className="mt-2 text-3xl font-semibold">{alerts.length}</p></div><div className="rounded-xl border border-slate-200 bg-white p-6"><AlertTriangle className="h-5 w-5 text-amber-500" /><p className="mt-5 text-sm text-slate-500">高风险事项</p><p className="mt-2 text-3xl font-semibold">{alerts.filter((item) => item.alert_level === "高").length}</p></div><div className="rounded-xl border border-slate-200 bg-white p-6"><FileText className="h-5 w-5 text-[var(--brand-primary)]" /><p className="mt-5 text-sm text-slate-500">工单数量</p><p className="mt-2 text-3xl font-semibold">{orders.length}</p></div></div><section className="mt-8 rounded-xl border border-slate-200 bg-white p-6"><h2 className="font-semibold">风险预警处置</h2><div className="mt-4 divide-y divide-slate-100">{alerts.map((alert) => <div key={alert.id} className="flex items-center justify-between gap-4 py-4 text-sm"><span>{alert.alert_type} · 客户 #{alert.customer_id}<small className="ml-3 text-slate-400">{alert.status}</small></span><div className="flex gap-2"><button onClick={() => void alertAction(alert.id, "release")} className="rounded border px-2 py-1 text-xs hover:text-emerald-600">放行</button><button onClick={() => void alertAction(alert.id, "block")} className="rounded border px-2 py-1 text-xs hover:text-rose-600">拦截</button><button onClick={() => void alertAction(alert.id, "freeze")} className="rounded border px-2 py-1 text-xs hover:text-amber-600">冻结</button></div></div>)}{!alerts.length && <p className="py-6 text-sm text-slate-400">暂无风险预警</p>}</div></section><section className="mt-8 rounded-xl border border-slate-200 bg-white p-6"><h2 className="font-semibold">业务工单</h2><div className="mt-4 divide-y divide-slate-100">{orders.map((item) => <div key={item.id} className="flex items-center justify-between gap-4 py-4 text-sm"><span>{item.work_order_no} · {item.order_type} · {item.status}</span><div className="flex gap-2"><button onClick={() => void orderAction(item.id, "claim")} className="rounded border px-2 py-1 text-xs">认领</button><button onClick={() => void orderAction(item.id, "submit-review")} className="rounded border px-2 py-1 text-xs">提交审核</button><button onClick={() => void orderAction(item.id, "review")} className="rounded border px-2 py-1 text-xs">复核</button></div></div>)}{!orders.length && <p className="py-6 text-sm text-slate-400">暂无工单</p>}</div></section></Frame>;
-}
-
-export function CommonWorkspace() {
-  const [user, setUser] = useState<UserPayload | null>(null); useEffect(() => { void getMe().then(setUser).catch(() => undefined); }, []);
-  const isAdmin = user?.user_type === "ADMIN";
-  return <Frame title="员工通用工作区" subtitle="基金信息、系统工具与基础运营入口" role={getRoleLabel(user?.employee_role)}><div className="mt-8 grid gap-5 md:grid-cols-3"><Link href="/products" className="rounded-xl border border-slate-200 bg-white p-6 hover:border-[var(--brand-primary)]"><FileText className="h-5 w-5 text-[var(--brand-primary)]" /><h2 className="mt-5 font-semibold">基金数据</h2><p className="mt-2 text-sm text-slate-500">查看真实基金产品和历史净值</p></Link>{isAdmin ? <Link href="/tools/nl2sql" className="rounded-xl border border-slate-200 bg-white p-6 hover:border-[var(--brand-primary)]"><Activity className="h-5 w-5 text-[var(--brand-primary)]" /><h2 className="mt-5 font-semibold">NL2SQL 配置</h2><p className="mt-2 text-sm text-slate-500">管理员专用：运行配置和查询权限管理</p></Link> : <Link href="/tools/nl2sql" className="rounded-xl border border-slate-200 bg-white p-6 hover:border-[var(--brand-primary)]"><Activity className="h-5 w-5 text-[var(--brand-primary)]" /><h2 className="mt-5 font-semibold">数据查询</h2><p className="mt-2 text-sm text-slate-500">员工自然语言查询与历史记录</p></Link>}{isAdmin && <Link href="/tools/knowledge" className="rounded-xl border border-slate-200 bg-white p-6 hover:border-[var(--brand-primary)]"><FileText className="h-5 w-5 text-[var(--brand-primary)]" /><h2 className="mt-5 font-semibold">知识库管理</h2><p className="mt-2 text-sm text-slate-500">管理员专用：文档上传、预览和删除</p></Link>}</div></Frame>;
-}
diff --git a/frontend/lib/admin-api.ts b/frontend/lib/admin-api.ts
new file mode 100644
index 0000000..d95c5c9
--- /dev/null
+++ b/frontend/lib/admin-api.ts
@@ -0,0 +1,266 @@
+import { apiFetch } from "@/lib/api";
+
+/** 统一分页响应（后端 utils.pagination.pagination_result）。 */
+export interface Page<T> {
+  items: T[];
+  total: number;
+  page: number;
+  page_size: number;
+  total_pages: number;
+}
+
+export interface TodoItem {
+  id: number;
+  todo_type: string;
+  customer_id: number | null;
+  priority: string;
+  status: string;
+  due_at: string | null;
+}
+
+export interface DashboardData {
+  todos?: { pending?: number; items?: TodoItem[] };
+  overview?: {
+    total_customers?: number;
+    signed_customers?: number;
+    closed_customers?: number;
+    churn_rate?: number;
+    total_aum?: string;
+    reports_sent?: number;
+    reports_draft?: number;
+    visits_count?: number;
+  };
+  customer_levels?: Record<string, number>;
+}
+
+export interface Customer {
+  customer_id: number;
+  real_name: string | null;
+  phone: string | null;
+  risk_level: string | null;
+  customer_level: string | null;
+  relation_status: string;
+  total_assets: number | null;
+}
+
+export interface CustomerDetail extends Customer {
+  risk_score?: number | null;
+  signed_time?: string | null;
+  assigned_time?: string | null;
+}
+
+export interface Holding {
+  product_id: number;
+  product_code: string | null;
+  product_name: string | null;
+  risk_level: string | null;
+  shares: string;
+  cost_amount: string;
+  current_value: string;
+  profit_loss: string;
+  profit_ratio: string;
+  status: string;
+}
+
+export interface ReportItem {
+  report_id: string;
+  intent: string | null;
+  title: string | null;
+  send_status: string;
+  send_time: string | null;
+}
+
+export interface Visit {
+  id: number;
+  customer_id: number;
+  advisor_id: number;
+  visit_type: string;
+  visit_time: string;
+  summary: string | null;
+  audio_url: string | null;
+  create_time: string | null;
+}
+
+export interface Diagnosis {
+  total_value: string;
+  allocation: Record<string, string>;
+  concentration: { top_product_ratio: number; top_product: { product_name: string | null } | null };
+  holdings: { product_code: string | null; product_name: string | null; product_type: string; current_value: string }[];
+}
+
+export interface RiskAlert {
+  id: number;
+  customer_id: number | null;
+  order_id: number | null;
+  alert_type: string;
+  alert_level: string;
+  trigger_detail: string | null;
+  transaction_ids: unknown;
+  confidence: number | null;
+  status: string;
+  handler_id: number | null;
+  handle_result: string | null;
+  handle_time: string | null;
+  create_time: string | null;
+}
+
+export interface WorkOrder {
+  id: number;
+  work_order_no: string;
+  order_type: string;
+  sub_type: string | null;
+  customer_id: number | null;
+  submitter_id: number | null;
+  handler_id: number | null;
+  current_node: string | null;
+  priority: string;
+  status: string;
+  biz_content: Record<string, unknown> | null;
+  create_time: string | null;
+  update_time: string | null;
+}
+
+export interface FundProduct {
+  id: number;
+  product_code: string;
+  product_name: string;
+  product_type: string;
+  risk_level: string;
+  nav: number | null;
+  nav_date: string | null;
+  fund_manager: string | null;
+  status: string;
+}
+
+export interface Draft {
+  draft_id?: string;
+  id?: string;
+  title?: string;
+  content?: string;
+  status?: string;
+  customer_id?: number | null;
+  intent?: string | null;
+  create_time?: string | null;
+  update_time?: string | null;
+}
+
+export interface TalkTemplate {
+  scene: string;
+  content: string;
+}
+
+export interface PersonalReport {
+  total_aum: string;
+  total_customers: number;
+  signed_customers: number;
+  reports_sent: number;
+  visits_count: number;
+}
+
+export interface AuditRow {
+  id: number;
+  username: string | null;
+  module: string | null;
+  action: string | null;
+  target: string | null;
+  detail: string | null;
+  status: string | null;
+  create_time: string | null;
+}
+
+function qs(params: Record<string, string | number | undefined | null>) {
+  const search = new URLSearchParams();
+  for (const [key, value] of Object.entries(params)) {
+    if (value !== undefined && value !== null && value !== "") search.set(key, String(value));
+  }
+  const text = search.toString();
+  return text ? `?${text}` : "";
+}
+
+export const adminApi = {
+  me: () => apiFetch<{ user: import("@/types/api").UserPayload }>("/auth/me").then((r) => r.user),
+
+  dashboard: () => apiFetch<DashboardData>("/advisor/dashboard"),
+  personalReport: () => apiFetch<PersonalReport>("/advisor/report/personal"),
+
+  customers: (params: { status?: string; keyword?: string; page?: number; page_size?: number }) =>
+    apiFetch<Page<Customer>>(`/advisor/customers${qs(params)}`),
+  customer: (id: number, unmask = false) =>
+    apiFetch<CustomerDetail>(`/advisor/customers/${id}${qs({ unmask: unmask ? "true" : null })}`),
+  holdings: (id: number) => apiFetch<Holding[]>(`/advisor/customers/${id}/holdings`),
+  reports: (id: number, page = 1, page_size = 10) =>
+    apiFetch<Page<ReportItem>>(`/advisor/customers/${id}/reports${qs({ page, page_size })}`),
+  diagnosis: (id: number) => apiFetch<Diagnosis>(`/advisor/diagnosis/${id}`),
+  setRelation: (id: number, action: "sign" | "close", reason?: string) =>
+    apiFetch<{ customer_id: number; status: string }>(`/advisor/customers/${id}/relation`, {
+      method: "POST",
+      body: JSON.stringify({ action, reason: reason || null }),
+    }),
+
+  todos: (params: { status?: string; todo_type?: string; page?: number; page_size?: number }) =>
+    apiFetch<Page<TodoItem>>(`/advisor/todos${qs(params)}`),
+  handleTodo: (id: number, action: "process" | "done") =>
+    apiFetch<unknown>(`/advisor/todos/${id}/handle`, {
+      method: "POST",
+      body: JSON.stringify({ action }),
+    }),
+
+  visits: (params: { customer_id?: number; page?: number; page_size?: number }) =>
+    apiFetch<Page<Visit>>(`/advisor/visits${qs(params)}`),
+  createVisit: (body: { customer_id: number; visit_type: string; visit_time: string; summary?: string }) =>
+    apiFetch<{ visit_id: number }>("/advisor/visits", { method: "POST", body: JSON.stringify(body) }),
+  updateVisit: (id: number, body: Partial<{ visit_type: string; visit_time: string; summary: string }>) =>
+    apiFetch<Visit>(`/advisor/visits/${id}`, { method: "PUT", body: JSON.stringify(body) }),
+  talkTemplates: () => apiFetch<TalkTemplate[]>("/advisor/talk-templates"),
+  touchLogs: (customerId: number, page = 1, page_size = 10) =>
+    apiFetch<{ messages: unknown[]; visits: Visit[] }>(`/advisor/touch-logs${qs({ customer_id: customerId, page, page_size })}`),
+
+  drafts: (params: { customer_id?: number; status?: string; page?: number; page_size?: number } = {}) =>
+    apiFetch<Page<Draft>>(`/advisor/drafts${qs(params)}`),
+  draft: (draftId: string) => apiFetch<Draft>(`/advisor/drafts/${draftId}`),
+  saveDraft: (draftId: string, body: { title?: string; content?: string }) =>
+    apiFetch<unknown>(`/advisor/drafts/${draftId}/save`, { method: "PUT", body: JSON.stringify(body) }),
+  discardDraft: (draftId: string) =>
+    apiFetch<unknown>(`/advisor/drafts/${draftId}/discard`, { method: "POST" }),
+  sendDraft: (draftId: string) =>
+    apiFetch<unknown>(`/advisor/drafts/${draftId}/send`, { method: "POST" }),
+  runRebalance: (query: string) =>
+    apiFetch<unknown>("/advisor/rebalance/run", { method: "POST", body: JSON.stringify({ query }) }),
+  generateTalkScript: (query: string) =>
+    apiFetch<{ script?: string; content?: string }>("/advisor/talk-script", {
+      method: "POST",
+      body: JSON.stringify({ query }),
+    }),
+
+  strategies: () => apiFetch<{ risk_level: string; target_allocation: unknown; drift_threshold: number }[]>("/advisor/strategies"),
+  funds: (params: { keyword?: string; product_type?: string; risk_level?: string; page?: number; page_size?: number }) =>
+    apiFetch<Page<FundProduct>>(`/advisor/funds${qs(params)}`),
+  auditLedger: (params: { page?: number; page_size?: number; action?: string } = {}) =>
+    apiFetch<Page<AuditRow>>(`/advisor/audit/ledger${qs(params)}`),
+
+  alerts: (params: { status?: string; page?: number; page_size?: number } = {}) =>
+    apiFetch<Page<RiskAlert>>(`/risk/alert/list${qs(params)}`),
+  alertAction: (id: number, action: "release" | "block" | "freeze") =>
+    apiFetch<Record<string, unknown>>(`/risk/alert/${id}/${action}`, { method: "POST" }),
+
+  workOrders: (params: { status?: string; page?: number; page_size?: number } = {}) =>
+    apiFetch<Page<WorkOrder>>(`/work-order/list${qs(params)}`),
+  workOrder: (id: number) => apiFetch<WorkOrder>(`/work-order/${id}`),
+  claimWorkOrder: (id: number) =>
+    apiFetch<unknown>("/work-order/claim", { method: "POST", body: JSON.stringify({ work_order_id: id }) }),
+  submitWorkOrder: (id: number) =>
+    apiFetch<unknown>("/work-order/submit-review", { method: "POST", body: JSON.stringify({ work_order_id: id }) }),
+  reviewWorkOrder: (id: number, approve: boolean, comment: string) =>
+    apiFetch<unknown>("/work-order/review", {
+      method: "POST",
+      body: JSON.stringify({ work_order_id: id, approve, comment }),
+    }),
+
+  products: (params: { keyword?: string; page?: number; page_size?: number } = {}) =>
+    apiFetch<Page<FundProduct>>(`/products${qs(params)}`),
+};
+
+/** 统一错误信息提取，避免每个组件重复判断。 */
+export function errMessage(error: unknown, fallback = "操作失败") {
+  return error instanceof Error ? error.message : fallback;
+}
diff --git a/frontend/lib/auth.ts b/frontend/lib/auth.ts
index a3430ba..c985700 100644
--- a/frontend/lib/auth.ts
+++ b/frontend/lib/auth.ts
@@ -1,40 +1,21 @@
+import { USER_TYPE } from "@/lib/roles";
+
 const TOKEN_KEY = "huaxia_token";
 
-export function getToken() {
-  if (typeof window === "undefined") return null;
-  return localStorage.getItem(TOKEN_KEY);
-}
-
-export function setToken(token: string) {
-  localStorage.setItem(TOKEN_KEY, token);
-}
-
-export function clearToken() {
-  localStorage.removeItem(TOKEN_KEY);
-}
-
+/** 前端只负责展示友好名称，取值契约见 lib/roles.ts。 */
 export const roleLabels: Record<string, string> = {
+  管理员: "管理员",
   投顾: "投顾专员",
-  投顾专员: "投顾专员",
   风控专员: "风控专员",
-  ADMIN: "员工通用",
-  EMPLOYEE: "员工通用",
+  客户经理: "客户经理",
 };
 
-export function getRoleLabel(role?: string | null) {
-  return role ? roleLabels[role] ?? "员工通用" : "员工通用";
-}
+export function getToken() { if (typeof window === "undefined") return null; return localStorage.getItem(TOKEN_KEY); }
+export function setToken(token: string) { localStorage.setItem(TOKEN_KEY, token); }
+export function clearToken() { localStorage.removeItem(TOKEN_KEY); }
+export function getRoleLabel(role?: string | null) { return role ? roleLabels[role] ?? "员工" : "员工"; }
 
-export function getPostLoginPath(user?: { user_type?: string | null; employee_role?: string | null }) {
-  if (!user || user.user_type === "CUSTOMER") return "/account";
-  if (user.user_type === "ADMIN") return "/admin/common";
-
-  switch (getRoleLabel(user.employee_role)) {
-    case "投顾专员":
-      return "/admin/advisor";
-    case "风控专员":
-      return "/admin/risk";
-    default:
-      return "/admin/common";
-  }
+/** 客户进入客户端，所有员工统一进入员工工作台。 */
+export function getPostLoginPath(user?: { user_type?: string | null }) {
+  return user?.user_type === USER_TYPE.CUSTOMER ? "/account" : "/admin/common";
 }
diff --git a/frontend/lib/risk.ts b/frontend/lib/risk.ts
new file mode 100644
index 0000000..1faea75
--- /dev/null
+++ b/frontend/lib/risk.ts
@@ -0,0 +1,18 @@
+const RISK_ALIASES: Record<string, string> = {
+  "1": "R1", "R1": "R1", "低": "R1", "低风险": "R1", "保守": "R1",
+  "2": "R2", "R2": "R2", "中低": "R2", "中低风险": "R2", "稳健": "R2",
+  "3": "R3", "R3": "R3", "中": "R3", "中风险": "R3", "平衡": "R3",
+  "4": "R4", "R4": "R4", "中高": "R4", "中高风险": "R4", "进取": "R4",
+  "5": "R5", "R5": "R5", "高": "R5", "高风险": "R5", "激进": "R5",
+};
+
+export const RISK_LEVELS = ["R1", "R2", "R3", "R4", "R5"] as const;
+
+export function normalizeRiskLevel(value?: string | null) {
+  const normalized = value?.trim().toUpperCase() ?? "";
+  return RISK_ALIASES[normalized] ?? value ?? "未知";
+}
+
+export function riskLevelDescription(level: string) {
+  return ({ R1: "低风险", R2: "中低风险", R3: "中风险", R4: "中高风险", R5: "高风险" } as Record<string, string>)[level] ?? "风险等级待确认";
+}
diff --git a/frontend/lib/roles.ts b/frontend/lib/roles.ts
new file mode 100644
index 0000000..bc90893
--- /dev/null
+++ b/frontend/lib/roles.ts
@@ -0,0 +1,90 @@
+import type { UserPayload } from "@/types/api";
+
+/**
+ * 后端账号取值契约（与 common_const §13 对齐，数据库存值不改动）。
+ * 前端只做展示映射和菜单显隐，不修改后端权限判断 —— 真正的鉴权仍在服务端。
+ */
+
+/** sys_user.user_type：建表枚举，沿用 DDL 定义。 */
+export const USER_TYPE = {
+  CUSTOMER: "CUSTOMER",
+  EMPLOYEE: "EMPLOYEE",
+  ADMIN: "ADMIN",
+} as const;
+
+/** sys_user.employee_role：中文，与既有数据一致。 */
+export const EMPLOYEE_ROLE = {
+  ADMIN: "管理员",
+  ADVISOR: "投顾",
+  RISK: "风控专员",
+  CUSTOMER_MANAGER: "客户经理",
+} as const;
+
+/** 统一工作台上可切换的功能区。 */
+export type WorkspaceSection =
+  | "overview"
+  | "todos"
+  | "customers"
+  | "drafts"
+  | "visits"
+  | "risk"
+  | "workorders"
+  | "funds"
+  | "admin";
+
+/** 管理员：账号类型为 ADMIN，或员工账号且角色为「管理员」。 */
+export function isAdmin(user?: UserPayload | null): boolean {
+  if (!user) return false;
+  if (user.user_type === USER_TYPE.ADMIN) return true;
+  return user.user_type === USER_TYPE.EMPLOYEE && user.employee_role === EMPLOYEE_ROLE.ADMIN;
+}
+
+export function isEmployee(user?: UserPayload | null): boolean {
+  return user?.user_type === USER_TYPE.EMPLOYEE;
+}
+
+/** 是否能进入员工后台（管理员视同拥有全部员工权限）。 */
+export function isStaff(user?: UserPayload | null): boolean {
+  return isAdmin(user) || isEmployee(user);
+}
+
+/** 员工角色命中即通过；管理员一律放行。 */
+function hasEmployeeRole(user: UserPayload | null | undefined, role: string): boolean {
+  if (isAdmin(user)) return true;
+  return isEmployee(user) && user?.employee_role === role;
+}
+
+export function isAdvisor(user?: UserPayload | null): boolean {
+  return hasEmployeeRole(user, EMPLOYEE_ROLE.ADVISOR);
+}
+
+export function isRiskOfficer(user?: UserPayload | null): boolean {
+  return hasEmployeeRole(user, EMPLOYEE_ROLE.RISK);
+}
+
+/**
+ * 各功能区所需权限。
+ * 不满足时不整页拒绝，而是在该区域内渲染「无权限」提示，员工仍可使用其它有权限的模块。
+ */
+const SECTION_GUARD: Record<WorkspaceSection, (user?: UserPayload | null) => boolean> = {
+  overview: isStaff,
+  todos: isAdvisor,
+  customers: isAdvisor,
+  drafts: isAdvisor,
+  visits: isAdvisor,
+  risk: isRiskOfficer,
+  workorders: isRiskOfficer,
+  funds: isStaff,
+  admin: isAdmin,
+};
+
+export function canUseSection(
+  user: UserPayload | null | undefined,
+  section: WorkspaceSection
+): boolean {
+  return SECTION_GUARD[section]?.(user) ?? false;
+}
+
+export function isWorkspaceSection(value: string | null): value is WorkspaceSection {
+  return !!value && value in SECTION_GUARD;
+}
diff --git a/frontend/next-env.d.ts b/frontend/next-env.d.ts
index a419cbe..ce4e94a 100644
--- a/frontend/next-env.d.ts
+++ b/frontend/next-env.d.ts
@@ -1,7 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
-import "./.next/dev/types/root-params.d.ts";
+import "./.next/types/routes.d.ts";
+import "./.next/types/root-params.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/sql/schema.sql b/sql/schema.sql
index 8f2ced7..1584e7f 100644
--- a/sql/schema.sql
+++ b/sql/schema.sql
@@ -62,7 +62,7 @@ CREATE TABLE IF NOT EXISTS sys_user (
     real_name     VARCHAR(32)  NULL     COMMENT '真实姓名',
     phone         VARCHAR(20)  NOT NULL COMMENT '手机号（脱敏展示用）',
     user_type     VARCHAR(16)  NOT NULL DEFAULT 'CUSTOMER' COMMENT 'CUSTOMER=客户 / EMPLOYEE=员工 / ADMIN=管理员',
-    employee_role VARCHAR(32)  NULL     COMMENT '员工角色：理财顾问/风控专员/客户经理/管理员',
+    employee_role VARCHAR(32)  NULL     COMMENT '员工角色：投顾/风控专员/客户经理/管理员',
     customer_level VARCHAR(16) NULL     COMMENT '客户等级：普通/金卡/白金/钻石/私行',
     status        VARCHAR(16)  NOT NULL DEFAULT '正常' COMMENT '账号状态：正常/禁用/冻结',
     create_time   DATETIME     NOT NULL DEFAULT CURRENT_TIMESTAMP,
@@ -163,7 +163,7 @@ CREATE TABLE IF NOT EXISTS fin_transaction (
     order_id         BIGINT UNSIGNED NULL COMMENT '关联申请单 ID',
     customer_id      BIGINT UNSIGNED NOT NULL,
     product_id       BIGINT UNSIGNED NOT NULL,
-    operator_id      BIGINT UNSIGNED NULL COMMENT '经办理财顾问',
+    operator_id      BIGINT UNSIGNED NULL COMMENT '经办投顾',
     transaction_type VARCHAR(16)   NOT NULL COMMENT '申购/赎回/分红/定投',
     amount           DECIMAL(18,2) NOT NULL COMMENT '交易金额（元）',
     shares           DECIMAL(18,4) NULL COMMENT '成交份额',