@airalogy/airalogy-bd 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -4,6 +4,22 @@
 
 ## [Unreleased]
 
+## [1.3.0] - 2026-10-27
+
+- 统一界面字体、字号与行高，改善正文、表格和说明文字的可读性，手机端通过布局适配而非缩小正文。
+
+- 将外部 AI 工具权限并入邀请和成员权限编辑，与角色、事项范围一起保存；默认关闭，支持在全局功能关闭时预先分配权限。
+- 个人工具连接、凭据生成与撤销移到「我的账号」，外部工具全局开关移到「AI 设置」，草稿统一从「待确认修改」进入；保留原草稿链接及旧管理入口跳转。
+- 统一工作台、管理中心、账号和草稿页的顶部导航：Logo 与工作区名称在最上方，账号操作收进个人菜单，下方承载业务操作和页内导航，并适配手机屏幕。
+- 调整尚未接受邀请的成员权限时保留原邀请链接和有效期；增加授权事务、并发冲突、只读边界及撤销后凭据和草稿失效的回归测试。
+
+## [1.2.1] - 2026-10-27
+
+- 成员管理以列表为主，支持按姓名、用户名、邮箱和状态筛选；邀请及权限调整按需打开编辑面板，保留权限预览、固定操作区、未保存提醒和保存失败反馈。
+- 统一管理中心导航、表单分组、状态提示和间距，优化 AI 设置、用量费用、远程接入、备份、账号及登录页面。
+- 优化手机和中等屏幕布局，主工作台的推进阶段与关键进展上下排列，资料详情操作按用途分组。
+- 完善键盘焦点返回、错误提示定位和邀请流程说明。
+
 ## [1.2.0] - 2026-10-26
 
 - 邀请成员时邮箱改为选填，由成员激活时自行补充；保留内部身份、原有权限及历史，拒绝占用其他成员的邮箱。

package/README.md

@@ -6,7 +6,7 @@ Airalogy BD 是一套支持本地使用与团队服务器部署的 BD 管理工
 
 首次发行基线为 **1.0.0**，版本统一使用 `x.y.z`。版本内容见 [更新记录](CHANGELOG.md)，后续版本规则见 [版本管理说明](docs/versioning.md)。本地正式使用安装固定版本，源码安装用于开发；版本号不代表安装包、镜像或线上服务已经发布。
 
-可选的 [Codex 远程接入](docs/remote-access.md) 默认关闭：管理员授权后，成员可通过 MCP 查询和提交草稿，由本人在 BD 网页确认后保存。与内置 AI 的开关、模型配置和计费相互独立。
+可选的 [Codex 远程接入](docs/remote-access.md) 默认关闭：管理员在邀请或调整成员时分配权限，成员在「我的账号」连接工具，通过 MCP 查询和提交草稿，由本人在「待确认修改」核对保存。与内置 AI 的开关、模型配置和计费相互独立。
 
 本仓库只保存通用实现、数据校验、内容模板和虚构测试数据，不保存客户业务、真实联系人、合同或融资资料；产品名称和开发公司的版权归属属于公开产品信息。
 

package/dashboard/app/AccountBar.tsx

@@ -1,20 +1,39 @@
 "use client";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
+import { BrandIdentity, BrandLogo } from "./Branding";
 import { teamRequest, type TeamUser } from "./lib/team-client";
+import type { DashboardData } from "./lib/types";
 
