{renderSection(section)}
+
+ {section === undefined ? (
+
Cyrene · 管理面板
- {meta?.label ?? "仪表盘"}
+ {label}
-
);
@@ -300,7 +342,7 @@ export function AdminApp({ section }: { section: AdminSectionId }): React.ReactN
if (getStoredRole() === "viewer") {
return (
-
);
@@ -308,14 +350,27 @@ export function AdminApp({ section }: { section: AdminSectionId }): React.ReactN
return (
- setAdminMenuOpen(true)} />
+ setAdminMenuOpen(true)} />
setAdminMenuOpen(false)} />
+ setAdminMenuOpen(false)} />
);
}
diff --git a/frontend/web/src/admin/CollapsibleGroup.tsx b/frontend/web/src/admin/CollapsibleGroup.tsx
new file mode 100644
index 0000000..2cc0d8e
--- /dev/null
+++ b/frontend/web/src/admin/CollapsibleGroup.tsx
@@ -0,0 +1,61 @@
+/** 侧边栏的可折叠分组（Miuix：弹簧动效 + 平滑圆角 + 深色优先）。
+ *
+ * 为什么把分组做成手风琴：核心模块 18 条 + 插件声明的不定条数，平铺一列之后
+ * 「找一条」变成扫一屏。折叠只影响**呈现**，不动任何清单（插件条目的出现/消失由
+ * 快照 + `when` 决定，与折叠无关）。
+ *
+ * 含当前页的分组会被强制展开一次（用户仍可再折叠）——折叠着当前页等于让用户看不到
+ * 自己在哪。
+ */
+
+import { useEffect, useId, useState, type ReactNode } from "react";
+import { Icon } from "../components/Icon";
+
+export interface CollapsibleGroupProps {
+ label: string;
+ /** 条目数：折叠状态下也能看出里面有没有东西。 */
+ count: number;
+ /** 组内含当前页 ⇒ 自动展开一次。 */
+ forceOpen?: boolean;
+ children: ReactNode;
+}
+
+export function CollapsibleGroup({
+ label,
+ count,
+ forceOpen = false,
+ children,
+}: CollapsibleGroupProps): ReactNode {
+ const [open, setOpen] = useState(true);
+ const uid = useId();
+ const panelId = `nav-group-${uid}`;
+
+ useEffect(() => {
+ if (forceOpen) setOpen(true);
+ }, [forceOpen]);
+
+ return (
+
-
-
-
+
+ {open ? (
+
+ );
+}
diff --git a/frontend/web/src/admin/modules/channelConnFields.tsx b/frontend/web/src/admin/modules/channelConnFields.tsx
index e646788..7db646c 100644
--- a/frontend/web/src/admin/modules/channelConnFields.tsx
+++ b/frontend/web/src/admin/modules/channelConnFields.tsx
@@ -1,14 +1,21 @@
import { Icon } from "../../components/Icon";
-import { Switch } from "../../components/primitives";
import { type PlatformField } from "./channelFields";
import { modeHint, modeSummary, requiredFieldKeys, visibleFields } from "./channelFieldRules";
+import {
+ FieldShell,
+ MaskedSecretFooter,
+ SchemaControl,
+} from "../schema/fields";
+import type { SchemaField, SchemaFieldType } from "../schema/fieldTypes";
/** qq-obv11 这类「字段含义随 transport × mode 变化」的平台，字段不能平铺 —— 平铺会
* 同时制造「填了用不上」和「没填起不来」两种事故。这里只渲染当前组合下真正生效的字段，
* 并逐字段给出「谁连谁 / 空值代表什么 / 现在是否必填」。
*
- * 校验规则（必填、清空、写回补丁）全在 `channelFieldRules.ts` 的纯函数里，本组件不判断
- * 规则、只呈现结果，单测因此不需要渲染 React。 */
+ * 校验规则（必填、清空、写回补丁）全在 `channelFieldRules.ts` 的纯函数里；**呈现**复用
+ * `../schema/fields.tsx` 的通用控件（与插件面板同一份渲染，design/09 §5.7 C）——
+ * 本组件只做「渠道元数据 → 通用 schema」的适配与规则结果的分发，不再自己画控件。
+ */
export interface PlatformConnFieldsProps {
platform: string;
values: Readonly
+ {children}
+
+ ) : null}
+
- {fields.map((f) => (
- onChange(f.key, v)}
- required={required.has(f.key)}
- missing={missing.has(f.key)}
- summary={summary}
- alreadyConfigured={configured.has(f.key)}
- clearRequested={cleared.has(f.key)}
- onToggleClear={(next) => onToggleClear(f.key, next)}
- />
- ))}
+ {fields.map((f) => {
+ const isRequired = required.has(f.key);
+ const isMissing = missing.has(f.key);
+ const clearRequested = cleared.has(f.key);
+ // 掩码秘密：面板只看到「已配置」，原文拿不回来 —— 留空保持原值，要删掉必须显式开关。
+ const maskedSecret = f.secret === true && configured.has(f.key);
+ return (
+ onToggleClear(f.key, next)}
+ />
+ }
+ >
+ onChange(f.key, v)}
+ disabled={clearRequested}
+ invalid={isMissing && isRequired}
+ />
+
+ );
+ })}
);
}
-
-/** 一个字段：标题 + 必填/可选标记 + 输入（下拉或文本框）+ 一行中文说明 + 状态行。 */
-function ConnField({
- field,
- value,
- onChange,
- required,
- missing,
- summary,
- alreadyConfigured,
- clearRequested,
- onToggleClear,
-}: {
- field: PlatformField;
- value: string;
- onChange: (v: string) => void;
- required: boolean;
- missing: boolean;
- /** 当前 transport + mode 摘要，只用于错误文案。 */
- summary: string;
- alreadyConfigured: boolean;
- clearRequested: boolean;
- onToggleClear: (next: boolean) => void;
-}): React.ReactNode {
- // 掩码秘密：面板只看到「已配置」，原文拿不回来 —— 留空保持原值，要删掉必须显式开关。
- const maskedSecret = field.secret === true && alreadyConfigured;
- const options = field.options ?? [];
- const unknownOption = value !== "" && options.length > 0 && !options.some((o) => o.value === value);
- return (
-
-
- {field.label}
- {required ? (
-
- 必填
-
- ) : (
-
- 可选
-
- )}
-
- {options.length > 0 ? (
-
- ) : (
- onChange(e.target.value)}
- placeholder={field.placeholder}
- disabled={clearRequested}
- className={missing && required ? inputClsError : inputCls}
- />
- )}
- {field.guide}
- {missing && required ? (
-
- 当前接入方式（{summary}）下必填，留空适配器起不来。
-
- ) : null}
- {maskedSecret ? (
-
-
- 已配置（后端只下发掩码，面板不持有原文）：留空 = 不改动。
-
-
- );
-}
-
-const inputCls =
- "w-full rounded-[var(--mu-radius)] bg-[var(--mu-surface-2)] px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-[var(--mu-accent)]";
-
-const inputClsError =
- "w-full rounded-[var(--mu-radius)] bg-[var(--mu-surface-2)] px-3 py-2 text-sm outline-none ring-1 ring-[var(--mu-err)] focus:ring-[var(--mu-err)]";
diff --git a/frontend/web/src/admin/navModel.test.ts b/frontend/web/src/admin/navModel.test.ts
new file mode 100644
index 0000000..4b54314
--- /dev/null
+++ b/frontend/web/src/admin/navModel.test.ts
@@ -0,0 +1,234 @@
+// 侧边栏导航模型的**纯逻辑**测试：把「可接入点」从口号变成可执行断言。
+//
+// 钉三件事（design/09 §5.6 / §5.7 D）：
+// ① **新增一个插件页面不得改动静态清单** —— 核心模块注册表在这里被逐字写死，任何
+// 「顺手往 sections.tsx 里加一行」都会让本文件变红；插件条目则必须能从快照里冒出来，
+// 且它的 id 从不进 `AdminSectionId` / `VALID_SECTIONS`；
+// ② **`when` 不满足 ⇒ 入口不出现**（不是灰掉）：三态语义与 Go 侧 `paneldecl.Eval` 同义；
+// ③ 稳定序与路径口径。
+//
+// 跑法（逻辑测试，无 DOM）：
+//
+// cd frontend/web \
+// && ./node_modules/.bin/esbuild src/admin/navModel.test.ts \
+// --bundle --platform=node --format=esm \
+// --outfile=/tmp/cyrene-nav-model.test.mjs \
+// && node /tmp/cyrene-nav-model.test.mjs
+//
+// `tsc --noEmit` 会对本文件做类型检查，因此它只从项目内导入、不 import node:*。
+
+import { ADMIN_GROUPS, ADMIN_SECTIONS } from "./sections";
+import { activeNavKey, buildAdminNav, groupHasActive, sectionNavKey } from "./navModel";
+import { adminPluginPath, parseAdminRoute, readAdminEntry, type AdminEntry } from "./router";
+import { PLUGIN_GROUP_ID, PLUGIN_GROUP_LABEL, panelIconName, panelNavKey, sortPanelEntries } from "./plugin/nav";
+import { evalWhen, visiblePanelEntries } from "./plugin/when";
+import type { PanelEntryDto } from "./plugin/types";
+
+let checks = 0;
+
+function ok(cond: boolean, what: string): void {
+ checks += 1;
+ if (!cond) throw new Error(`FAILED: ${what}`);
+}
+
+function eq
+ {fields.map((f) => {
+ const fromKey = declared.find((d) => d.key === f.key)?.optionsFrom ?? "";
+ const opts = fromKey === "" ? undefined : options[fromKey];
+ const isRequired = requiredSet.has(f.key);
+ const isMissing = missing.has(f.key);
+ const clearRequested = cleared.has(f.key);
+ const masked = f.type === "secret" && configured.has(f.key);
+ return (
+
+ );
+}
diff --git a/frontend/web/src/admin/plugin/FormSection.tsx b/frontend/web/src/admin/plugin/FormSection.tsx
new file mode 100644
index 0000000..2a2b8c6
--- /dev/null
+++ b/frontend/web/src/admin/plugin/FormSection.tsx
@@ -0,0 +1,114 @@
+/** `section.form` 区块：把插件声明的 `fields[]` 渲染成表单并提交给声明的动作。
+ *
+ * 三条硬口径：
+ * ① 控件来自**通用 schema 渲染**（`../schema/fields.tsx`，与渠道配置页同一份实现），
+ * 本组件不自己画控件、也不重复实现「留空 = 不改动」；
+ * ② 提交前先在本地跑必填校验（`schema/values.planSubmit`），拦下「填了却起不来」；
+ * ③ viewer 一律看不到表单（后端已在快照里裁掉，这里是第二道闸）。
+ *
+ * 状态与规则在 `formState.ts`（三个 hook），字段呈现与说明文案在 `FormFields.tsx`；
+ * 本文件只剩「拼装 + 提交按钮 + 反馈行」，因此每个函数都在 80 行以内。
+ */
+
+import { useMemo, type ReactNode } from "react";
+import { Button, Surface, Tag } from "../../components/primitives";
+import type { Role } from "../../lib/types";
+import { useAuditStore } from "../audit";
+import { Notice } from "../components";
+import type { SchemaField } from "../schema/fieldTypes";
+import { FormFieldsGrid } from "./FormFields";
+import { useFieldOptions, useFormSubmit, useFormValues, type FormFlash } from "./formState";
+import { canWrite } from "./nav";
+import { SectionHeader } from "./SectionHeader";
+import type { PanelFieldDto, PanelSectionDto } from "./types";
+
+/** 声明字段 → 通用 schema（`options` 由 `optionsFrom` 拉到后由栅格填进来）。 */
+export function panelFieldToSchema(f: PanelFieldDto): SchemaField {
+ return {
+ key: f.key,
+ label: f.label,
+ type: f.type,
+ required: f.required,
+ placeholder: f.placeholder,
+ default: f.default,
+ min: f.min,
+ max: f.max,
+ };
+}
+
+/** 提交/校验反馈行：错误码与文案分两处显示（§5.4.6 的错误码 ↔ 文案分离）。 */
+function FormFlashRow({ flash }: { flash: FormFlash | null }): ReactNode {
+ if (!flash) return null;
+ return (
+ <>
+ {flash.code ?
+ onToggleClear(f.key, next)}
+ />
+ }
+ >
+ onValue(f.key, next)}
+ />
+
+
+ );
+ })}
+
+
+ {action === "" ? 声明缺少 submit.action，无法提交。 : null}
+
+
+ {panel.pluginId}}
+ />
+ {sections.map((section) => (
+ setPrefill(values)}
+ />
+ ))}
+ {sections.length === 0 ? (
+
+ 该面板没有可显示的区块（可能只声明了写表单，而当前角色是只读）。
+
+ ) : null}
+
+ );
+}
+
+export interface PluginPanelHostProps {
+ target: PluginTarget | null;
+ panels: readonly PanelEntryDto[];
+ loading: boolean;
+ error: string | null;
+ reload: () => void;
+ role: Role | null;
+}
+
+/** 插件页容器：把「当前 URL → 快照条目」这一步与三种非正常态收在这里。 */
+export function PluginPanelHost({ target, panels, loading, error, reload, role }: PluginPanelHostProps): ReactNode {
+ if (!target) {
+ return (
+
+ 读取插件面板失败：{error}
+
+
+ );
+ }
+ return (
+
+ {keys.map((key) => {
+ const field = fields.find((f) => f.key === key);
+ const declared: PanelFieldDto = field ?? { key, type: "text" };
+ return
+
+ {line.time ? {line.time} : null}
+ {line.text}
+
+ ))}
+
+
+ );
+}
diff --git a/frontend/web/src/admin/plugin/TableSection.tsx b/frontend/web/src/admin/plugin/TableSection.tsx
new file mode 100644
index 0000000..c172af9
--- /dev/null
+++ b/frontend/web/src/admin/plugin/TableSection.tsx
@@ -0,0 +1,89 @@
+/** `section.table` 区块：列 + 行内动作。
+ *
+ * 复用既有 `AdminTable`（含窗口化与空/错/加载三态），所以这里只做三件事：把列声明翻成
+ * `AdminColumn`、把行内动作接上宿主动作端点、把反馈画出来（含 viewer 的只读说明）。
+ * 状态机在 `tableState.ts`；纯助手 `cellText` / `rowIdentity` 从那里复出口（单测按
+ * 本模块路径 import，换家不必改测试）。
+ *
+ * 对 viewer：后端快照已摘掉行内动作，这里**再摘一次**（纵深防御，见 `nav.canWrite`）。
+ */
+
+import type { ReactNode } from "react";
+import { Button, Surface, Tag } from "../../components/primitives";
+import type { Role } from "../../lib/types";
+import { useAuditStore } from "../audit";
+import { AdminTable, Notice, type AdminColumn } from "../components";
+import { canWrite } from "./nav";
+import { SectionHeader } from "./SectionHeader";
+import { cellText, rowIdentity, useRowActionRunner, useTableRows, type PanelRow, type TableFlash } from "./tableState";
+import type { PanelSectionDto } from "./types";
+
+export { cellText, rowIdentity };
+export type { PanelRow };
+
+/** 反馈行：错误码与文案分两处（§5.4.6），成功/失败用不同色。 */
+function TableFlashRow({ flash }: { flash: TableFlash | null }): ReactNode {
+ if (!flash) return null;
+ return (
+
+ {flash.code ? {title}
+ {hint ? {hint} : null} +{actions}
+