From 72bcdf225622cff29bf0fd8c8920612578f5bec6 Mon Sep 17 00:00:00 2001
From: ila <ila2002@qq.com>
Date: Wed, 26 Aug 2026 16:21:21 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E5=9B=BA=E5=8C=96=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=AB=AF=E5=88=86=E7=BB=84=E5=AF=BC=E8=88=AA=E5=8E=9F=E5=9E=8B?=
 =?UTF-8?q?=20(#59)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 prototypes/59/v1/favicon.ico  | Bin 0 -> 3628 bytes
 prototypes/59/v1/icons.min.js |  36 +++++
 prototypes/59/v1/index.html   | 293 ++++++++++++++++++++++++++++++++++
 3 files changed, 329 insertions(+)
 create mode 100644 prototypes/59/v1/favicon.ico
 create mode 100644 prototypes/59/v1/icons.min.js
 create mode 100644 prototypes/59/v1/index.html

diff --git a/prototypes/59/v1/favicon.ico b/prototypes/59/v1/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..792a1b174a6ccac0485dfd67a8f1ae9fbbce91cf
GIT binary patch
literal 3628
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

literal 0
HcmV?d00001

diff --git a/prototypes/59/v1/icons.min.js b/prototypes/59/v1/icons.min.js
new file mode 100644
index 0000000..f24ec06
--- /dev/null
+++ b/prototypes/59/v1/icons.min.js
@@ -0,0 +1,36 @@
+(()=>{var u={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};var L=([e,a,t])=>{let r=document.createElementNS("http://www.w3.org/2000/svg",e);return Object.keys(a).forEach(o=>{r.setAttribute(o,String(a[o]))}),t?.length&&t.forEach(o=>{let s=L(o);r.appendChild(s)}),r},y=(e,a={})=>{let r={...u,...a};return L(["svg",r,e])};var R=e=>{for(let a in e)if(a.startsWith("aria-")||a==="role"||a==="title")return!0;return!1};var T=(...e)=>e.filter((a,t,r)=>!!a&&a.trim()!==""&&r.indexOf(a)===t).join(" ").trim();var q=e=>e.replace(/^([A-Z])|[\s-_]+(\w)/g,(a,t,r)=>r?r.toUpperCase():t.toLowerCase());var b=e=>{let a=q(e);return a.charAt(0).toUpperCase()+a.slice(1)};var G=e=>Array.from(e.attributes).reduce((a,t)=>(a[t.name]=t.value,a),{}),U=e=>typeof e=="string"?e:!e||!e.class?"":e.class&&typeof e.class=="string"?e.class.split(" "):e.class&&Array.isArray(e.class)?e.class:"",p=(e,{nameAttr:a,icons:t,attrs:r})=>{let o=e.getAttribute(a);if(o==null)return;let s=b(o),f=t[s];if(!f)return console.warn(`${e.outerHTML} icon name was not found in the provided icons object.`);let l=G(e),O=R(l)?{}:{"aria-hidden":"true"},F={...u,"data-lucide":o,...O,...r,...l},v=U(l),H=U(r),D=T("lucide",`lucide-${o}`,...v,...H);D&&Object.assign(F,{class:D});let E=y(f,F);return e.parentNode?.replaceChild(E,e)};var m=[["path",{d:"M20 6 9 17l-5-5"}]];var d=[["circle",{cx:"12",cy:"12",r:"10"}],["line",{x1:"12",x2:"12",y1:"8",y2:"12"}],["line",{x1:"12",x2:"12.01",y1:"16",y2:"16"}]];var x=[["circle",{cx:"12",cy:"12",r:"10"}],["path",{d:"M12 6v6h4"}]];var i=[["rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}],["path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"}]];var n=[["path",{d:"M12 15V3"}],["path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}],["path",{d:"m7 10 5 5 5-5"}]];var c=[["path",{d:"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"}],["path",{d:"M14.084 14.158a3 3 0 0 1-4.242-4.242"}],["path",{d:"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"}],["path",{d:"m2 2 20 20"}]];var C=[["path",{d:"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"}],["circle",{cx:"12",cy:"12",r:"3"}]];var h=[["path",{d:"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{d:"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{d:"M10 9H8"}],["path",{d:"M16 13H8"}],["path",{d:"M16 17H8"}]];var S=[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2"}],["circle",{cx:"9",cy:"9",r:"2"}],["path",{d:"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"}]];var g=[["path",{d:"m16 17 5-5-5-5"}],["path",{d:"M21 12H9"}],["path",{d:"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"}]];var w=[["path",{d:"M5 12h14"}],["path",{d:"M12 5v14"}]];var k=[["path",{d:"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"}],["path",{d:"M21 3v5h-5"}],["path",{d:"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"}],["path",{d:"M8 16H3v5"}]];var P=[["path",{d:"m21 21-4.34-4.34"}],["circle",{cx:"11",cy:"11",r:"8"}]];var A=[["path",{d:"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{d:"m9 12 2 2 4-4"}]];var M=[["path",{d:"M18 6 6 18"}],["path",{d:"m6 6 12 12"}]];var B=({icons:e={},nameAttr:a="data-lucide",attrs:t={},root:r=document,inTemplates:o}={})=>{if(!Object.values(e).length)throw new Error(`Please provide an icons object.
+If you want to use all the icons you can import it like:
+ \`import { createIcons, icons } from 'lucide';
+lucide.createIcons({icons});\``);if(typeof r>"u")throw new Error("`createIcons()` only works in a browser environment.");if(Array.from(r.querySelectorAll(`[${a}]`)).forEach(f=>p(f,{nameAttr:a,icons:e,attrs:t})),o&&Array.from(r.querySelectorAll("template")).forEach(l=>B({icons:e,nameAttr:a,attrs:t,root:l.content,inTemplates:o})),a==="data-lucide"){let f=r.querySelectorAll("[icon-name]");f.length>0&&(console.warn("[Lucide] Some icons were found with the now deprecated icon-name attribute. These will still be replaced for backwards compatibility, but will no longer be supported in v1.0 and you should switch to data-lucide"),Array.from(f).forEach(l=>p(l,{nameAttr:"icon-name",icons:e,attrs:t})))}};var V={AlertCircle:d,Check:m,Clock3:x,Copy:i,Download:n,Eye:C,EyeOff:c,FileText:h,Image:S,LogOut:g,Plus:w,RefreshCw:k,Search:P,ShieldCheck:A,X:M};window.renderChorusIcons=(e=document)=>B({icons:V,attrs:{"aria-hidden":"true"},root:e});document.addEventListener("DOMContentLoaded",()=>window.renderChorusIcons());})();
+/*! Bundled license information:
+
+lucide/dist/esm/defaultAttributes.mjs:
+lucide/dist/esm/createElement.mjs:
+lucide/dist/esm/shared/src/utils/hasA11yProp.mjs:
+lucide/dist/esm/shared/src/utils/mergeClasses.mjs:
+lucide/dist/esm/shared/src/utils/toCamelCase.mjs:
+lucide/dist/esm/shared/src/utils/toPascalCase.mjs:
+lucide/dist/esm/replaceElement.mjs:
+lucide/dist/esm/icons/check.mjs:
+lucide/dist/esm/icons/circle-alert.mjs:
+lucide/dist/esm/icons/clock-3.mjs:
+lucide/dist/esm/icons/copy.mjs:
+lucide/dist/esm/icons/download.mjs:
+lucide/dist/esm/icons/eye-off.mjs:
+lucide/dist/esm/icons/eye.mjs:
+lucide/dist/esm/icons/file-text.mjs:
+lucide/dist/esm/icons/image.mjs:
+lucide/dist/esm/icons/log-out.mjs:
+lucide/dist/esm/icons/plus.mjs:
+lucide/dist/esm/icons/refresh-cw.mjs:
+lucide/dist/esm/icons/search.mjs:
+lucide/dist/esm/icons/shield-check.mjs:
+lucide/dist/esm/icons/x.mjs:
+lucide/dist/esm/lucide.mjs:
+  (**
+   * @license lucide v1.33.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+*/
diff --git a/prototypes/59/v1/index.html b/prototypes/59/v1/index.html
new file mode 100644
index 0000000..3e259a7
--- /dev/null
+++ b/prototypes/59/v1/index.html
@@ -0,0 +1,293 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="light">
+  <title>Chorus 管理端分组导航原型 v1</title>
+  <link rel="icon" href="./favicon.ico">
+  <script defer src="./icons.min.js"></script>
+  <style>
+    :root {
+      --sidebar: #001529;
+      --sidebar-deep: #000c17;
+      --sidebar-text: #c7d2df;
+      --sidebar-muted: #8393a7;
+      --primary: #1677ff;
+      --primary-hover: #0958d9;
+      --primary-soft: #e6f4ff;
+      --surface: #ffffff;
+      --surface-alt: #f5f7fa;
+      --surface-soft: #fafbfc;
+      --text: #1f2937;
+      --muted: #5d6b7a;
+      --border: #dfe4ea;
+      --success: #237804;
+      --success-soft: #f0f9eb;
+      --warning: #874d00;
+      --warning-soft: #fff7e6;
+      --danger: #b42318;
+      --danger-soft: #fff1f0;
+      --focus: #69b1ff;
+      --sidebar-width: 236px;
+      font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
+      color: var(--text);
+      background: var(--surface-alt);
+    }
+    * { box-sizing: border-box; letter-spacing: 0; }
+    html { min-width: 320px; }
+    body { min-width: 320px; min-height: 100dvh; margin: 0; overflow-x: hidden; background: var(--surface-alt); font-size: 14px; line-height: 1.5; }
+    button, input, select { font: inherit; letter-spacing: 0; }
+    button { cursor: pointer; }
+    button:disabled { cursor: not-allowed; }
+    svg { width: 18px; height: 18px; flex: 0 0 18px; pointer-events: none; stroke-width: 2; }
+    :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
+    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    .prototype-bar { position: fixed; inset: 0 0 auto 0; z-index: 70; display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 5px 14px; color: #29445e; background: #eaf4ff; border-bottom: 1px solid #b7d8f7; font-size: 12px; }
+    .prototype-bar strong { color: #12395e; }
+    .prototype-bar span { color: #53697d; }
+    .app-shell { min-height: 100dvh; padding-top: 34px; }
+    .sidebar { position: fixed; z-index: 50; inset: 34px auto 0 0; width: var(--sidebar-width); overflow-y: auto; color: var(--sidebar-text); background: var(--sidebar); transition: transform .2s ease-out; }
+    .brand { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 17px; color: #fff; background: #002140; border-bottom: 1px solid #15354f; }
+    .brand-mark { display: grid; place-items: center; width: 30px; height: 30px; color: #fff; background: var(--primary); border-radius: 4px; font-size: 15px; font-weight: 800; }
+    .brand-copy { min-width: 0; }
+    .brand-copy strong { display: block; font-size: 16px; line-height: 1.2; }
+    .brand-copy span { color: #91a6ba; font-size: 11px; }
+    .nav { padding: 10px 0 18px; }
+    .nav-group { border-bottom: 1px solid #102b42; }
+    .group-button, .nav-item { width: 100%; color: inherit; border: 0; text-align: left; }
+    .group-button { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 15px; color: #f4f7fa; background: transparent; font-weight: 650; }
+    .group-button:hover { background: #061d30; }
+    .group-button .chevron { width: 16px; height: 16px; margin-left: auto; transition: transform .18s ease-out; }
+    .group-button[aria-expanded="true"] .chevron { transform: rotate(90deg); }
+    .group-items { margin: 0; padding: 3px 0 7px; list-style: none; background: var(--sidebar-deep); }
+    .group-items[hidden] { display: none; }
+    .nav-item { position: relative; display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 12px 8px 42px; color: var(--sidebar-text); background: transparent; }
+    .nav-item:hover { color: #fff; background: #08243a; }
+    .nav-item.active { color: #fff; background: var(--primary); }
+    .nav-item.active::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: #91caff; }
+    .nav-item .label { min-width: 0; overflow-wrap: anywhere; }
+    .nav-item .readonly { margin-left: auto; padding: 1px 5px; color: #c9d9e8; border: 1px solid #425e75; border-radius: 3px; font-size: 10px; }
+    .nav-item.active .readonly { color: #fff; border-color: #91caff; }
+    .main { min-width: 0; margin-left: var(--sidebar-width); transition: margin-left .2s ease-out; }
+    .topbar { position: sticky; top: 34px; z-index: 30; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 18px; background: #fff; border-bottom: 1px solid var(--border); box-shadow: 0 1px 4px #1f29370d; }
+    .icon-button { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; color: #526170; background: transparent; border: 1px solid transparent; border-radius: 4px; }
+    .icon-button:hover { color: var(--primary); background: var(--primary-soft); border-color: #bae0ff; }
+    .breadcrumb { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--muted); }
+    .breadcrumb strong { color: var(--text); font-weight: 650; }
+    .top-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
+    .account { display: flex; align-items: center; gap: 8px; margin-left: 5px; color: #44505d; white-space: nowrap; }
+    .avatar { display: grid; place-items: center; width: 30px; height: 30px; color: #0050b3; background: #bae0ff; border-radius: 50%; font-weight: 750; }
+    .tagbar { display: flex; align-items: center; min-height: 36px; padding: 0 14px; background: #fff; border-bottom: 1px solid var(--border); }
+    .page-tag { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 4px 10px; color: var(--primary); background: var(--primary-soft); border: 1px solid #91caff; border-radius: 3px; font-size: 12px; }
+    .content { padding: 18px; }
+    .page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
+    .page-heading h1 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 22px; line-height: 1.3; }
+    .page-heading p { max-width: 760px; margin: 5px 0 0; color: var(--muted); }
+    .badge { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 7px; border-radius: 3px; font-size: 11px; font-weight: 650; white-space: nowrap; }
+    .badge.readonly { color: #245b78; background: #e6f7ff; border: 1px solid #91d5ff; }
+    .badge.success { color: var(--success); background: var(--success-soft); border: 1px solid #b7eb8f; }
+    .badge.warning { color: var(--warning); background: var(--warning-soft); border: 1px solid #ffd591; }
+    .badge.neutral { color: #4a5563; background: #f0f2f5; border: 1px solid #d9d9d9; }
+    .button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 40px; padding: 7px 13px; color: #334155; background: #fff; border: 1px solid #b9c2cc; border-radius: 4px; font-weight: 600; }
+    .button:hover { color: var(--primary); border-color: var(--primary); background: #f5faff; }
+    .button.primary { color: #fff; background: var(--primary); border-color: var(--primary); }
+    .button.primary:hover { background: var(--primary-hover); }
+    .button:disabled { color: #9aa4af; background: #f5f5f5; border-color: #d9d9d9; }
+    .panel { overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 1px 3px #1f29370a; }
+    .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 50px; padding: 10px 15px; border-bottom: 1px solid var(--border); }
+    .panel-head h2 { margin: 0; font-size: 15px; }
+    .panel-head span { color: var(--muted); font-size: 12px; }
+    .toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface-soft); border-bottom: 1px solid var(--border); }
+    .search { width: min(280px, 100%); min-height: 40px; padding: 7px 10px; color: var(--text); background: #fff; border: 1px solid #b9c2cc; border-radius: 4px; }
+    .toolbar .spacer { flex: 1; }
+    .result-count { color: var(--muted); white-space: nowrap; }
+    .notice { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 12px; padding: 10px 12px; color: #245b78; background: #e6f7ff; border: 1px solid #91d5ff; border-radius: 4px; }
+    .notice.warning { color: var(--warning); background: var(--warning-soft); border-color: #ffd591; }
+    .notice p { margin: 0; }
+    .data-list { width: 100%; }
+    .list-row { display: grid; grid-template-columns: minmax(160px, 1.3fr) minmax(140px, 1fr) minmax(110px, .8fr) minmax(150px, 1fr) 120px; align-items: center; gap: 14px; min-height: 52px; padding: 10px 14px; border-bottom: 1px solid #edf0f2; }
+    .list-row:last-child { border-bottom: 0; }
+    .list-row.header { min-height: 40px; color: var(--muted); background: var(--surface-soft); font-size: 12px; font-weight: 650; }
+    .list-row:not(.header):hover { background: #fafcff; }
+    .cell { min-width: 0; overflow-wrap: anywhere; }
+    .cell strong { display: block; font-weight: 650; }
+    .secondary { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
+    .mono { font-family: "Cascadia Code", Consolas, monospace; font-variant-numeric: tabular-nums; }
+    .row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
+    .link-button { min-height: 36px; padding: 5px 7px; color: var(--primary); background: transparent; border: 0; border-radius: 3px; font-weight: 600; }
+    .link-button:hover { background: var(--primary-soft); }
+    .link-button:disabled { color: #9aa4af; background: transparent; }
+    .stat-strip { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 12px; margin-bottom: 12px; }
+    .stat { padding: 14px; background: #fff; border: 1px solid var(--border); border-radius: 6px; border-top: 3px solid var(--primary); }
+    .stat:nth-child(2) { border-top-color: #13a8a8; }
+    .stat:nth-child(3) { border-top-color: #52c41a; }
+    .stat:nth-child(4) { border-top-color: #faad14; }
+    .stat span { color: var(--muted); font-size: 12px; }
+    .stat strong { display: block; margin-top: 4px; font-size: 23px; font-variant-numeric: tabular-nums; }
+    .mobile-scrim { display: none; position: fixed; z-index: 45; inset: 34px 0 0; background: #0f172a80; }
+    @media (max-width: 920px) {
+      .stat-strip { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
+      .list-row { grid-template-columns: minmax(150px, 1.3fr) minmax(120px, 1fr) minmax(100px, .8fr) 110px; }
+      .list-row > :nth-child(4) { display: none; }
+    }
+    @media (max-width: 720px) {
+      .prototype-bar span { display: none; }
+      .sidebar { transform: translateX(-100%); box-shadow: 10px 0 28px #0015294d; }
+      body.sidebar-open .sidebar { transform: translateX(0); }
+      body.sidebar-open .mobile-scrim { display: block; }
+      .main { margin-left: 0; }
+      .content { padding: 12px; }
+      .topbar { padding: 0 10px; }
+      .breadcrumb { font-size: 13px; }
+      .breadcrumb > span:first-child, .account > span { display: none; }
+      .page-heading { flex-direction: column; }
+      .page-heading h1 { font-size: 20px; }
+      .toolbar { flex-wrap: wrap; }
+      .search { flex: 1 1 200px; width: auto; }
+      .toolbar .spacer { display: none; }
+      .result-count { width: 100%; }
+      .list-row, .list-row.header { grid-template-columns: 1fr; gap: 7px; }
+      .list-row.header { display: none; }
+      .list-row { align-items: start; padding: 13px 14px; }
+      .list-row > :nth-child(4) { display: block; }
+      .cell::before { display: block; margin-bottom: 1px; color: #7a8794; content: attr(data-label); font-size: 11px; font-weight: 600; }
+      .row-actions { justify-content: flex-start; }
+      .stat-strip { grid-template-columns: 1fr 1fr; }
+    }
+    @media (max-width: 390px) {
+      .stat-strip { grid-template-columns: 1fr; }
+      .prototype-bar { padding-inline: 10px; }
+      .top-actions .icon-button:first-child { display: none; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
+    }
+  </style>
+</head>
+<body>
+  <div class="prototype-bar"><strong>#59 设计证据 v1</strong><span>管理端分组导航与适用系统模块</span></div>
+  <div class="app-shell">
+    <aside class="sidebar" id="sidebar" aria-label="管理端主导航">
+      <div class="brand"><span class="brand-mark">C</span><span class="brand-copy"><strong>Chorus Admin</strong><span>运营与系统管理</span></span></div>
+      <nav class="nav" id="primary-nav"></nav>
+    </aside>
+    <div class="mobile-scrim" id="mobile-scrim" aria-hidden="true"></div>
+    <div class="main">
+      <header class="topbar">
+        <button class="icon-button" id="sidebar-toggle" type="button" aria-label="打开或关闭侧边栏" aria-controls="sidebar" aria-expanded="false"><i data-lucide="file-text"></i></button>
+        <div class="breadcrumb" aria-label="面包屑"><span>首页</span><span>/</span><strong id="breadcrumb-group">生成配置</strong><span>/</span><strong id="breadcrumb-page">上游服务商</strong></div>
+        <div class="top-actions"><button class="icon-button" type="button" aria-label="搜索"><i data-lucide="search"></i></button><button class="icon-button" type="button" aria-label="全屏"><i data-lucide="eye"></i></button><div class="account"><span class="avatar">管</span><span>当前管理员</span></div></div>
+      </header>
+      <div class="tagbar"><span class="page-tag"><i data-lucide="check"></i><span id="tag-title">上游服务商</span></span></div>
+      <main class="content" id="page-content" tabindex="-1"></main>
+    </div>
+  </div>
+  <script>
+    const groups = [
+      { id: 'configuration', title: '生成配置', icon: 'image', items: [
+        { id: 'providers', title: '上游服务商', icon: 'image' },
+        { id: 'models', title: '模型配置', icon: 'image' },
+        { id: 'routes', title: '路由策略', icon: 'refresh-cw' },
+        { id: 'templates', title: '提示词模板', icon: 'file-text' }
+      ]},
+      { id: 'monitoring', title: '运行监控', icon: 'clock-3', items: [
+        { id: 'health', title: '上游健康', icon: 'shield-check' },
+        { id: 'generations', title: '生成记录', icon: 'clock-3' }
+      ]},
+      { id: 'access', title: '用户与访问', icon: 'eye', items: [
+        { id: 'end-users', title: '终端用户', icon: 'eye' },
+        { id: 'api-keys', title: 'API 密钥', icon: 'shield-check' }
+      ]},
+      { id: 'system', title: '系统管理', icon: 'refresh-cw', items: [
+        { id: 'admins', title: '管理员账号', icon: 'shield-check' },
+        { id: 'roles', title: '角色权限', icon: 'shield-check' },
+        { id: 'menus', title: '菜单结构', icon: 'file-text', readonly: true },
+        { id: 'apis', title: '接口清单', icon: 'file-text', readonly: true },
+        { id: 'login-logs', title: '登录日志', icon: 'file-text', readonly: true }
+      ]}
+    ];
+    const pageMeta = {
+      providers: ['上游服务商', '维护生成服务的连接、启停与健康状态。凭据不会出现在列表中。'],
+      models: ['模型配置', '按上游服务商维护可用于文本与图片生成的模型。'],
+      routes: ['路由策略', '配置生成类型、模型优先级和失败切换顺序。'],
+      templates: ['提示词模板', '维护可复用的系统提示词模板和启用状态。'],
+      health: ['上游健康', '查看连接状态、最近探测结果和熔断状态。'],
+      generations: ['生成记录', '按任务查看状态、耗时和上游尝试记录。'],
+      'end-users': ['终端用户', '查看使用 Portal 和 OpenAPI 的受控用户，与管理员账号分开管理。'],
+      'api-keys': ['API 密钥', '查看 API Key 元数据和状态；完整 Key 不在管理端列表回显。'],
+      admins: ['管理员账号', '维护管理端登录账号；当前账号和最后一个管理员不能被删除。'],
+      roles: ['角色权限', '维护管理端角色和菜单授权；内置运营角色受到保护。'],
+      menus: ['菜单结构', '查看当前生效的版本化菜单结构。'],
+      apis: ['接口清单', '查看管理端 API 与权限映射。'],
+      'login-logs': ['登录日志', '查看管理员登录结果和安全元数据。']
+    };
+    const list = (headers, rows) => `<div class="data-list"><div class="list-row header">${headers.map(h => `<div>${h}</div>`).join('')}</div>${rows.map(row => `<div class="list-row">${row.map((value, index) => `<div class="cell${index === row.length - 1 ? ' row-actions' : ''}" data-label="${headers[index]}">${value}</div>`).join('')}</div>`).join('')}</div>`;
+    const badge = (text, type = 'neutral') => `<span class="badge ${type}">${text}</span>`;
+    const action = (text, disabled = false) => `<button class="link-button" type="button"${disabled ? ' disabled' : ''}>${text}</button>`;
+    function representativeContent(id) {
+      if (id === 'providers') return list(['名称', '协议', '状态', '最近检查', '操作'], [
+        ['<strong>示例图像服务</strong><span class="secondary">凭据已配置</span>', 'OpenAI 兼容', badge('已启用', 'success'), '刚刚 · 正常', action('查看') + action('编辑')],
+        ['<strong>备用文本服务</strong><span class="secondary">凭据已配置</span>', 'OpenAI 兼容', badge('已停用'), '未检查', action('查看') + action('编辑')]
+      ]);
+      if (id === 'models') return list(['模型名称', '用途', 'Provider', '状态', '操作'], [['<strong>示例图片模型</strong>', '文生图 / 图片编辑', '示例图像服务', badge('已启用', 'success'), action('编辑')], ['<strong>示例文本模型</strong>', '文本生成', '备用文本服务', badge('已停用'), action('编辑')]]);
+      if (id === 'routes') return list(['路由名称', '生成类型', '模型数', '状态', '操作'], [['<strong>图片生成主路由</strong>', '文生图', '2', badge('已启用', 'success'), action('编辑')], ['<strong>文本生成主路由</strong>', '文本', '1', badge('已启用', 'success'), action('编辑')]]);
+      if (id === 'templates') return list(['模板名称', '用途', '版本', '状态', '操作'], [['<strong>商品图增强</strong>', '文生图', 'v3', badge('已启用', 'success'), action('编辑')], ['<strong>文本润色</strong>', '文本', 'v2', badge('草稿', 'warning'), action('编辑')]]);
+      if (id === 'health') return list(['上游服务商', '连接状态', '熔断状态', '最近探测', '操作'], [['<strong>示例图像服务</strong>', badge('正常', 'success'), '关闭', '刚刚', action('查看')], ['<strong>备用文本服务</strong>', badge('未探测', 'warning'), '关闭', '-', action('探测')]]);
+      if (id === 'generations') return list(['任务编号', '终端用户', '类型', '状态', '操作'], [['<strong class="mono">#DEMO-20</strong>', '示例用户 A', '图片', badge('成功', 'success'), action('查看')], ['<strong class="mono">#DEMO-19</strong>', '示例用户 B', '文本', badge('失败', 'warning'), action('查看')]]);
+      if (id === 'end-users') return list(['账号', '显示名称', '状态', '创建时间', '操作'], [['<strong>示例用户 A</strong>', '受控用户', badge('正常', 'success'), '示例时间', action('查看')], ['<strong>示例用户 B</strong>', '受控用户', badge('停用'), '示例时间', action('查看')]]);
+      if (id === 'api-keys') return list(['所属用户', '名称 / 前缀', '状态', '最近使用', '操作'], [['<strong>示例用户 A</strong>', '自动化脚本<span class="secondary mono">chorus_demo</span>', badge('有效', 'success'), '示例时间', action('查看')], ['<strong>示例用户 B</strong>', '旧版接入<span class="secondary mono">chorus_old</span>', badge('已撤销'), '示例时间', action('查看')]]);
+      if (id === 'admins') return `<div class="notice warning"><i data-lucide="alert-circle"></i><p>当前登录账号不能删除；系统至少保留一个可用管理员。</p></div>${list(['管理员', '角色', '状态', '保护', '操作'], [['<strong>当前管理员</strong><span class="secondary">当前登录账号</span>', '超级管理员', badge('正常', 'success'), badge('禁止删除', 'warning'), action('编辑') + action('删除', true)], ['<strong>备用管理员</strong>', '运营管理员', badge('正常', 'success'), '最后一名时禁止删除', action('编辑') + action('删除')]])}`;
+      if (id === 'roles') return `<div class="notice warning"><i data-lucide="shield-check"></i><p>内置 <span class="mono">chorus_operator</span> 角色可调整授权，但不能改名或删除。</p></div>${list(['角色', '角色标识', '用户数', '保护', '操作'], [['<strong>超级管理员</strong>', '<span class="mono">admin</span>', '1', badge('内置', 'warning'), action('授权')], ['<strong>运营管理员</strong>', '<span class="mono">chorus_operator</span>', '1', badge('内置', 'warning'), action('授权') + action('删除', true)]])}`;
+      if (id === 'menus') return `<div class="notice"><i data-lucide="shield-check"></i><p>菜单由版本化 migration 管理。本页面仅用于核对生效结构，不提供新增、编辑、删除或拖拽排序。</p></div>${list(['分组 / 模块', '层级', '状态', '来源', '操作'], [['<strong>生成配置</strong><span class="secondary">4 个模块</span>', '一级分组', badge('显示', 'success'), '版本化 migration', action('查看')], ['<strong>系统管理</strong><span class="secondary">5 个模块</span>', '一级分组', badge('显示', 'success'), '版本化 migration', action('查看')]])}`;
+      if (id === 'apis') return `<div class="notice"><i data-lucide="shield-check"></i><p>接口与权限映射仅供核对。变更必须通过生产实现工单和版本化 migration。</p></div>${list(['接口名称', '方法', '路径', '权限状态', '操作'], [['<strong>Provider 列表</strong>', '<span class="mono">GET</span>', '<span class="mono">/api/v1/chorus/providers</span>', badge('已映射', 'success'), action('查看')], ['<strong>生成记录</strong>', '<span class="mono">GET</span>', '<span class="mono">/api/v1/chorus/generations</span>', badge('已映射', 'success'), action('查看')]])}`;
+      return `<div class="notice"><i data-lucide="shield-check"></i><p>登录审计记录只读保存，页面不提供删除和清空操作；示例不包含真实账号、IP 或设备信息。</p></div>${list(['时间', '管理员', '结果', '来源', '操作'], [['<strong>示例时间</strong>', '示例管理员', badge('成功', 'success'), '已脱敏', action('查看')], ['<strong>示例时间</strong>', '示例管理员', badge('失败', 'warning'), '已脱敏', action('查看')]])}`;
+    }
+    function renderNav() {
+      const nav = document.getElementById('primary-nav');
+      nav.innerHTML = groups.map(group => `<section class="nav-group"><button class="group-button" type="button" data-group="${group.id}" aria-expanded="true" aria-controls="group-${group.id}"><i data-lucide="${group.icon}"></i><span>${group.title}</span><i class="chevron" data-lucide="plus"></i></button><ul class="group-items" id="group-${group.id}">${group.items.map(item => `<li><button class="nav-item${item.id === 'providers' ? ' active' : ''}" type="button" data-page="${item.id}" aria-current="${item.id === 'providers' ? 'page' : 'false'}"><i data-lucide="${item.icon}"></i><span class="label">${item.title}</span>${item.readonly ? '<span class="readonly">只读</span>' : ''}</button></li>`).join('')}</ul></section>`).join('');
+      nav.querySelectorAll('[data-group]').forEach(button => button.addEventListener('click', () => {
+        const expanded = button.getAttribute('aria-expanded') === 'true';
+        button.setAttribute('aria-expanded', String(!expanded));
+        document.getElementById(button.getAttribute('aria-controls')).hidden = expanded;
+      }));
+      nav.querySelectorAll('[data-page]').forEach(button => button.addEventListener('click', () => selectPage(button.dataset.page)));
+      icons();
+    }
+    function selectPage(id) {
+      const group = groups.find(entry => entry.items.some(item => item.id === id));
+      const item = group.items.find(entry => entry.id === id);
+      document.querySelectorAll('[data-page]').forEach(button => {
+        const active = button.dataset.page === id;
+        button.classList.toggle('active', active);
+        button.setAttribute('aria-current', active ? 'page' : 'false');
+      });
+      document.getElementById('breadcrumb-group').textContent = group.title;
+      document.getElementById('breadcrumb-page').textContent = item.title;
+      document.getElementById('tag-title').textContent = item.title;
+      renderPage(id, item.readonly);
+      if (window.matchMedia('(max-width: 720px)').matches) closeSidebar();
+    }
+    function renderPage(id, readonly = false) {
+      const [title, description] = pageMeta[id];
+      const content = document.getElementById('page-content');
+      const stats = id === 'providers' ? `<section class="stat-strip" aria-label="生成配置摘要"><div class="stat"><span>上游服务商</span><strong>2</strong></div><div class="stat"><span>启用模型</span><strong>3</strong></div><div class="stat"><span>启用路由</span><strong>2</strong></div><div class="stat"><span>健康异常</span><strong>0</strong></div></section>` : '';
+      content.innerHTML = `<header class="page-heading"><div><h1>${title}${readonly ? '<span class="badge readonly"><i data-lucide="shield-check"></i>只读</span>' : ''}</h1><p>${description}</p></div>${readonly ? '' : '<button class="button primary" type="button"><i data-lucide="plus"></i>新增</button>'}</header>${stats}<section class="panel"><div class="panel-head"><div><h2>${title}列表</h2><span>原型使用构造数据</span></div></div><div class="toolbar"><label class="sr-only" for="page-search">搜索</label><input class="search" id="page-search" type="search" placeholder="输入关键词"><button class="button" type="button"><i data-lucide="refresh-cw"></i>重置</button><span class="spacer"></span><span class="result-count">共 2 条</span></div>${representativeContent(id)}</section>`;
+      content.focus();
+      icons();
+    }
+    function icons() { window.renderChorusIcons?.(); }
+    function openSidebar() { document.body.classList.add('sidebar-open'); document.getElementById('sidebar-toggle').setAttribute('aria-expanded', 'true'); }
+    function closeSidebar() { document.body.classList.remove('sidebar-open'); document.getElementById('sidebar-toggle').setAttribute('aria-expanded', 'false'); }
+    document.addEventListener('DOMContentLoaded', () => {
+      renderNav();
+      renderPage('providers');
+      document.getElementById('sidebar-toggle').addEventListener('click', () => document.body.classList.contains('sidebar-open') ? closeSidebar() : openSidebar());
+      document.getElementById('mobile-scrim').addEventListener('click', closeSidebar);
+      document.addEventListener('keydown', event => { if (event.key === 'Escape') closeSidebar(); });
+      window.addEventListener('resize', () => { if (!window.matchMedia('(max-width: 720px)').matches) closeSidebar(); });
+      icons();
+    });
+  </script>
+</body>
+</html>