-export default function AccountBar({ user, management = false }: { user: TeamUser; management?: boolean }) {
-  const router = useRouter();
+export default function AccountBar({ user, workspace }: { user: TeamUser | null; workspace?: DashboardData["workspace"] }) {
+  const router = useRouter(), pathname = usePathname();
+  const menu = useRef<HTMLDetailsElement>(null);
   const [error, setError] = useState("");
+  useEffect(() => {
+    const close = (event: PointerEvent) => { if (!menu.current?.contains(event.target as Node) && menu.current) menu.current.open = false; };
+    document.addEventListener("pointerdown", close);
+    return () => document.removeEventListener("pointerdown", close);
+  }, []);
   async function logout() {
-    try { await teamRequest("auth_logout", {}, user.csrf); router.replace("/login"); router.refresh(); }
+    try { await teamRequest("auth_logout", {}, user?.csrf || ""); router.replace("/login"); router.refresh(); }
     catch (err) { setError((err as Error).message); }
   }
-  return <><div className="team-bar"><span>{user.name} · {{ admin: "管理员", editor: "编辑成员", viewer: "只读成员" }[user.role]}</span><div>
-    {management ? <Link className="admin-button" href="/">返回工作台</Link> : user.role === "admin" && <Link className="admin-button" href="/admin">管理中心</Link>}
-    <Link className="admin-button" href="/account">我的账号</Link>
-    <Link className="admin-button" href="/remote">远程接入与草稿</Link>
-    <button className="admin-button" onClick={() => void logout()}>退出登录</button>
-  </div></div>{error && <p className="admin-alert" role="alert">{error}</p>}</>;
+  return <>
+    <header className="app-header">
+      <div className="app-header-inner">
+        <Link className="app-brand" href="/" aria-label="返回工作台">{workspace?<><BrandLogo/><span><strong>{workspace.short_name}</strong><small>{workspace.workspace_title}</small></span></>:<BrandIdentity/>}</Link>
+        <nav className="app-navigation" aria-label="全局导航">
+          <Link href="/" aria-current={pathname==="/"?"page":undefined}>工作台</Link>
+          {user&&<Link href="/remote" aria-current={pathname==="/remote"?"page":undefined}>待确认修改</Link>}
+          {(!user||user.role==="admin")&&<Link href="/admin" aria-current={pathname==="/admin"?"page":undefined}>管理中心</Link>}
+        </nav>
+        {user?<details className="app-account" ref={menu} onKeyDown={event=>{if(event.key==="Escape"&&menu.current){menu.current.open=false;menu.current.querySelector("summary")?.focus();}}}>
+          <summary aria-label={`${user.name}，账号菜单`} className={pathname==="/account"?"is-current":undefined}><span className="app-avatar" aria-hidden="true">{Array.from(user.name)[0]}</span><span className="app-account-name">{user.name}<small>{{admin:"管理员",editor:"编辑成员",viewer:"只读成员"}[user.role]}</small></span><span className="app-account-chevron" aria-hidden="true">⌄</span></summary>
+          <div className="app-account-menu"><Link href="/account" onClick={()=>{if(menu.current)menu.current.open=false;}}>我的账号</Link><Link href="/account#ai-tools" onClick={()=>{if(menu.current)menu.current.open=false;}}>AI 工具连接</Link><button type="button" onClick={()=>void logout()}>退出登录</button></div>
+        </details>:<span className="app-local-label">本机工作区</span>}
+      </div>
+    </header>
+    {error&&<p className="admin-alert" role="alert">{error}</p>}
+  </>;
 }

package/dashboard/app/AccountSettings.tsx

@@ -2,11 +2,13 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import AccountBar from "./AccountBar";
-import { BrandIdentity } from "./Branding";
+import RemoteAccess from "./RemoteAccess";
+import type { DashboardData } from "./lib/types";
+import {SettingsIcon,SettingsPanelHeader,SettingsStatus} from "./SettingsUI";
 import { teamRequest, type TeamUser } from "./lib/team-client";
 import { usernameHelp, usernamePattern } from "./lib/username-policy";
 
-export default function AccountSettings({ user }: { user: TeamUser }) {
+export default function AccountSettings({ user, endpoint, workspace }: { user: TeamUser; endpoint: string; workspace?: DashboardData["workspace"] }) {
   const router = useRouter();
   const [username, setUsername] = useState(user.username || "");
   const [saved, setSaved] = useState(!!user.username);
@@ -22,15 +24,18 @@ export default function AccountSettings({ user }: { user: TeamUser }) {
     } catch (err) { setError((err as Error).message); }
     finally { setBusy(false); }
   }
-  return <><AccountBar user={user} management /><main className="page-shell account-settings">
-    <BrandIdentity /><h1>我的账号</h1>
-    <section className="panel"><p>姓名：{user.name}</p><p>账号邮箱：{user.email}（{user.email_verified?"已验证":"未验证"}）</p>
-      <p>用户名和邮箱均可登录，姓名用于展示。设置用户名不会改变你的事项权限或历史记录。</p>
-      {error && <p role="alert" className="admin-alert">{error}</p>}
-      <form className="team-form" onSubmit={save}><label>用户名<input required autoComplete="username" autoCapitalize="none" spellCheck={false} pattern={usernamePattern} minLength={3} maxLength={30} readOnly={saved} aria-describedby="account-username-help" value={username} onChange={e => setUsername(e.target.value)} /></label>
-        <p id="account-username-help" className={saved ? "admin-notice" : "admin-help"} role={saved ? "status" : undefined}>{saved ? "已锁定，不能修改。可使用此用户名登录。" : usernameHelp}</p>
-        {!saved && <button className="admin-button admin-primary" disabled={busy}>{busy ? "正在保存…" : "设置用户名"}</button>}
-      </form><p className="admin-help">忘记密码或无法取得动态验证码时，请联系管理员重新签发登录邀请。</p>
+  return <><AccountBar user={user} workspace={workspace} /><main className="page-shell account-settings">
+    <header className="settings-page-head"><div><h1>我的账号</h1><p>管理登录资料和个人 AI 工具连接。</p></div></header>
+    <nav className="account-section-nav" aria-label="账号设置内容"><a href="#profile">账号资料</a><a href="#ai-tools">AI 工具连接</a></nav>
+    <section id="profile" className="panel"><SettingsPanelHeader title="账号资料" description="用户名和邮箱均可登录，姓名用于页面展示。"/>
+      <dl className="account-profile"><div><dt>姓名</dt><dd>{user.name}</dd></div><div><dt>账号邮箱</dt><dd>{user.email}<SettingsStatus tone={user.email_verified?"success":"neutral"}>{user.email_verified?"已验证":"未验证"}</SettingsStatus></dd></div></dl>
+      {error&&<p role="alert" className="admin-alert">{error}</p>}
+      <form className="team-form account-username" onSubmit={save}><label><span>用户名 {saved&&<span className="field-optional">已锁定</span>}</span><span className="username-input"><input required autoComplete="username" autoCapitalize="none" spellCheck={false} pattern={usernamePattern} minLength={3} maxLength={30} readOnly={saved} aria-describedby="account-username-help" value={username} onChange={e=>setUsername(e.target.value)}/>{saved&&<SettingsIcon name="lock"/>}</span></label>
+        <p id="account-username-help" className="admin-help" role={saved?"status":undefined}>{saved?"此用户名不能修改，可直接用于登录。":usernameHelp}</p>
+        {!saved&&<button className="admin-button admin-primary" disabled={busy}>{busy?"正在保存…":"设置用户名"}</button>}
+      </form>
+      <div className="account-recovery-note"><h3>账号恢复</h3><p>忘记密码或无法取得动态验证码时，请联系管理员重新签发登录邀请。账号恢复保留原有事项权限和历史记录。</p></div>
     </section>
+    <RemoteAccess user={user} mode="connection" endpoint={endpoint}/>
   </main></>;
 }

package/dashboard/app/AdminCenter.tsx

@@ -6,28 +6,32 @@ import AiUsage from "./AiUsage";
 import BackupSettings from "./BackupSettings";
 import TeamManagement from "./TeamManagement";
 import RemoteAccess from "./RemoteAccess";
-import { BrandIdentity } from "./Branding";
-import type { TeamUser } from "./lib/team-client";
-import type { Project } from "./lib/types";
+import {SettingsIcon,SettingsPanelHeader} from "./SettingsUI";
+import type {TeamUser} from "./lib/team-client";
+import type {Project,DashboardData} from "./lib/types";
 
-const sections = { members: "成员与权限", ai: "AI 设置", usage: "用量与费用", remote: "远程接入", backup: "备份" };
-type Section = keyof typeof sections;
-export default function AdminCenter({ user, projects, timezone, unavailable, initialSection, dates }: {
-  user: TeamUser | null; projects: Pick<Project, "id" | "name">[]; timezone: string; unavailable: boolean; initialSection?: string; dates: { from: string; to: string };
+const sections={members:{title:"成员与权限",description:"邀请成员 · 分配访问范围"},ai:{title:"AI 设置",description:"内置 AI · 外部工具"},usage:{title:"用量与费用",description:"请求统计 · 费用估算"},backup:{title:"备份",description:"自动备份 · 数据保护"}};
+type Section=keyof typeof sections;
+export default function AdminCenter({user,projects,timezone,unavailable,initialSection,dates,workspace}:{
+  workspace?:DashboardData["workspace"];user:TeamUser|null;projects:Pick<Project,"id"|"name">[];timezone:string;unavailable:boolean;initialSection?:string;dates:{from:string;to:string};
 }) {
-  const section: Section = initialSection && Object.hasOwn(sections, initialSection) ? initialSection as Section : user ? "members" : "ai";
+  const section:Section=initialSection&&Object.hasOwn(sections,initialSection)?initialSection as Section:user?"members":"ai";
   return <>
-    {user ? <AccountBar user={user} management /> : <div className="team-bar"><span>本机使用者 · 管理权限</span><Link className="admin-button" href="/">返回工作台</Link></div>}
+    <AccountBar user={user} workspace={workspace}/>
     <main className="page-shell admin-center">
-      <header><BrandIdentity /><div className="eyebrow">仅管理员可访问</div><h1>管理中心</h1><p>管理成员访问权限、AI 服务、使用预算与备份。</p></header>
-      {!user && <p className="admin-notice">当前为本机单人模式，由本机使用者管理设置。团队模式启用后，仅管理员账号可以进入本页面。</p>}
-      {unavailable && <p className="admin-alert" role="alert">工作区资料暂时不可用，事项列表未能加载，请先检查工作区。</p>}
-      <nav className="admin-center-nav" aria-label="管理中心功能">{Object.entries(sections).map(([key, label]) => <Link key={key} href={`/admin?section=${key}`} aria-current={section === key ? "page" : undefined}>{label}</Link>)}</nav>
-      {section === "members" && (user ? <TeamManagement user={user} projects={projects} timezone={timezone} /> : <section className="panel admin-center-panel"><h2>成员与权限</h2><p>成员邀请、停用账号和事项授权在团队模式中提供。本机单人模式无需创建账号。</p></section>)}
-      {section === "ai" && <AiSettings />}
-      {section === "usage" && <section className="panel admin-center-panel"><h2>AI 用量与费用</h2><AiUsage initialFrom={dates.from} initialTo={dates.to} /></section>}
-      {section === "backup" && <BackupSettings timezone={timezone} onChanged={() => {}} />}
-      {section === "remote" && (user ? <RemoteAccess user={user} manage /> : <section className="panel admin-center-panel"><h2>Codex 远程接入</h2><p>远程接入仅在配置了账号和 HTTPS 的团队模式中提供。</p></section>)}
+      <header className="settings-page-head"><div><h1>管理中心</h1><p>管理团队访问、AI 服务与数据备份。</p></div><span className="settings-access-label"><SettingsIcon name="lock"/>仅管理员可访问</span></header>
+      {!user&&<p className="admin-notice">当前为本机单人模式。成员邀请和权限管理在团队模式中提供。</p>}
+      {unavailable&&<p className="admin-alert" role="alert">工作区资料暂时不可用，事项列表未能加载，请先检查工作区。</p>}
+      <div className="settings-layout">
+        <nav className="admin-center-nav" aria-label="管理中心功能">{Object.entries(sections).map(([key,item])=><Link key={key} href={`/admin?section=${key}`} aria-current={section===key?"page":undefined}><SettingsIcon name={key as Section}/><span><strong>{item.title}</strong><small>{item.description}</small></span></Link>)}</nav>
+        <div className="settings-content" key={section}>
+          {section==="members"&&(user?<TeamManagement user={user} projects={projects} timezone={timezone}/>:<section className="panel admin-center-panel"><SettingsPanelHeader title="成员与权限" description="本机单人模式无需创建账号。"/><p>部署为团队模式后，可在这里邀请成员、停用账号并分配事项权限。</p></section>)}
+          {section==="ai"&&<>{user&&<nav className="account-section-nav" aria-label="AI 设置内容"><a href="#builtin-ai">内置 AI 助手</a><a href="#external-ai">外部 AI 工具</a></nav>}<div id="builtin-ai"><AiSettings/></div>{user&&<RemoteAccess user={user} mode="settings"/>}</>}
+          {section==="usage"&&<section className="panel admin-center-panel"><SettingsPanelHeader title="用量与费用" description="查看团队 AI 请求、Token 用量和费用估算。"/><AiUsage initialFrom={dates.from} initialTo={dates.to}/></section>}
+          {section==="backup"&&<BackupSettings timezone={timezone} onChanged={()=>{}}/>}
+
+        </div>
+      </div>
     </main>
   </>;
 }

package/dashboard/app/AiSettings.tsx

@@ -1,46 +1,42 @@
 "use client";
-import { useEffect, useState } from "react";
-import type { AiSettings, AiStatus } from "./lib/ai-types";
-import { aiRequest } from "./lib/ai-client";
+import {useEffect,useState} from "react";
+import type {AiSettings,AiStatus} from "./lib/ai-types";
+import {aiRequest} from "./lib/ai-client";
+import {SettingsPanelHeader,SettingsStatus} from "./SettingsUI";
 
-function Settings({ settings, onSaved }: { settings: AiSettings; onSaved: (status: AiStatus) => void }) {
-  const [value, setValue] = useState(settings);
-  const [key, setKey] = useState("");
-  const [clearKey, setClearKey] = useState(false);
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState("");
-  async function save(event: React.FormEvent) {
-    event.preventDefault(); setBusy(true); setError("");
-    try { onSaved(await aiRequest<AiStatus>({ action: "configure", ...value, apiKey: key, clearKey })); setKey(""); }
-    catch (err) { setError((err as Error).message); } finally { setBusy(false); }
+const limits=[{key:"dailyTokenLimit",label:"每日 Token 上限",step:"1",max:1000000000,hint:"留空不设此项限制，默认 100 万；调用前预留额度。"},{key:"dailyBudgetCny",label:"每日费用上限（人民币元）",step:"0.01",max:1000000,hint:"选填，需先填写下方的输入与输出单价。"}] as const;
+const prices=[{key:"inputPriceCny",label:"输入单价",hint:"未填写时，费用标为未计价。"},{key:"outputPriceCny",label:"输出单价",hint:"美元报价需先换算成人民币。"},{key:"cachedInputPriceCny",label:"缓存输入单价",hint:"选填；留空时按普通输入单价估算。"}] as const;
+function Settings({settings,onSaved}:{settings:AiSettings;onSaved:(status:AiStatus)=>void}) {
+  const [value,setValue]=useState(settings),[key,setKey]=useState(""),[clearKey,setClearKey]=useState(false);
+  const [busy,setBusy]=useState(false),[error,setError]=useState("");
+  async function save(event:React.FormEvent){
+    event.preventDefault();setBusy(true);setError("");
+    try{onSaved(await aiRequest<AiStatus>({action:"configure",...value,apiKey:key,clearKey}));setKey("");}
+    catch(err){setError((err as Error).message);}finally{setBusy(false);}
   }
-  return <form className="ai-settings" onSubmit={save}>
-    <p className="admin-help">开启后，成员发起请求时会将输入文字和本次所需的授权事项资料发送到所选模型服务。系统不自动读取附件原文、电话或微信等联系方式。</p>
-    <div className="edit-form-grid">
-      <label className="edit-field"><span>模型服务</span><select value={value.provider} onChange={e => { const provider = e.target.value as AiSettings["provider"]; setValue({ ...value, provider, baseUrl: provider === "openai" ? "https://api.openai.com/v1" : "https://dashscope.aliyuncs.com/compatible-mode/v1", model: provider === "openai" ? "" : "qwen-plus", inputPriceCny: null, cachedInputPriceCny: null, outputPriceCny: null, dailyBudgetCny: null, keyConfigured: false, enabled: false }); setKey(""); }}><option value="qwen-cn">Qwen · 阿里云百炼（北京）</option><option value="openai">OpenAI</option></select></label>
-      <label className="edit-field"><span>模型名称</span><input required value={value.model} maxLength={120} onChange={e => setValue({ ...value, model: e.target.value, inputPriceCny: null, cachedInputPriceCny: null, outputPriceCny: null, dailyBudgetCny: null })} placeholder="填写服务控制台中已开通的文本模型" /></label>
-      <label className="edit-field edit-field-wide"><span>服务地址</span><input required type="url" value={value.baseUrl} onChange={e => setValue({ ...value, baseUrl: e.target.value })} /><small>可使用百炼北京地域的通用地址或业务空间专属地址。</small></label>
-      <label className="edit-field"><span>API 密钥</span><input type="password" autoComplete="new-password" value={key} maxLength={500} onChange={e => { setKey(e.target.value); setClearKey(false); }} placeholder={value.keyConfigured ? "已保存，留空保持现有密钥" : "填写对应服务的 API 密钥"} /></label>
-      <label className="edit-field"><span>公司每日请求上限</span><input type="number" required min={1} max={1000} value={value.dailyLimit} onChange={e => setValue({ ...value, dailyLimit: Number(e.target.value) })} /><small>按工作区时区计数；失败请求也计入，另受模型服务自身额度限制。</small></label>
-      {([{ key: "dailyTokenLimit", label: "公司每日 Token 上限", step: "1", max: 1000000000, hint: "留空不设此项限制，默认 100 万；调用前预留额度。" }, { key: "dailyBudgetCny", label: "公司每日费用上限（人民币元）", step: "0.01", max: 1000000, hint: "选填，需要先填写输入与输出单价。" }, { key: "inputPriceCny", label: "输入单价（元 / 百万 Token）", step: "0.000001", max: 1000000, hint: "按账户实际单价填写；未填写时费用标为未计价。" }, { key: "outputPriceCny", label: "输出单价（元 / 百万 Token）", step: "0.000001", max: 1000000, hint: "美元报价需换算成人民币后填写。" }, { key: "cachedInputPriceCny", label: "缓存输入单价（元 / 百万 Token）", step: "0.000001", max: 1000000, hint: "选填；留空时按普通输入单价估算。" }] as const).map(field => <label className="edit-field" key={field.key}><span>{field.label}</span><input type="number" min={0} max={field.max} step={field.step} value={value[field.key] ?? ""} onChange={e => setValue({ ...value, [field.key]: e.target.value === "" ? null : Number(e.target.value) })} /><small>{field.hint}</small></label>)}
-    </div>
-    <div className="admin-actions"><label><input type="checkbox" checked={value.enabled} onChange={e => setValue({ ...value, enabled: e.target.checked })} /> 开启 AI 助手</label><label><input type="checkbox" checked={clearKey} onChange={e => { setClearKey(e.target.checked); if (e.target.checked) { setKey(""); setValue({ ...value, enabled: false }); } }} /> 清除已保存密钥</label><button className="admin-button admin-primary" disabled={busy}>{busy ? "保存中…" : "保存 AI 设置"}</button></div>
-    {error && <p role="alert" className="admin-alert">{error}</p>}
-  </form>;
+  return <form className="ai-settings" onSubmit={save}><fieldset className="edit-fields" disabled={busy}>
+    <section className="settings-form-section">
+      <div className="settings-row-heading"><div className="settings-toggle-copy"><strong id="ai-enabled-title">AI 助手</strong><p id="ai-enabled-help">开启后，成员可使用对话录入和进展总结。</p></div><label className="backup-switch"><input type="checkbox" role="switch" aria-labelledby="ai-enabled-title" aria-describedby="ai-enabled-help" checked={value.enabled} onChange={e=>setValue({...value,enabled:e.target.checked})}/><span aria-hidden="true"/></label></div>
+      <p className="settings-security-note">成员发起请求时，输入文字和本次所需的授权事项资料会发送到所选模型服务。系统不自动读取附件原文、电话或微信等联系方式。</p>
+    </section>
+    <section className="settings-form-section"><h3>模型与连接</h3><div className="edit-form-grid">
+      <label className="edit-field"><span>模型服务</span><select value={value.provider} onChange={e=>{const provider=e.target.value as AiSettings["provider"];setValue({...value,provider,baseUrl:provider==="openai"?"https://api.openai.com/v1":"https://dashscope.aliyuncs.com/compatible-mode/v1",model:provider==="openai"?"":"qwen-plus",inputPriceCny:null,cachedInputPriceCny:null,outputPriceCny:null,dailyBudgetCny:null,keyConfigured:false,enabled:false});setKey("");}}><option value="qwen-cn">Qwen · 阿里云百炼（北京）</option><option value="openai">OpenAI</option></select></label>
+      <label className="edit-field"><span>模型名称</span><input required value={value.model} maxLength={120} onChange={e=>setValue({...value,model:e.target.value,inputPriceCny:null,cachedInputPriceCny:null,outputPriceCny:null,dailyBudgetCny:null})} placeholder="填写已开通的文本模型"/></label>
+      <label className="edit-field edit-field-wide"><span>服务地址</span><input required type="url" value={value.baseUrl} onChange={e=>setValue({...value,baseUrl:e.target.value})}/><small>百炼可使用北京地域通用地址或业务空间专属地址。</small></label>
+      <label className="edit-field edit-field-wide"><span>API 密钥</span><input type="password" autoComplete="new-password" value={key} maxLength={500} onChange={e=>{setKey(e.target.value);setClearKey(false);}} placeholder={value.keyConfigured?"已保存，留空保持现有密钥":"填写对应服务的 API 密钥"}/><small>已保存的密钥不会回显，仅管理员可以替换或清除。</small></label>
+    </div>{settings.keyConfigured&&<label className="settings-clear-key"><input type="checkbox" checked={clearKey} onChange={e=>{setClearKey(e.target.checked);if(e.target.checked){setKey("");setValue({...value,enabled:false});}}}/>清除已保存密钥，同时关闭 AI 助手</label>}</section>
+    <section className="settings-form-section"><h3>团队每日限额</h3><div className="edit-form-grid"><label className="edit-field"><span>每日请求上限</span><input type="number" required min={1} max={1000} value={value.dailyLimit} onChange={e=>setValue({...value,dailyLimit:Number(e.target.value)})}/><small>按工作区时区计数，失败请求也计入。</small></label>{limits.map(field=><label className="edit-field" key={field.key}><span>{field.label}</span><input type="number" min={0} max={field.max} step={field.step} value={value[field.key]??""} onChange={e=>setValue({...value,[field.key]:e.target.value===""?null:Number(e.target.value)})}/><small>{field.hint}</small></label>)}</div></section>
+    <section className="settings-form-section"><h3>费用单价 <span className="field-optional">人民币元 / 百万 Token</span></h3><div className="edit-form-grid">{prices.map(field=><label className="edit-field" key={field.key}><span>{field.label}</span><input type="number" min={0} max={1000000} step="0.000001" value={value[field.key]??""} onChange={e=>setValue({...value,[field.key]:e.target.value===""?null:Number(e.target.value)})}/><small>{field.hint}</small></label>)}</div><p className="admin-help">按模型服务商的实际账户单价填写；费用统计为估算值。</p></section>
+    {error&&<p role="alert" className="admin-alert">{error}</p>}
+    <div className="settings-form-actions"><button className="admin-button admin-primary" disabled={busy}>{busy?"保存中…":"保存 AI 设置"}</button></div>
+  </fieldset></form>;
 }
-export default function AiSettingsPanel() {
-  const [status, setStatus] = useState<AiStatus | null>(null);
-  const [error, setError] = useState("");
-  const [notice, setNotice] = useState("");
-  useEffect(() => {
-    let active = true;
-    aiRequest<AiStatus>(undefined, "settings").then(value => { if (active) setStatus(value); }).catch(err => { if (active) setError(err.message); });
-    return () => { active = false; };
-  }, []);
-  return <section className="panel admin-center-panel"><h2>AI 设置</h2>
-    <p>仅管理员可开启 AI、更换密钥、配置模型和使用限额。已保存的密钥不会显示，可替换或清除。</p>
-    {error && <p className="admin-alert" role="alert">{error}</p>}{notice && <p role="status">{notice}</p>}
-    {!status && !error && <p>正在读取 AI 设置…</p>}
-    {status?.canManage && status.settings && <><p>当前状态：{status.enabled ? "已开启" : "未开启"}</p><Settings key={status.settings.revision} settings={status.settings} onSaved={value => { setStatus(value); setNotice("AI 设置已保存。"); }} /></>}
+export default function AiSettingsPanel(){
+  const [status,setStatus]=useState<AiStatus|null>(null),[error,setError]=useState(""),[notice,setNotice]=useState("");
+  useEffect(()=>{let active=true;aiRequest<AiStatus>(undefined,"settings").then(value=>{if(active)setStatus(value);}).catch(err=>{if(active)setError(err.message);});return()=>{active=false;};},[]);
+  return <section className="panel admin-center-panel"><SettingsPanelHeader title="AI 设置" description="配置模型服务、访问密钥和团队使用限额。" actions={status&&<SettingsStatus tone={status.enabled?"success":"neutral"}>{status.enabled?"已开启":"未开启"}</SettingsStatus>}/>
+    {error&&<p className="admin-alert" role="alert">{error}</p>}{notice&&<p className="admin-notice" role="status">{notice}</p>}
+    {!status&&!error&&<p className="settings-empty" role="status">正在读取 AI 设置…</p>}
+    {status?.canManage&&status.settings&&<Settings key={status.settings.revision} settings={status.settings} onSaved={value=>{setStatus(value);setNotice("AI 设置已保存。");}}/>}
   </section>;
 }

package/dashboard/app/AiUsage.tsx

@@ -25,10 +25,12 @@ export default function AiUsage({ initialFrom, initialTo }: { initialFrom: strin
   }
   const total = report?.rows.reduce((all, row) => ({ requests: all.requests + row.requests, tokens: all.tokens + row.inputTokens + row.outputTokens, cost: all.cost + row.estimatedCny, unknown: all.unknown + row.unknownUsage, unpriced: all.unpriced + row.unpriced, held: all.held + row.heldTokens, heldCost: all.heldCost + row.heldCny }), { requests: 0, tokens: 0, cost: 0, unknown: 0, unpriced: 0, held: 0, heldCost: 0 });
   return <section className="ai-usage">
-    <p className="admin-help">Token 数来自模型接口回传；人民币费用按调用时配置的单价估算，实际账单以服务商为准。缓存 Token 已包含在输入中，不重复计数。统计不记录对话内容。</p>
-    <form className="admin-actions" onSubmit={refresh}><label>统计开始<input aria-label="用量统计开始日期" type="date" required value={from} onChange={e => setFrom(e.target.value)} /></label><label>统计结束<input aria-label="用量统计结束日期" type="date" required value={to} onChange={e => setTo(e.target.value)} /></label><button className="admin-button" disabled={busy}>{busy ? "查询中…" : "查询用量"}</button></form>
+    <form className="usage-filters" onSubmit={refresh}><label>统计开始<input aria-label="用量统计开始日期" type="date" required value={from} onChange={e => setFrom(e.target.value)} /></label><label>统计结束<input aria-label="用量统计结束日期" type="date" required value={to} onChange={e => setTo(e.target.value)} /></label><button className="admin-button" disabled={busy}>{busy ? "查询中…" : "查询用量"}</button></form>
     {error && <p role="alert" className="admin-alert">{error}</p>}
-    {report && total && <><p>{report.from} 至 {report.to}：{number(total.requests)} 次请求，已回传 {number(total.tokens)} Token，已估算 {money(total.cost)}。</p>{(total.unknown > 0 || total.unpriced > 0) && <p className="admin-help">其中 {total.unknown} 次未回传用量，{total.unpriced} 次费用尚不能确定；仍占用限额的预留量为 {number(total.held)} Token / {money(total.heldCost)}。这些预留值不是实际消耗，请核对服务商账单。</p>}
-      <div className="ai-usage-table"><table><caption>按日期、成员和模型统计</caption><thead><tr><th>日期</th><th>成员</th><th>模型服务 / 模型</th><th>请求</th><th>失败或中断</th><th>输入 Token</th><th>输出 Token</th><th>缓存命中</th><th>估算费用</th></tr></thead><tbody>{report.rows.map((row, i) => <tr key={i}><td>{row.day}</td><td>{row.member}</td><td>{row.provider === "qwen-cn" ? "百炼北京" : "OpenAI"}<br />{row.model}</td><td>{row.requests}{row.running ? `（${row.running} 进行中）` : ""}</td><td>{row.failures}</td><td>{number(row.inputTokens)}{row.unknownUsage > 0 && `（${row.unknownUsage} 次未知）`}</td><td>{number(row.outputTokens)}</td><td>{number(row.cachedTokens)}</td><td>{money(row.estimatedCny)}{row.unpriced > 0 && `（${row.unpriced} 次未计价）`}</td></tr>)}</tbody></table>{!report.rows.length && <p>所选日期内暂无 AI 请求。</p>}</div></>}
+    {report && total && <><p className="admin-help">{report.from} 至 {report.to}</p><dl className="usage-metrics"><div><dt>请求次数</dt><dd>{number(total.requests)}</dd></div><div><dt>已回传 Token</dt><dd>{number(total.tokens)}</dd></div><div><dt>估算费用</dt><dd>{money(total.cost)}</dd></div></dl>{(total.unknown > 0 || total.unpriced > 0) && <p className="admin-help">其中 {total.unknown} 次未回传用量，{total.unpriced} 次费用尚不能确定；仍占用限额的预留量为 {number(total.held)} Token / {money(total.heldCost)}。这些预留值不是实际消耗，请核对服务商账单。</p>}
+      <div className="ai-usage-table"><table><caption>按日期、成员和模型统计</caption><thead><tr><th>日期</th><th>成员</th><th>模型服务 / 模型</th><th>请求</th><th>失败或中断</th><th>输入 Token</th><th>输出 Token</th><th>缓存命中</th><th>估算费用</th></tr></thead><tbody>{report.rows.map((row, i) => <tr key={i}><td>{row.day}</td><td>{row.member}</td><td>{row.provider === "qwen-cn" ? "百炼北京" : "OpenAI"}<br />{row.model}</td><td>{row.requests}{row.running ? `（${row.running} 进行中）` : ""}</td><td>{row.failures}</td><td>{number(row.inputTokens)}{row.unknownUsage > 0 && `（${row.unknownUsage} 次未知）`}</td><td>{number(row.outputTokens)}</td><td>{number(row.cachedTokens)}</td><td>{money(row.estimatedCny)}{row.unpriced > 0 && `（${row.unpriced} 次未计价）`}</td></tr>)}</tbody></table>{!report.rows.length && <p className="settings-empty">所选日期内暂无 AI 请求。</p>}</div></>}
+    <details className="usage-notes"><summary>统计口径与费用说明</summary>
+    <p className="admin-help">Token 数来自模型接口回传；人民币费用按调用时配置的单价估算，实际账单以服务商为准。缓存 Token 已包含在输入中，不重复计数。统计不记录对话内容。</p>
+    </details>
   </section>;
 }

package/dashboard/app/BackupSettings.tsx

@@ -63,7 +63,7 @@ export default function BackupSettings({timezone,onChanged}: {timezone:string;on
 
   return <section className="panel backup-settings" aria-labelledby="backup-title">
     <header className="backup-header">
-      <div><h1 id="backup-title">备份</h1><p>为业务资料、附件、账号权限和操作历史保留独立副本。</p></div>
+      <div><h2 id="backup-title">备份</h2><p>为业务资料、附件、账号权限和操作历史保留独立副本。</p></div>
       <button type="button" className="admin-button admin-primary backup-now" disabled={!status || changed || busy || status.in_progress} onClick={() => void backup()} title={changed ? "请先保存或取消设置修改" : undefined}>
         {pending === "backup" ? <span className="backup-spinner" aria-hidden="true"/> : <BackupIcon kind="archive"/>}
         {pending === "backup" ? "正在备份…" : "立即备份"}
@@ -101,10 +101,10 @@ export default function BackupSettings({timezone,onChanged}: {timezone:string;on
             <label className="edit-field"><span>备份文件夹</span><div className="backup-directory-input"><BackupIcon kind="folder"/><input required readOnly={status.server} value={directory} onChange={event => setDirectory(event.target.value)} placeholder="填写完整文件夹路径" autoComplete="off" spellCheck={false}/></div></label>
             <label className="edit-field"><span>备份频率</span><select value={interval} onChange={event => setIntervalMinutes(Number(event.target.value))}><option value={60}>每小时一次</option><option value={1440}>每 24 小时一次</option></select></label>
           </div>
-          <label className="team-check"><input type="checkbox" checked={oss} disabled={!status.oss_configured&&!oss} onChange={e=>setOss(e.target.checked)}/>同步到私有 OSS</label>
-          {!status.oss_configured&&<p>服务器维护人员配置 OSS 后即可启用。访问凭据不会在页面中保存或显示。</p>}
+          <div className="backup-extra-options"><label className="team-check"><input type="checkbox" checked={oss} disabled={!status.oss_configured&&!oss} onChange={e=>setOss(e.target.checked)}/>同步到私有 OSS</label>
+          {!status.oss_configured&&<p className="admin-help">服务器维护人员配置 OSS 后即可启用。访问凭据不会在页面中保存或显示。</p>}
           <label className="edit-field"><span>本地副本保留期</span><select value={retention} onChange={e=>setRetention(Number(e.target.value))}>{[0,7,30,90,365].map(days=><option key={days} value={days}>{days?`${days} 天`:"不自动清理"}</option>)}</select></label>
-          <p className="backup-schedule-note">{status.server?"服务器持续运行期间自动检查；资料变化后按设置频率备份。服务器目录由部署配置管理。":"关闭工作台期间暂停，重新打开后检查补做。"} OSS 保留期由存储空间生命周期规则管理。</p>
+          </div><p className="backup-schedule-note">{status.server?"服务器持续运行期间自动检查；资料变化后按设置频率备份。服务器目录由部署配置管理。":"关闭工作台期间暂停，重新打开后检查补做。"} OSS 保留期由存储空间生命周期规则管理。</p>
           {changed && <div className="backup-save-bar"><span>设置尚未保存</span><div className="admin-actions"><button type="button" className="admin-button" onClick={cancel}>取消修改</button><button type="submit" className="admin-button admin-primary">{pending === "save" ? "正在保存…" : "保存设置"}</button></div></div>}
         </fieldset>
       </form>

package/dashboard/app/Dashboard.tsx

@@ -1338,15 +1338,9 @@ export default function Dashboard({ data, workspaceStatus, workspaceError, onWor
       : scopeLabel;
 
   return (
-    <main className="page-shell">
-      <header className="topbar">
-        <a className="brand" href="#top" aria-label="返回看板顶部">
-          <BrandLogo />
-          <span>
-            <strong>{data.workspace.short_name}</strong>
-            <small>{data.workspace.workspace_title}</small>
-          </span>
-        </a>
+    <main className="page-shell workspace-page">
+      <header className="workspace-toolbar">
+        {readOnly?<a className="brand" href="#top" aria-label="返回历史看板顶部"><BrandLogo/><span><strong>{data.workspace.short_name}</strong><small>历史资料</small></span></a>:<div className="workspace-context"><span>业务工作台</span><p>{data.workspace.description}</p></div>}
         <div className="topbar-actions">
           <div className="data-freshness">
             <span className="live-dot" aria-hidden="true" />
@@ -1383,7 +1377,6 @@ export default function Dashboard({ data, workspaceStatus, workspaceError, onWor
         </button>
         {!readOnly && canAdmin && <button type="button" aria-pressed={page === "admin"} onClick={() => setPage("admin")}>资料管理</button>}
         {!readOnly && canAdmin && <button type="button" aria-pressed={page === "history"} onClick={() => {setHistoryTarget(null);setPage("history");}}>修改历史</button>}
-        {!readOnly && !data.access && <Link href="/admin" className="admin-button">管理中心</Link>}
         {!readOnly && <button type="button" onClick={()=>openFiles()}>事项资料</button>}{readOnly && <button type="button" onClick={()=>openFiles()}>历史资料</button>}
         {!readOnly && <button type="button" aria-pressed={page === "ai"} onClick={() => {setAiScope("");setPage("ai");}}>AI 助手</button>}
       </nav>

package/dashboard/app/FileLibrary.tsx

@@ -166,7 +166,7 @@ export default function FileLibraryDialog({ data, target, onClose, onChanged, on
         {file.notes && <p className="files-notes">{file.notes}</p>}<p className="admin-help">归档对接方：{data.counterparties.find(item => item.id === file.home_counterparty_id)?.name || file.home_counterparty_id}</p><p className="admin-help">关联事项：{file.project_ids.map(id => data.projects.find(item => item.id === id)?.name || id).join("、")}</p>
         <section className="files-section"><h4>文件版本</h4>{[...file.versions].reverse().map(version => <article className="file-version" key={version.id}><div><strong>v{file.versions.indexOf(version)+1} · {fileStatuses[version.status]} {version.id === file.current_version && <span className="file-current">当前版本</span>}</strong><p>{version.filename}</p><small>{new Date(version.created_at).toLocaleString(data.workspace.locale,{timeZone:data.workspace.timezone})} · {sizeLabel(version.size)}</small>{version.note && <p>{version.note}</p>}</div><div className="admin-actions"><a className="admin-button" href={fileUrl(file,version)} download>下载</a>{local && <button type="button" className="admin-button" disabled={busy} onClick={() => void reveal({version_id:version.id})}>打开所在文件夹</button>}{/\.(pdf|png|jpe?g)$/i.test(version.filename) && <a className="admin-button" href={fileUrl(file,version,true)} target="_blank" rel="noreferrer">预览</a>}{canEdit && !file.archived && version.id !== file.current_version && <button className="admin-button" disabled={busy} onClick={() => setConfirmation({title:`恢复为 v${file.versions.indexOf(version)+1}？`,detail:"其他文件版本继续保留，已有发送记录仍指向当时的版本。",action:() => {void save("select_version",{version_id:version.id});}})}>设为当前版本</button>}</div></article>)}</section>
         <section className="files-section"><h4>使用与发送记录</h4>{!file.records.length && <p className="admin-help">暂无使用记录。导入文件不会自动标记为已发送。</p>}{[...file.records].sort((a,b) => b.date.localeCompare(a.date)).map(record => {const relatedProject=data.projects.find(item => item.id === record.project_id);const relatedEvent=relatedProject?.events.find(item => item.id === record.event_id);const version=file.versions.find(item => item.id === record.version_id)!;return <article className="file-usage" key={record.id}><div><strong>{record.date} · {fileUses[record.kind]} · v{file.versions.indexOf(version)+1}</strong><p>{record.people.map(id => data.people.find(person => person.id === id)?.name || id).join("、") || "未指定人员"}{record.channel ? ` · ${record.channel}` : ""}</p><small>{relatedProject?.name}{relatedEvent ? ` · ${relatedEvent.title}` : ""}</small>{record.note && <p>{record.note}</p>}</div><div className="admin-actions"><a className="admin-button" href={fileUrl(file,version)} download>下载当时版本</a>{local && <button type="button" className="admin-button" disabled={busy} onClick={() => void reveal({record_id:record.id})}>打开所在文件夹</button>}{canEdit && !file.archived && <><button className="admin-button" disabled={busy} onClick={() => {setUsageId(record.id);setMode("usage");}}>更正记录</button><button className="admin-button" disabled={busy} onClick={() => setConfirmation({title:"移除这条使用记录？",detail:"仅移除这条记录，文件原件继续保留；修改历史中可回溯。",action:() => {void save("usage_remove",{record_id:record.id});}})}>移除记录</button></>}</div></article>;})}</section>
-      </> : <div className="files-empty"><h3>把交流资料与进展放在一起</h3><p>选择左侧资料查看版本和发送情况，或导入第一份资料。</p><p>同一份资料可关联多个事项，发送记录始终对应具体版本。</p></div>}
+      </> : <div className="files-empty"><h3>把交流资料与进展放在一起</h3><p>选择一份资料查看版本和发送情况，或导入第一份资料。</p><p>同一份资料可关联多个事项，发送记录始终对应具体版本。</p></div>}
     </div></div>
     {listing && <footer className="files-footer"><details><summary>归档与备份说明</summary>{local?<p>工作区根目录：{listing.workspace_directory}</p>:<p>资料保存在公司服务器，可下载到自己的电脑。完整备份由管理员管理。</p>}<p>附件随对接方保存：{listing.directory_pattern}</p><p>业务记录、附件和自动修改历史统一保存在这个工作区内。备份仅包含工作台管理的资料。</p><p>每个对接方的档案、事项和附件放在同一个文件夹内。同一资料关联多个事项时，只在归档对接方内保存文件。</p><p>同一份资料的各版本放在同一个文件夹内，默认保留原文件名；同名且内容不同时追加版本后缀。NDA 的签署状态单独记录，不会改变关联事项的推进阶段。</p><p>目录中的文件是归档副本。更新内容请导入新版本；原有主版本可以继续在原目录编辑。完整备份包含附件原件、业务记录和工作台自动修改历史，原仓库 Git 历史由原仓库单独备份。</p></details></footer>}
   </Dialog.Content></Dialog.Portal></Dialog.Root>;

package/dashboard/app/RemoteAccess.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { useCallback, useEffect, useState } from "react";
 import Link from "next/link";
+import {SettingsPanelHeader,SettingsStatus} from "./SettingsUI";
 import type { TeamUser } from "./lib/team-client";
 import { stageLabels, followUpStatusLabels } from "./lib/labels";
 
@@ -19,7 +20,8 @@ function display(field: string, value: unknown) {
 }
 const when = (value: number) => new Date(value * 1000).toLocaleString("zh-CN");
 
-export default function RemoteAccess({ user, manage = false, endpoint = "" }: { user: TeamUser; manage?: boolean; endpoint?: string }) {
+export default function RemoteAccess({ user, mode, endpoint = "" }: { user: TeamUser; mode: "settings" | "connection" | "drafts"; endpoint?: string }) {
+  const manage = mode === "settings";
   const [status, setStatus] = useState<Status | null>(null), [drafts, setDrafts] = useState<Draft[]>([]);
   const [error, setError] = useState(""), [notice, setNotice] = useState(""), [busy, setBusy] = useState(false);
   const [secret, setSecret] = useState(""), [label, setLabel] = useState("我的 Codex"), [days, setDays] = useState(7), [canDraft, setCanDraft] = useState(false);
@@ -34,14 +36,19 @@ export default function RemoteAccess({ user, manage = false, endpoint = "" }: {
   }, [user.csrf]);
   const load = useCallback(async () => {
     const latest = await request<Status>(manage ? "settings" : "status");
-    const pending = !manage && latest.enabled && latest.granted ? (await request<{ drafts: Draft[] }>("drafts")).drafts : [];
+    const pending = mode === "drafts" && latest.enabled && latest.granted ? (await request<{ drafts: Draft[] }>("drafts")).drafts : [];
     return { latest, pending };
-  }, [manage, request]);
+  }, [manage, mode, request]);
   const apply = useCallback(({ latest, pending }: { latest: Status; pending: Draft[] }) => {
     setStatus(latest); setDrafts(pending); setChecked({});
   }, []);
   async function reload() { apply(await load()); }
   useEffect(() => { void load().then(apply).catch(err => setError((err as Error).message)); }, [load, apply]);
+  useEffect(() => {
+    if (mode !== "drafts" || !drafts.length) return;
+    const anchor = window.location.hash.slice(1);
+    if (drafts.some(draft => anchor === `draft-${draft.id}`)) document.getElementById(anchor)?.scrollIntoView({ block: "start" });
+  }, [mode, drafts]);
   async function act(action: string, input: Record<string, unknown>, message: string) {
     setBusy(true); setError(""); setNotice("");
     try {
@@ -51,27 +58,20 @@ export default function RemoteAccess({ user, manage = false, endpoint = "" }: {
     } catch (err) { setError((err as Error).message); }
     finally { setBusy(false); }
   }
-  return <section className="panel admin-center-panel remote-access">
-    <h2>{manage ? "Codex 远程接入" : "我的远程接入"}</h2>
-    <p>远程助手可查询获授权事项和提交修改草稿。草稿由本人在本页面核对并确认后保存。</p>
+  return <section id={manage?"external-ai":mode==="connection"?"ai-tools":undefined} className="panel admin-center-panel remote-access">
+    <SettingsPanelHeader title={manage?"外部 AI 工具":mode==="connection"?"AI 工具连接":"修改草稿"} description={manage?"允许成员通过 Codex 等外部工具访问工作台，与内置 AI 的模型配置和费用独立。":mode==="connection"?"连接自己的 AI 工具，查询获授权事项或提交修改草稿。":"核对外部 AI 工具提交的内容，由你确认后正式保存。"} actions={mode==="connection"?<Link className="admin-button" href="/remote">查看待确认修改</Link>:undefined}/>
     {error && <p className="admin-alert" role="alert">{error}</p>}
     {notice && <p className="admin-notice" role="status">{notice}</p>}
     {!status ? <p>正在读取接入状态…</p> : <>
-      <p>当前状态：<strong>{status.enabled ? "已开启" : "已关闭"}</strong></p>
-      {manage ? <>
-        <p className="admin-help">按账号授权。关闭接入将撤销全部凭据和待确认草稿；重新开启后需重新生成凭据。</p>
-        <button className="admin-button" disabled={busy} onClick={() => void act("configure", { enabled: !status.enabled, revision: status.revision }, status.enabled ? "已关闭，旧凭据和草稿已失效。" : "已开启。请为需要使用的成员授权。")}>{status.enabled ? "关闭远程接入并撤销凭据" : "开启远程接入"}</button>
-        <h3>成员授权</h3>
-        <ul className="remote-items">{status.members?.map(member => <li key={member.id}><span>{member.name} · {{ admin: "管理员", editor: "编辑成员", viewer: "只读成员" }[member.role]}{!member.active && " · 未启用"}</span>
-          <button className="admin-button" disabled={busy || (!member.active && !member.granted)} onClick={() => void act("grant", { memberId: member.id, allowed: !member.granted }, member.granted ? "已取消授权，该成员的凭据与草稿已失效。" : "成员可登录后自行生成凭据。")}>{member.granted ? "取消远程授权" : "允许远程接入"}</button></li>)}</ul>
-        <p><Link className="admin-button" href="/remote">管理我自己的凭据和草稿</Link></p>
-      </> : <>
-        <p className="admin-help">返回给 Codex 的业务资料会进入你所使用的模型上下文。请按公司要求使用模型；这里不自动读取附件和联系方式。Codex 的模型费用由对应账号承担。</p>
-        {!status.enabled || !status.granted ? <p>请联系管理员开启功能并授权你的账号。</p> : <>
+      {mode !== "drafts" && <div className="remote-state"><div><SettingsStatus tone={status.enabled?"success":"neutral"}>{status.enabled?"工作区已开启":"工作区未开启"}</SettingsStatus><p className="admin-help">{manage?"成员权限统一在“成员与权限”中分配。":status.granted?"你的账号已获授权，访问范围与事项权限一致。":"你的账号尚未获授权，请联系管理员调整成员权限。"}</p></div>{manage&&<button className="admin-button" disabled={busy} onClick={()=>{if(status.enabled&&!window.confirm("关闭外部 AI 工具接入？全部个人凭据和待确认草稿将失效，成员授权设置保留。"))return;void act("configure",{enabled:!status.enabled,revision:status.revision},status.enabled?"已关闭，旧凭据和草稿已失效。":"已开启，已获授权的成员可自行连接工具。");}}>{status.enabled?"关闭外部工具接入":"开启外部工具接入"}</button>}</div>}
+      {manage && <p className="admin-help">在 <Link href="/admin?section=members">成员与权限</Link> 邀请或编辑成员时分配权限。关闭全局开关会撤销全部凭据和草稿，保留成员授权；重新开启后，由成员生成新凭据。</p>}
+      {mode === "connection" && <>
+        <p className="admin-help">返回给外部工具的业务资料会进入你所使用的模型上下文，请按公司要求选择模型。这里不自动读取附件和联系方式，模型费用由对应工具账号承担。</p>
+        {!status.enabled || !status.granted ? <p className="settings-empty">{!status.enabled?"工作区尚未开启外部工具接入。":"请联系管理员允许你的账号连接外部 AI 工具。"}</p> : <>
           <form onSubmit={event => { event.preventDefault(); void act("issue", { label, days, canDraft }, "凭据已生成，仅显示这一次。请保存在自己的电脑中。"); }}>
             <div className="remote-form"><label>凭据名称<input required maxLength={80} value={label} onChange={e => setLabel(e.target.value)} /></label>
               <label>有效天数<input type="number" min={1} max={30} required value={days} onChange={e => setDays(Number(e.target.value))} /></label>
-              {user.role !== "viewer" && <label><input type="checkbox" checked={canDraft} onChange={e => setCanDraft(e.target.checked)} />允许提交草稿（仍需本人确认）</label>}</div>
+              {user.role !== "viewer" && <label className="remote-draft-option"><input type="checkbox" checked={canDraft} onChange={e => setCanDraft(e.target.checked)} />允许提交草稿（仍需本人确认）</label>}</div>
             <button className="admin-button" disabled={busy || !!secret}>生成个人凭据</button>
           </form>
           {secret && <div className="admin-notice"><p>仅本次显示，请勿发送到聊天、提交到代码仓库或与他人共用。</p>
@@ -84,14 +84,17 @@ export default function RemoteAccess({ user, manage = false, endpoint = "" }: {
           </details>
         </>}
       </>}
+      {mode !== "drafts" && <>
       <h3>{manage ? "全部个人凭据" : "我的凭据"}</h3>
-      {!status.tokens.length && <p>暂无凭据。</p>}
+      {!status.tokens.length && <p className="settings-empty">暂无凭据。</p>}
       <ul className="remote-items">{status.tokens.map(token => <li key={token.id}><div><strong>{token.label}</strong>{manage && <span> · {status.members?.find(member => member.id === token.owner)?.name || "成员"}</span>}<p>{token.can_draft ? "查询和提交草稿" : "仅查询"} · {when(token.expires)} 到期</p></div>
         <button className="admin-button" disabled={busy} onClick={() => void act("revoke", { tokenId: token.id }, "凭据及其待确认草稿已撤销。")}>撤销</button></li>)}</ul>
-      {!manage && <>
-        <h3>我的待确认草稿</h3>
+      </>}
+      {mode === "drafts" && <>
+        <p className="admin-help">个人连接与凭据在 <Link href="/account#ai-tools">我的账号 → AI 工具连接</Link> 管理。</p>
+        {(!status.enabled || !status.granted) && <p className="admin-notice">{!status.enabled?"工作区尚未开启外部工具接入。":"你的账号尚未获授权使用外部工具。"}</p>}
         <button className="admin-button" disabled={busy} onClick={() => { setError(""); void reload().catch(err => setError((err as Error).message)); }}>刷新草稿</button>
-        {!drafts.length && <p>暂无可确认的草稿。草稿最长保留 24 小时；权限变化、凭据失效或关闭功能后不可确认。</p>}
+        {!drafts.length && <p>暂无可确认的修改。外部工具提交草稿后在这里核对；草稿最长保留 24 小时，权限变化、凭据失效或关闭功能会使草稿失效。</p>}
         {drafts.map(draft => <article key={draft.id} id={`draft-${draft.id}`} className="ai-draft">
           <h3>{draft.counterparty} · {draft.matterName} · {operations[draft.operation]}</h3>
           {draft.progressTitle && <p>进展：{draft.progressDate} · {draft.progressTitle}</p>}<p>有效至 {when(draft.expires)}</p>

package/dashboard/app/SettingsUI.tsx

@@ -0,0 +1,22 @@
+import type {ReactNode} from "react";
+
+export type SettingsIconName = "members" | "ai" | "usage" | "remote" | "backup" | "plus" | "search" | "lock";
+const paths:Record<SettingsIconName,ReactNode> = {
+  members:<><circle cx="9" cy="8" r="3"/><path d="M3 20v-2a6 6 0 0 1 12 0v2M16 5a3 3 0 0 1 0 6m2 3a5 5 0 0 1 3 4v2"/></>,
+  ai:<><path d="m12 3 2.7 6.3L21 12l-6.3 2.7L12 21l-2.7-6.3L3 12l6.3-2.7L12 3Z"/></>,
+  usage:<><path d="M4 4v16h16M9 15v-4m5 4V7m5 8v-6"/></>,
+  remote:<><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8m-4-4v4M8 9l-2 2 2 2m8-4 2 2-2 2"/></>,
+  backup:<><path d="M12 3v12m-4-4 4 4 4-4M4 15v5h16v-5"/></>,
+  plus:<path d="M12 5v14M5 12h14"/>,
+  search:<><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 4 4"/></>,
+  lock:<><rect x="5" y="10" width="14" height="11" rx="2"/><path d="M8 10V6a4 4 0 0 1 8 0v4m-4 5v2"/></>,
+};
+export function SettingsIcon({name}:{name:SettingsIconName}) {
+  return <svg className="settings-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{paths[name]}</svg>;
+}
+export function SettingsPanelHeader({title,description,actions}:{title:string;description?:string;actions?:ReactNode}) {
+  return <header className="settings-panel-head"><div><h2>{title}</h2>{description&&<p>{description}</p>}</div>{actions}</header>;
+}
+export function SettingsStatus({children,tone="neutral"}:{children:ReactNode;tone?:"neutral"|"success"|"warning"}) {
+  return <span className={`settings-status is-${tone}`}><span aria-hidden="true"/>{children}</span>;
+}