feat(t9): P76 导出锚点判树修正 + P77 应用内详情形态 + 观察项①勾选回填 + 演练桩

P76（T8 验收遗留）：快应用上下文的导出按钮此前恒按中心会话树判"导出"锚点
（Data.vue exportable 读 store.modules），锚点判定不生效（fail-closed 方向，
有授权也不画按钮）。本轮把 AppContext 拉到的**目标应用树**经 modules prop 下传，
Data.vue 的权限判据改为 permsTree（app=应用树 / center=会话树），canExport 纯函数不动。
Stats.vue 未接：本页无锚点判定也无 store.modules 引用，加 prop 是死代码（差异记 T9 报告）。

P77（T8 验收遗留）：应用上下文内的"详情"不再跳回中心路由 /admin/data/detail。
形态二选一取**子路由 /app/:appCode/data/detail**（同一个 AnswerDetail.vue）：
地址保留 uuid 可深链/刷新、详情页只有一份实现、back() 本就按 app 回应用数据视图，
写 parentPath 反而造假（menuRoute 的 ROUTE_PATHS 只收静态 path，应用段导航在页内轻导航）。
goDetail 按 props.context 分派；back() 改读 route.params.appCode，撤掉 query.app 双轨。

观察项①（T8 验收记档）：确认跨触底页勾选**会被清空**——view-ui-plus 的 data 监听器
用 makeObjBaseData 重建 objData，_isChecked 只认行上的 _checked（点选不回写行），
整组替换后勾选视觉与 getSelection 归零而"已选 N 条"仍累计。新增 withSelectionState()
在 reload/loadMore 两条装载路径按 selected 回填 _checked，selected 为唯一事实源。

演练桩（本地件，dev:mock 生效）：baseapi 增 fc-drill 快应用模块树（方案 §6.2 五行含
导入/导出两个 path 空锚点），dataapi 增 /api/form/resolve 桩（快应用数据视图唯一的
合规取数路径是 code→resolve→uuid，契约 §1）。其余外指 appCode 仍旧返回空树（P3 口径）。

门禁：npm run build ✓ / npm run type-check 0 错 ✓；
t1~t9 全量复跑：t5 13/0/1、t6 22/0/2、t7 12/0/0、t8 21/0/1、t9 12/0/1
（skip 均为 headless Edge --dump-dom 吐 0 字节的 P73 环境事实，不假通过）。
本提交含 T6~T8 三轮堆在工作区的既有改动（沿 T8 验收 §5 推送分层）。

src/views/admin/AnswerDetail.vue

@@ -0,0 +1,246 @@
+<script setup lang="ts">
+/**
+ * 答卷详情（T8，任务书"详情页"）：中心上下文 `/admin/data/detail?answerId=&lt;uuid&gt;`，
+ * 快应用上下文 `/app/{appCode}/data/detail?answerId=&lt;uuid&gt;`（P77——同一个组件、同一条 uuid 链，
+ * 返回按地址段认路，不把用户弹出应用壳）。
+ *
+ * 三条纪律：
+ * 1. **uuid 寻址**（V5）：参数与页面文案里出现的答卷身份只有 32 位 uuid，库内自增 id 不在这条链上，
+ *    也不在任何响应里（后端 ReadModels 的注释是同一条）；
+ * 2. **按钉住版本呈现**：`groups` 是这条答卷提交时那个版本的 schema（后端 detail 直接下发），
+ *    所以升版后回看历史答卷不会看到"当年没有的字段"，三态空值与已删字段由同一份呈现函数降级显示（V8）；
+ * 3. **改状态/编辑入口按管理权显隐**（V29 前端半句）：判据是"授权模块集里有没有 `/admin/data` 这一行"，
+ *    与后端守卫同一棵树（`FormAdminGuard`），前端藏按钮不等于授权，接口侧仍会拒。
+ *    ——这一条在两种上下文里都按**中心会话树**判：后端 detail/list/export 走的仍是中心 `/admin/data` 行，
+ *    快应用自己的"数据查看"行不参与接口把关（该口径缺口登记执行手册 §5，见 T9 报告）。
+ */
+import { computed, onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { Message, Modal } from "view-ui-plus";
+import { dataApi } from "@/api/module/data";
+import { resolveForm } from "@/api/module/fill";
+import AnswerValueView from "@/components/answer/AnswerValueView.vue";
+import AnswerEditModal from "@/components/answer/AnswerEditModal.vue";
+import { useDefaultStore } from "@/store";
+import { hasPage } from "@/utils/modulePerms";
+import { statusDisplay } from "@/utils/dataValue";
+import type { AnswerDetail } from "@/types/data";
+import type { StatusDefView } from "@/types/form";
+
+const route = useRoute();
+const router = useRouter();
+const store = useDefaultStore();
+
+const answerId = computed(() => String(route.query.answerId || "").trim());
+const detail = ref<AnswerDetail | null>(null);
+const loading = ref(false);
+const error = ref("");
+
+/** 数据管理权（授权模块行判定；填表人身份进来时这里就是 false——V29 前端半句） */
+const canManage = computed(() => hasPage(store.modules, "/admin/data"));
+const liveStatusDefs = ref<StatusDefView[]>([]);
+const statusModal = ref<{ visible: boolean; target: string }>({ visible: false, target: "" });
+const editOpen = ref(false);
+
+async function load() {
+    if (!answerId.value) {
+        error.value = "缺少 answerId（答卷 uuid）——数据面只认 uuid，地址形如 ?answerId=&lt;32 位 uuid&gt;";
+        return;
+    }
+    loading.value = true;
+    error.value = "";
+    try {
+        detail.value = await dataApi.detail(answerId.value).send();
+    } catch (e: any) {
+        // 不在范围内=FORBIDDEN（与列表同一构造器判：列表看不见的详情也打不开）
+        error.value = e?.message || "答卷加载失败";
+        detail.value = null;
+    } finally {
+        loading.value = false;
+    }
+}
+
+/**
+ * 状态候选来自该表单的<b>当前发布版本</b>定义（detail 响应不含 statusDefs，这是 T4 已验收的形状）。
+ * 取数走 resolve——它是契约 §1 里读接口的唯一入口，且不要求"表单设计"模块行，
+ * 所以只授权数据管理的身份也能拿到；表单已停用/从未发布时 resolve 会拒，
+ * 那时就不给改状态入口（宁可少一个动作，也不编一份假的状态表）。
+ */
+async function loadStatusDefs() {
+    if (!detail.value) return;
+    try {
+        const resolved = await resolveForm(detail.value.code, detail.value.appCode);
+        liveStatusDefs.value = (resolved.statusDefs || []).filter((d) => !d.is_deleted);
+    } catch (e: any) {
+        console.warn("[T8] 状态定义取不到（表单可能已停用/未发布）：", e?.message || e);
+        liveStatusDefs.value = [];
+    }
+}
+
+function back() {
+    // 归属上下文由地址段给出（P77）：/app/{appCode}/data/detail → 回该应用的数据视图；否则回中心数据管理
+    const app = String(route.params.appCode || "");
+    if (app) router.push({ path: `/app/${app}/data`, query: { form: detail.value?.formUuid } });
+    else router.push({ path: "/admin/data", query: { form: detail.value?.formUuid } });
+}
+
+function openStatus() {
+    if (!liveStatusDefs.value.length) {
+        Message.warning("这张表的状态定义取不到（可能表单定义已被清理），本轮不给出改状态入口");
+        return;
+    }
+    statusModal.value = { visible: true, target: liveStatusDefs.value[0].code };
+}
+
+async function submitStatus() {
+    statusModal.value.visible = false;
+    try {
+        await dataApi.changeStatus(answerId.value, statusModal.value.target).send();
+        Message.success("已改状态并写 status_log");
+        await load();
+    } catch (e: any) {
+        Message.error(e?.message || "改状态失败");
+    }
+}
+
+function softDelete() {
+    Modal.confirm({
+        title: "确认软删这条答卷？",
+        content: "软删是唯一的删除形态（无物理删除接口）：四条读出路径同时不可见，索引行同步删，限填名额释放。",
+        onOk: async () => {
+            try {
+                await dataApi.softDelete(answerId.value).send();
+                Message.success("已软删");
+                back();
+            } catch (e: any) {
+                Message.error(e?.message || "软删失败");
+            }
+        }
+    });
+}
+
+onMounted(async () => {
+    await load();
+    await loadStatusDefs();
+});
+</script>
+
+<template>
+    <div class="page-wrapper yh-fill">
+        <div class="main-container">
+            <div class="head-bar">
+                <Button icon="ios-arrow-back" @click="back">返回列表</Button>
+                <span v-if="detail" class="crumb">{{ detail.formName || detail.code }}</span>
+            </div>
+
+            <Alert v-if="loading" show-icon type="info">加载中…</Alert>
+            <Alert v-else-if="error" show-icon type="error">{{ error }}</Alert>
+
+            <template v-else-if="detail">
+                <div class="meta-card">
+                    <div class="meta-row"><span class="meta-key">答卷 uuid</span><code>{{ detail.answerId }}</code></div>
+                    <div class="meta-row"><span class="meta-key">表单</span>
+                        <span>{{ detail.formName }}（{{ detail.appCode }}/{{ detail.code }}）</span>
+                    </div>
+                    <div class="meta-row"><span class="meta-key">钉住版本</span>
+                        <span>v{{ detail.version }}（按这一版渲染，与当前发布版无关）</span>
+                    </div>
+                    <div class="meta-row"><span class="meta-key">状态</span>
+                        <span>{{ statusDisplay(detail.status, detail.statusLabel) }}</span>
+                    </div>
+                    <div class="meta-row"><span class="meta-key">报名号</span><span>{{ detail.answerNo || "—" }}</span></div>
+                    <div class="meta-row"><span class="meta-key">提交时间</span><span>{{ detail.submitTime }}</span></div>
+                    <div class="meta-row"><span class="meta-key">提交人 / 被代填人</span>
+                        <span>{{ detail.submitterId }} / {{ detail.subjectId ?? "—（本人自填）" }}</span>
+                    </div>
+                    <div class="meta-row"><span class="meta-key">表单 uuid</span><code>{{ detail.formUuid }}</code></div>
+                </div>
+
+                <div class="actions" v-if="canManage">
+                    <Button type="primary" @click="editOpen = true">编辑值</Button>
+                    <Button @click="openStatus">改状态</Button>
+                    <Button type="error" ghost @click="softDelete">软删</Button>
+                    <span class="tip-note">填表人身份看不到这一排入口（V29 前端半句）；接口侧的拒绝是另一道，不冲突。</span>
+                </div>
+                <Alert v-else show-icon type="info" class="actions">
+                    当前身份没有数据管理模块行，本页只读（改状态/编辑/删除入口不渲染）。
+                </Alert>
+
+                <h5 class="section-title">答卷值（钉住版本 v{{ detail.version }}）</h5>
+                <AnswerValueView :groups="detail.groups" :values="detail.values" />
+            </template>
+
+            <Modal v-model="statusModal.visible" title="改状态" :width="420">
+                <Form :label-width="90">
+                    <FormItem label="当前状态">
+                        <span>{{ detail ? statusDisplay(detail.status, detail.statusLabel) : "—" }}</span>
+                    </FormItem>
+                    <FormItem label="目标状态">
+                        <Select v-model="statusModal.target">
+                            <Option v-for="def in liveStatusDefs" :key="def.code" :value="def.code">{{ def.label }}</Option>
+                        </Select>
+                    </FormItem>
+                </Form>
+                <p class="tip-note">
+                    状态是标记不是流转：不校验从哪个状态到哪个状态、无条件分支（方案 §5.3 红线、V15）；改动写 status_log。
+                </p>
+                <template #footer>
+                    <Button @click="statusModal.visible = false">取消</Button>
+                    <Button type="primary" @click="submitStatus">确认</Button>
+                </template>
+            </Modal>
+
+            <AnswerEditModal v-if="detail && editOpen" :detail="detail" mode="admin" @close="editOpen = false"
+                @saved="load" />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.head-bar {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+}
+.crumb {
+    color: #808695;
+    font-size: 13px;
+}
+.meta-card {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 6px 24px;
+    padding: 12px 16px;
+    background: #f8f8f9;
+    border-radius: 4px;
+    margin-bottom: 12px;
+}
+.meta-row {
+    display: flex;
+    gap: 10px;
+    font-size: 13px;
+    align-items: baseline;
+}
+.meta-key {
+    color: #808695;
+    min-width: 130px;
+}
+.actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 16px;
+    flex-wrap: wrap;
+}
+.tip-note {
+    color: #808695;
+    font-size: 12px;
+}
+.section-title {
+    margin: 0 0 10px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #17233d;
+}
+</style>

src/views/admin/Data.vue

@@ -1,11 +1,775 @@
 <script setup lang="ts">
-import PageStub from "@/components/PageStub.vue";
+/**
+ * 数据列表 /admin/data（T8 落地，替换 T5 占位）。
+ *
+ * 四处分寸，改动前请先读：
+ * 1. **翻页只有游标**：后端 keyset 响应没有 total、没有页码（方案 §5.5 铁律②），
+ *    所以这里只有"触底加载下一页"，`cursor`=上一页末行 answerId(uuid)（P39），不能跳页；
+ * 2. **列 = 最新已发布 schema ∪ 值文档里出现过的历史 key**（方案 §5.2）：
+ *    删字段不清历史索引行，历史 key 在值里还在，列上降级显示"（已移除字段）xxx"（V8 前端半句）。
+ *    筛选候选则**只认后端 `filterFields`**（当前发布版本 searchable 且有算子的字段）——
+ *    历史已删字段的 key 发给后端会被 `rejectUnknownKeys` 拒（缺口记执行手册 §5 问题单，前端不私造筛选项）；
+ * 3. **可见列按 (归属应用, code) 记忆**（V40），localStorage 键见 `utils/dataValue.columnMemoryKey`；
+ * 4. **数据范围以后端为准**：响应里的 `scopes` 只用来把"你现在看到的是哪个范围"讲清楚，
+ *    前端不据此再过滤一遍（任务书 T8 红线）。
+ *
+ * 快应用上下文（AppContext）复用本组件：传 `context="app"` + `app-code` + `codes`
+ * （候选来自该应用模块树的 `/f/{code}` 行，经 resolve 拿 uuid——定义管理权不在快应用上下文里，§3.4）
+ * + `modules`（**同一棵原始模块树**，按钮级权限按它判，P76）。
+ */
+import { computed, h, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { Message, Modal, Tooltip, Checkbox } from "view-ui-plus";
+import { actionColumn } from "@/utils/tableActions";
+import { useElementHeight } from "@/utils/hook/useElementHeight";
+import { useFormCandidates } from "@/utils/hook/useFormCandidates";
+import { dataApi, downloadBlob, exportBlob } from "@/api/module/data";
+import { useDefaultStore } from "@/store";
+import { canExport } from "@/utils/modulePerms";
+import AnswerEditModal from "@/components/answer/AnswerEditModal.vue";
+import {
+    cellText,
+    clipText,
+    columnMemoryKey,
+    deriveColumns,
+    loadColumnMemory,
+    reconcileVisibleKeys,
+    saveColumnMemory,
+    statusDisplay,
+    type DataCol
+} from "@/utils/dataValue";
+import { scopeLabel, type AnswerDetail, type AnswerRow, type FilterField, type FilterItem, type ListView } from "@/types/data";
+import type { StatusDefView } from "@/types/form";
+import type { DesignField } from "@/types/formSchema";
+import type { IModule } from "@/types/Basics";
+
+/** 行视图 + 勾选态（`_checked` 是 view-ui-plus Table 的行内选中字段，见 withSelectionState） */
+type RowVM = AnswerRow & { _checked?: boolean };
+
+const props = withDefaults(
+    defineProps<{
+        context?: "center" | "app";
+        /** app 上下文的归属应用（center 留空=form-center） */
+        appCode?: string;
+        /** app 上下文的候选 code（来自该应用模块树的 /f/{code} 行） */
+        codes?: string[];
+        /**
+         * 按钮级权限判定的**那棵树**（P76）：app 上下文必须由宿主传入目标应用的模块树
+         * （GetUserMod?appCode= 的结果）——中心会话树里没有快应用的"导出"锚点行，
+         * 拿它判锚点等于永远判不中（fail-closed 方向：有授权也不画按钮）。
+         * center 上下文不传，仍按 `store.modules`（会话自己的树）判页面行。
+         */
+        modules?: IModule[] | null;
+        /**
+         * 被宿主页面内嵌（快应用上下文 /app/:appCode/）时置 true：只渲染内容本体，
+         * 不再套一层 `.page-wrapper > .main-container`——否则会出现双层白卡与双份内边距。
+         */
+        embedded?: boolean;
+    }>(),
+    { context: "center", appCode: "", codes: () => [], modules: null, embedded: false }
+);
+
+const route = useRoute();
+const router = useRouter();
+const store = useDefaultStore();
+
+const regionRef = ref<HTMLElement | null>(null);
+const regionH = useElementHeight(regionRef);
+
+const PAGE_SIZE = 20;
+const BATCH_LIMIT = 200;
+
+// ==================== 表单候选与当前版本（与统计页共用 useFormCandidates） ====================
+
+const {
+    candidates,
+    candidateError,
+    current,
+    formUuid,
+    loadCandidates,
+    selectForm: chooseForm,
+    pickByCode
+} = useFormCandidates(() => props.context, () => props.appCode, () => props.codes);
+
+const manualCode = ref("");
+
+/** 定义清单不可用时的直达入口：仍然只经 resolve（契约 §1"resolve 是读接口唯一入口"） */
+async function useManualCode() {
+    const code = manualCode.value.trim();
+    if (!code) {
+        Message.warning("请先输入表单 code");
+        return;
+    }
+    const uuid = await pickByCode(code);
+    if (!uuid) {
+        Message.error(candidateError.value || "按 code 解析失败");
+        return;
+    }
+    manualCode.value = "";
+    await selectForm(uuid);
+}
+
+// ==================== 筛选 / 排序 / 游标 ====================
+
+const filterFields = ref<FilterField[]>([]);
+const filterRows = ref<FilterItem[]>([]);
+const statusFilter = ref("");
+const order = ref<"desc" | "asc">("desc");
+const rows = ref<RowVM[]>([]);
+const nextCursor = ref<string | null>(null);
+const scopes = ref<string[]>([]);
+const loading = ref(false);
+const loadedOnce = ref(false);
+
+/** 已选行（跨已加载页累积；换表单/换筛选即清空） */
+const selected = ref<string[]>([]);
+
+const liveStatusDefs = computed<StatusDefView[]>(() =>
+    (current.value?.statusDefs || []).filter((d: StatusDefView) => !d.is_deleted)
+);
+
+/** 生效范围文案（只展示，不过滤） */
+const scopeText = computed(() => (scopes.value.length ? scopes.value.map(scopeLabel).join("、") : "后端未回传"));
+
+async function loadFilterFields(uuid: string): Promise<void> {
+    try {
+        filterFields.value = (await dataApi.filterFields(uuid).send()) || [];
+    } catch (e: any) {
+        filterFields.value = [];
+        console.warn("[T8] 筛选候选取不到：", e?.message || e);
+    }
+}
+
+function queryBody() {
+    const filters = filterRows.value
+        .filter((f) => f.key)
+        .map((f) => ({
+            key: f.key,
+            value: f.value || undefined,
+            from: f.from || undefined,
+            to: f.to || undefined
+        }));
+    return {
+        formUuid: formUuid.value,
+        status: statusFilter.value || undefined,
+        filters: filters.length ? filters : undefined
+    };
+}
+
+/** 首屏/条件变更：重置游标从头取（keyset 没有"跳到第 N 页"这回事） */
+async function reload() {
+    if (!formUuid.value) return;
+    loading.value = true;
+    try {
+        const res: ListView = await dataApi
+            .list({ ...queryBody(), cursor: null, order: order.value, size: PAGE_SIZE })
+            .send();
+        selected.value = [];
+        rows.value = withSelectionState(res?.rows || []);
+        nextCursor.value = res?.nextCursor ?? null;
+        scopes.value = res?.scopes || [];
+        loadedOnce.value = true;
+    } catch (e: any) {
+        Message.error(e?.message || "数据加载失败");
+    } finally {
+        loading.value = false;
+    }
+}
+
+/** 触底加载：cursor=上一页末行 uuid，服务端按 uk 换库内 id 并同样过范围（P39：不可见即拒） */
+async function loadMore() {
+    if (!nextCursor.value || loading.value) return;
+    loading.value = true;
+    try {
+        const res: ListView = await dataApi
+            .list({ ...queryBody(), cursor: nextCursor.value, order: order.value, size: PAGE_SIZE })
+            .send();
+        rows.value = withSelectionState([...rows.value, ...(res?.rows || [])]);
+        nextCursor.value = res?.nextCursor ?? null;
+        if (res?.scopes) scopes.value = res.scopes;
+    } catch (e: any) {
+        Message.error(e?.message || "下一页加载失败");
+    } finally {
+        loading.value = false;
+    }
+}
+
+/**
+ * 行级勾选态回填（T9 观察项①落实）：view-ui-plus 的 `data` 监听器会用 `makeObjBaseData` 重建
+ * `objData`，而那里的 `_isChecked` **只认行上的 `_checked`**（点选只改 objData，不回写行），
+ * 所以整组替换后已勾的行会弹回未选，而"已选 N 条"仍按 selected 累计——两处口径打架。
+ * 判据统一放这一处：`selected`（onSelectionChange 维护）才是唯一事实源，rows 每次都据它带 `_checked`。
+ */
+function withSelectionState(list: AnswerRow[]): RowVM[] {
+    return list.map((row) => ({ ...row, _checked: selected.value.includes(row.answerId) } as RowVM));
+}
+
+// ==================== 可见列（V40） ====================
+
+const allColumns = computed<DataCol[]>(() => deriveColumns(current.value?.fields || [], rows.value));
+const visibleKeys = ref<string[]>([]);
+
+function applyMemory() {
+    if (!current.value) {
+        visibleKeys.value = [];
+        return;
+    }
+    const key = columnMemoryKey(current.value.appCode, current.value.code);
+    visibleKeys.value = reconcileVisibleKeys(allColumns.value, loadColumnMemory(key));
+}
+
+const colPicker = ref(false);
+
+function toggleColumn(colKey: string) {
+    const next = visibleKeys.value.includes(colKey)
+        ? visibleKeys.value.filter((k) => k !== colKey)
+        : [...visibleKeys.value, colKey];
+    visibleKeys.value = next;
+    if (current.value) saveColumnMemory(columnMemoryKey(current.value.appCode, current.value.code), next);
+}
+
+watch(allColumns, applyMemory);
+
+// ==================== 表格列定义 ====================
+
+function renderCell(col: DataCol, values: Record<string, unknown>) {
+    const text = cellText(col.field, col.key, values);
+    const { shown, truncated, full } = clipText(text);
+    const span = h("span", { class: col.removed ? "cell-removed" : "" }, shown);
+    if (!truncated) return span;
+    return h(Tooltip, { content: full, transfer: true }, { default: () => [span] });
+}
+
+const tableColumns = computed(() => {
+    const cols: any[] = [{ type: "selection", width: 44 }];
+    cols.push({ title: "提交时间", key: "submitTime", width: 160 });
+    cols.push({
+        title: "状态",
+        key: "status",
+        width: 130,
+        render: (h2: any, p: any) => h2("span", statusDisplay(p.row.status, p.row.statusLabel))
+    });
+    for (const col of allColumns.value) {
+        if (!visibleKeys.value.includes(col.key)) continue;
+        cols.push({
+            title: col.label,
+            key: col.key,
+            width: 180,
+            render: (_h2: any, p: any) => renderCell(col, p.row.values)
+        });
+    }
+    cols.push({
+        title: "报名号",
+        key: "answerNo",
+        width: 150,
+        render: (h2: any, p: any) => h2("span", p.row.answerNo || "—")
+    });
+    cols.push({
+        title: "身份",
+        key: "identity",
+        width: 170,
+        render: (h2: any, p: any) =>
+            h2(Tooltip, {
+                content: `submitter_id=${p.row.submitterId}${p.row.subjectId ? `，subject_id=${p.row.subjectId}（他人代填）` : "，无代填主体"}`,
+                transfer: true
+            }, {
+                default: () => [h2("span", `提交人 ${p.row.submitterId}${p.row.subjectId ? `｜主体 ${p.row.subjectId}` : ""}`)]
+            })
+    });
+    cols.push(
+        actionColumn(
+            [
+                { key: "detail", label: "详情", on: (row: AnswerRow) => goDetail(row) },
+                { key: "edit", label: "编辑", on: (row: AnswerRow) => openEdit(row) },
+                { key: "status", label: "改状态", on: (row: AnswerRow) => openStatus(row) },
+                { key: "delete", label: "软删", danger: true, on: (row: AnswerRow) => softDeleteOne(row) }
+            ],
+            { mode: "text", maxInline: 2 }
+        )
+    );
+    return cols;
+});
+
+/** 附件列的"N 个文件"由 cellText 统一给，这里不再另写一份（同一张表里两套口径迟早漂移） */
+
+// ==================== 行操作 ====================
+
+function goDetail(row: AnswerRow) {
+    // P77：快应用上下文留在应用壳里看详情（/app/{appCode}/data/detail），中心上下文走 /admin/data/detail；
+    // 两边都只带 uuid（V5），返回由详情页按 route.params.appCode 认路。
+    const path = props.context === "app" ? `/app/${props.appCode}/data/detail` : "/admin/data/detail";
+    router.push({ path, query: { answerId: row.answerId } });
+}
+
+const editDetail = ref<AnswerDetail | null>(null);
+
+async function openEdit(row: AnswerRow) {
+    try {
+        // 编辑弹层吃的是详情接口——它带的是该答卷**钉住版本**的 groups，不是当前发布版本
+        editDetail.value = await dataApi.detail(row.answerId).send();
+    } catch (e: any) {
+        Message.error(e?.message || "答卷详情取不到");
+    }
+}
+
+/** 等值筛选项的候选值：选项类字段（select/radio/checkbox/multiselect）的已展开 options（契约 §2.1 内联） */
+function eqOptionsFor(key: string): Array<{ label: string; value: string }> {
+    const field = (current.value?.fields || []).find((f: DesignField) => f.key === key);
+    const options = field?.options;
+    return Array.isArray(options) ? options : [];
+}
+
+const statusModal = ref<{ visible: boolean; answerId: string; target: string; current: string }>({
+    visible: false,
+    answerId: "",
+    target: "",
+    current: ""
+});
+
+function openStatus(row: AnswerRow) {
+    if (!liveStatusDefs.value.length) {
+        Message.warning("该表单没有可用状态定义");
+        return;
+    }
+    statusModal.value = {
+        visible: true,
+        answerId: row.answerId,
+        target: row.status || liveStatusDefs.value[0].code,
+        current: statusDisplay(row.status, row.statusLabel)
+    };
+}
+
+async function submitStatus() {
+    const { answerId, target } = statusModal.value;
+    statusModal.value.visible = false;
+    try {
+        await dataApi.changeStatus(answerId, target).send();
+        Message.success("已改状态并写 status_log");
+        await reload();
+    } catch (e: any) {
+        Message.error(e?.message || "改状态失败");
+    }
+}
+
+function softDeleteOne(row: AnswerRow) {
+    Modal.confirm({
+        title: "确认软删这条答卷？",
+        content: "软删是唯一的删除形态（无物理删除接口）：列表/详情/统计/导出都不再可见，索引行同步删，限填名额释放。",
+        onOk: async () => {
+            try {
+                await dataApi.softDelete(row.answerId).send();
+                Message.success("已软删");
+                await reload();
+            } catch (e: any) {
+                Message.error(e?.message || "软删失败");
+            }
+        }
+    });
+}
+
+function onSelectionChange(selection: RowVM[]) {
+    selected.value = selection.map((r) => r.answerId);
+}
+
+// ==================== 批量 ====================
+
+function reportBatch(results: { answerId: string; success: boolean; msg: string | null }[], actionText: string) {
+    const failed = results.filter((r) => !r.success);
+    const okCount = results.length - failed.length;
+    if (!failed.length) {
+        Message.success(`${actionText} ${okCount} 条全部成功（后端逐条校验、逐条留痕）`);
+        return;
+    }
+    Modal.warning({
+        title: `${actionText}：成功 ${okCount} 条，失败 ${failed.length} 条`,
+        content: failed
+            .slice(0, 10)
+            .map((f) => `${f.answerId.slice(0, 8)}…：${f.msg || "未知原因"}`)
+            .join("\n") + (failed.length > 10 ? `\n…另有 ${failed.length - 10} 条` : ""),
+        okText: "知道了"
+    });
+}
+
+function checkedBatch(ids: string[], actionText: string, run: () => Promise<any>) {
+    if (!ids.length) {
+        Message.warning("先勾选要处理的答卷");
+        return;
+    }
+    if (ids.length > BATCH_LIMIT) {
+        Message.warning(`批量单次上限 ${BATCH_LIMIT} 条（后端 P29），当前选了 ${ids.length} 条，请减少选择`);
+        return;
+    }
+    Modal.confirm({
+        title: `确认${actionText} ${ids.length} 条？`,
+        content: `处理范围只覆盖${actionText}能覆盖到的行：不在你数据范围（当前=${scopeText.value}）里的答卷会逐条被拒并点名原因，成功的部分照常留痕。`,
+        onOk: async () => {
+            try {
+                const results = await run();
+                reportBatch(results || [], actionText);
+                await reload();
+            } catch (e: any) {
+                Message.error(e?.message || `${actionText}失败`);
+            }
+        }
+    });
+}
+
+function batchDelete() {
+    checkedBatch(selected.value, "批量软删", () => dataApi.batchSoftDelete(selected.value).send());
+}
+
+const batchStatusModal = ref(false);
+const batchStatusTarget = ref("");
+
+function batchChangeStatus() {
+    if (!selected.value.length) {
+        Message.warning("先勾选要改状态的答卷");
+        return;
+    }
+    if (!liveStatusDefs.value.length) {
+        Message.warning("该表单没有可用状态定义");
+        return;
+    }
+    batchStatusTarget.value = liveStatusDefs.value[0].code;
+    batchStatusModal.value = true;
+}
+
+async function submitBatchStatus() {
+    const ids = selected.value;
+    batchStatusModal.value = false;
+    checkedBatch(ids, `批量改状态为「${liveStatusDefs.value.find((d) => d.code === batchStatusTarget.value)?.label}」`, () =>
+        dataApi.batchChangeStatus(ids, batchStatusTarget.value).send()
+    );
+}
+
+// ==================== 导出 ====================
+
+/**
+ * 权限判定用的树（P76）：app 上下文=宿主编进来的**目标应用树**（快应用的"导出"锚点行在这里），
+ * center 上下文=会话自己的树（按 `/admin/data` 页面行判，手册 §2.2 中心表没有导出行）。
+ * 两种上下文各自吃自己的树，`canExport` 的纯函数判据不变。
+ */
+const permsTree = computed(() => (props.context === "app" ? props.modules : store.modules));
+const exportable = computed(() => canExport(permsTree.value, props.context === "app" ? "app" : "center"));
+const exporting = ref(false);
+
+function askExport() {
+    if (!formUuid.value) {
+        Message.warning("先选择表单");
+        return;
+    }
+    Modal.confirm({
+        title: "导出当前筛选结果",
+        content:
+            `范围=单表单 + 当前筛选（表单：${current.value?.name || formUuid.value}）。` +
+            "行数口径是你这个数据范围（当前=" + scopeText.value + "）下符合筛选条件的**总数**，不是本页已加载的行数。" +
+            "导出是同步流式下载，不排任务、不给假进度。",
+        onOk: async () => {
+            exporting.value = true;
+            try {
+                const blob = await exportBlob(queryBody());
+                downloadBlob(blob, `${current.value?.code || "form"}-answers.xlsx`);
+                Message.success("已开始下载");
+            } catch (e: any) {
+                Message.error(e?.message || "导出失败");
+            } finally {
+                exporting.value = false;
+            }
+        }
+    });
+}
+
+// ==================== 触底加载（keyset 的 UI 形态） ====================
+
+let scrollTarget: HTMLElement | null = null;
+
+function onScroll() {
+    if (!scrollTarget || loading.value || !nextCursor.value) return;
+    const { scrollTop, clientHeight, scrollHeight } = scrollTarget;
+    if (scrollTop + clientHeight >= scrollHeight - 40) loadMore();
+}
+
+/** view-ui 定了 :height 后内部滚动在 .ivu-table-body，触底事件挂它而不是挂窗口 */
+async function bindBottomScroll() {
+    await nextTick();
+    scrollTarget?.removeEventListener("scroll", onScroll);
+    scrollTarget = regionRef.value?.querySelector(".ivu-table-body") ?? null;
+    scrollTarget?.addEventListener("scroll", onScroll);
+}
+
+watch(rows, bindBottomScroll);
+onMounted(bindBottomScroll);
+onBeforeUnmount(() => scrollTarget?.removeEventListener("scroll", onScroll));
+
+// ==================== 选择与初始化 ====================
+
+async function selectForm(uuid: string) {
+    formUuid.value = uuid;
+    filterRows.value = [];
+    statusFilter.value = "";
+    rows.value = [];
+    nextCursor.value = null;
+    loadedOnce.value = false;
+    await Promise.all([chooseForm(uuid), loadFilterFields(uuid)]);
+    applyMemory();
+    await reload();
+}
+
+function addFilterRow() {
+    filterRows.value = [...filterRows.value, { key: "", value: "", from: "", to: "" }];
+}
+
+function removeFilterRow(index: number) {
+    filterRows.value = filterRows.value.filter((_, i) => i !== index);
+}
+
+function filterFieldOf(key: string): FilterField | undefined {
+    return filterFields.value.find((f) => f.key === key);
+}
+
+async function init() {
+    await loadCandidates();
+    const fromQuery = String(route.query.form || "");
+    const picked = candidates.value.find((c: { formUuid: string }) => c.formUuid === fromQuery) || candidates.value[0];
+    if (picked) await selectForm(picked.formUuid);
+}
+
+watch(
+    () => [props.context, props.appCode, props.codes.join(",")],
+    () => init()
+);
+
+onMounted(init);
 </script>
 
 <template>
-    <PageStub
-        title="数据管理"
-        stage="T8"
-        note="两段式列表 + keyset（提交时间序）、可见列选择记忆、批量软删/改状态、按钉住版本编辑在 T8 落地；数据范围（scope）由后端裁决，前端只消费。"
-    />
+    <div :class="embedded ? 'data-bare' : 'page-wrapper yh-fill'">
+        <div :class="embedded ? '' : 'main-container'">
+            <div class="toolbar">
+                <Select v-model="formUuid" style="width: 260px" placeholder="选择表单" @on-change="selectForm">
+                    <Option v-for="c in candidates" :key="c.formUuid" :value="c.formUuid"
+                        :label="`${c.name}（${c.appCode}/${c.code}）`" />
+                </Select>
+                <Input v-model="manualCode" search placeholder="按 code 直达" style="width: 200px" clearable
+                    @on-search="useManualCode" />
+                <Select v-model="statusFilter" style="width: 140px" placeholder="状态" clearable @on-change="reload">
+                    <Option value="">全部状态</Option>
+                    <Option v-for="def in liveStatusDefs" :key="def.code" :value="def.code">{{ def.label }}</Option>
+                </Select>
+                <Select v-model="order" style="width: 150px" @on-change="reload">
+                    <Option value="desc">最新在前</Option>
+                    <Option value="asc">最早在前</Option>
+                </Select>
+                <Button icon="md-refresh" @click="reload">刷新</Button>
+                <Button icon="md-settings" @click="colPicker = true">列设置</Button>
+                <span class="toolbar-note">
+                    已加载 {{ rows.length }} 行{{ nextCursor ? "（还有下一页，触底继续取）" : "（已到末尾）" }}
+                </span>
+            </div>
+
+            <div v-if="filterFields.length || filterRows.length" class="filter-region">
+                <div v-for="(row, index) in filterRows" :key="`f_${index}`" class="filter-row">
+                    <Select v-model="row.key" style="width: 190px" placeholder="筛选字段">
+                        <Option v-for="f in filterFields" :key="f.key" :value="f.key"
+                            :label="`${f.label}（${f.operator === 'EQ' ? '等值' : f.operator === 'RANGE' ? '区间' : '前缀'}）`" />
+                    </Select>
+                    <template v-if="filterFieldOf(row.key)?.operator === 'EQ'">
+                        <Select v-model="row.value" style="width: 200px" placeholder="选择值" clearable>
+                            <Option v-for="opt in eqOptionsFor(row.key)" :key="opt.value" :value="opt.value"
+                                :label="opt.label" />
+                        </Select>
+                    </template>
+                    <template v-else-if="filterFieldOf(row.key)?.operator === 'RANGE'">
+                        <Input v-model="row.from" style="width: 160px"
+                            :placeholder="filterFieldOf(row.key)?.type === 'date' ? '起始日 YYYY-MM-DD' : '下界（含）'" />
+                        <Input v-model="row.to" style="width: 160px"
+                            :placeholder="filterFieldOf(row.key)?.type === 'date' ? '截止日 YYYY-MM-DD' : '上界（含）'" />
+                    </template>
+                    <template v-else>
+                        <Input v-model="row.value" style="width: 200px" placeholder="前缀文本" clearable />
+                    </template>
+                    <Button icon="md-close" @click="removeFilterRow(index)">删</Button>
+                </div>
+                <div class="filter-actions">
+                    <Button size="small" icon="md-add" @click="addFilterRow">加筛选条件</Button>
+                    <Button size="small" type="primary" :disabled="!formUuid" @click="reload">应用筛选</Button>
+                    <span class="toolbar-note">
+                        候选=当前发布版本里 searchable 且有算子的字段（附件类不出现，P28）；算子按字段类型定，不给自由表达式
+                    </span>
+                </div>
+            </div>
+
+            <Alert v-if="candidateError" show-icon type="warning" class="region-tip">
+                表单清单：{{ candidateError }}（这通常是账号只授权了"数据管理"、没有"表单设计"模块行——
+                用上面"按 code 直达"仍可打开已知表单的数据）
+            </Alert>
+            <Alert v-else-if="loadedOnce" show-icon type="info" class="region-tip">
+                数据范围（后端契约 §8 矩阵 + customId 解析，前端只展示不再过滤）：<b>{{ scopeText }}</b>
+            </Alert>
+
+            <div class="table-region" ref="regionRef">
+                <Table :columns="tableColumns" :data="rows" :height="regionH || undefined" :loading="loading"
+                    no-data-text="没有符合条件的答卷（或还没选表单）" class="link-table"
+                    @on-selection-change="onSelectionChange" />
+            </div>
+
+            <div class="page-panel">
+                <div class="fl ml-15 align-middle batch-bar">
+                    <span class="toolbar-note">已选 {{ selected.length }} 条</span>
+                    <Button size="small" :disabled="!selected.length" @click="batchDelete">批量软删</Button>
+                    <Button size="small" :disabled="!selected.length" @click="batchChangeStatus">批量改状态</Button>
+                    <Button v-if="exportable" size="small" icon="md-download" :loading="exporting"
+                        @click="askExport">导出</Button>
+                    <Tooltip v-else content="当前身份的授权模块集里没有导出权限位（V26：接口侧的后端拒是 T4 已验的另一半）" transfer>
+                        <span class="toolbar-note">导出（无权限）</span>
+                    </Tooltip>
+                </div>
+                <div class="fr page-hint">
+                    <span class="toolbar-note">{{ loading ? "取下一页…" : nextCursor ? "向下滚动继续加载" : "已到最后一页" }}</span>
+                </div>
+            </div>
+        </div>
+
+        <Modal v-model="colPicker" title="可见列（按表单记忆）" :width="520" @on-cancel="colPicker = false">
+            <p class="toolbar-note">
+                勾选即刻写入本地记忆（键=归属应用 + 表单 code，V40）；新出现的列会自动补进可见集，
+                历史已删字段列默认不铺满——需要看历史残留时再勾。
+            </p>
+            <div class="col-list">
+                <label v-for="col in allColumns" :key="col.key" class="col-item">
+                    <Checkbox :model-value="visibleKeys.includes(col.key)" @on-change="toggleColumn(col.key)">
+                        <span :class="col.removed ? 'cell-removed' : ''">{{ col.label }}</span>
+                        <span class="col-filled">已填 {{ Math.round(col.filledRatio * 100) }}%</span>
+                    </Checkbox>
+                </label>
+            </div>
+            <template #footer>
+                <Button @click="colPicker = false">关闭</Button>
+            </template>
+        </Modal>
+
+        <Modal v-model="batchStatusModal" title="批量改状态" :width="420">
+            <Form :label-width="90">
+                <FormItem label="目标状态">
+                    <Select v-model="batchStatusTarget">
+                        <Option v-for="def in liveStatusDefs" :key="def.code" :value="def.code">{{ def.label }}</Option>
+                    </Select>
+                </FormItem>
+            </Form>
+            <p class="toolbar-note">
+                逐条走单条校验与留痕（V39）：{{ selected.length }} 条里不在你数据范围内的会被逐条拒。
+            </p>
+            <template #footer>
+                <Button @click="batchStatusModal = false">取消</Button>
+                <Button type="primary" @click="submitBatchStatus">确认</Button>
+            </template>
+        </Modal>
+
+        <Modal v-model="statusModal.visible" title="改状态" :width="420">
+            <Form :label-width="90">
+                <FormItem label="当前状态">
+                    <span>{{ statusModal.current }}</span>
+                </FormItem>
+                <FormItem label="目标状态">
+                    <Select v-model="statusModal.target">
+                        <Option v-for="def in liveStatusDefs" :key="def.code" :value="def.code">{{ def.label }}</Option>
+                    </Select>
+                </FormItem>
+            </Form>
+            <p class="toolbar-note">
+                状态是标记不是流转：不校验从哪个状态到哪个状态、无条件分支（方案 §5.3 红线、V15）；改动写 status_log。
+            </p>
+            <template #footer>
+                <Button @click="statusModal.visible = false">取消</Button>
+                <Button type="primary" @click="submitStatus">确认</Button>
+            </template>
+        </Modal>
+
+        <AnswerEditModal v-if="editDetail" :detail="editDetail" mode="admin" @close="editDetail = null"
+            @saved="reload" />
+    </div>
 </template>
+
+<style scoped>
+.toolbar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 12px;
+    flex-wrap: wrap;
+}
+.toolbar-note {
+    color: #808695;
+    font-size: 12px;
+}
+.filter-region {
+    margin-bottom: 12px;
+    padding: 10px 12px;
+    background: #f8f8f9;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+.filter-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+.filter-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+.region-tip {
+    margin-bottom: 12px;
+}
+.batch-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.page-hint {
+    display: flex;
+    align-items: center;
+}
+.col-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    max-height: 46vh;
+    overflow-y: auto;
+}
+.col-item {
+    display: flex;
+    align-items: center;
+}
+.col-filled {
+    color: #c5c8ce;
+    font-size: 12px;
+    margin-left: 6px;
+}
+</style>
+
+<style>
+.cell-removed {
+    color: #ff9900;
+}
+.status-options {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-top: 8px;
+}
+.status-option {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+.status-note {
+    color: #808695;
+    font-size: 12px;
+}
+</style>

src/views/admin/Dicts.vue

@@ -1,11 +1,422 @@
 <script setup lang="ts">
-import PageStub from "@/components/PageStub.vue";
+/**
+ * 选项字典管理（/admin/dicts，契约 §2.1 / 方案 §4.3③b）。
+ *
+ * 两级的落点：
+ * - **本校字典**：`/dict/list` 只出本层，可增可删可改；
+ * - **平台级字典**：`sch_id=0` 的行只有超管（UserBase type==1）上下文能写，
+ *   校级用户这边只从 `/dict/selectable` 读到它们，**可见、可用、不可改**——
+ *   所以列表给平台级行挂「平台级」标签且不给操作按钮，域切换按钮也只对超管显示；
+ *   接口侧的拒绝仍由后端 FormAdminGuard 做，前端藏按钮不等于授权（契约 §7 身份行）。
+ *
+ * 条目的三条纪律：value 建一次即不可变（它是答案里存的值，也是 uk(dict_id,value) 的定位键）、
+ * label 随便改、废弃是软删（旧答卷仍能原样重存，只是设计器不再给选）。
+ */
+import { computed, onMounted, reactive, ref } from "vue";
+import { Message, Modal } from "view-ui-plus";
+import { dictApi } from "@/api/module/dict";
+import { useDefaultStore } from "@/store";
+import type { DictItemView, DictView } from "@/types/form";
+import { MAX_LABEL_LEN, MAX_NAME_LEN, CODE_PATTERN } from "@/types/formSchema";
+import { nextOptionValue } from "@/utils/designer/schema";
+
+const store = useDefaultStore();
+const loading = ref(false);
+const own = ref<DictView[]>([]);
+const selectable = ref<DictView[]>([]);
+/** 超管的当前维护域：school=本校，platform=平台级（schId=0） */
+const layer = ref<"school" | "platform">("school");
+
+const dictModal = reactive({ visible: false, creating: false, code: "", name: "", origin: null as DictView | null });
+const itemModal = reactive({ visible: false, dict: null as DictView | null, newLabel: "", items: [] as DictItemView[] });
+const busy = ref(false);
+
+/** render() 产出的节点拿不到 scoped 样式，样式走内联 */
+const CODE_CHIP_STYLE = {
+    color: "#515a6e",
+    background: "#f3f4f6",
+    borderRadius: "3px",
+    padding: "2px 6px",
+    fontSize: "12px"
+};
+
+const scope = computed(() => (layer.value === "platform" ? { schId: 0 } : {}));
+
+/** 列表数据源：超管在平台级上下文时只出平台级行；校级 = 本校行 + 平台级只读行（同 code 本校遮蔽平台） */
+const rows = computed<DictView[]>(() => {
+    if (layer.value === "platform") return own.value;
+    const platformVisible = selectable.value.filter(
+        (d) => d.platformLevel && !own.value.some((o) => o.code === d.code)
+    );
+    return [...own.value, ...platformVisible];
+});
+
+const columns = computed(() => [
+    { title: "字典名称", key: "name", minWidth: 180 },
+    { title: "code", key: "code", minWidth: 140, render: (h: any, p: any) => h("code", { style: CODE_CHIP_STYLE }, p.row.code) },
+    {
+        title: "层级",
+        key: "platformLevel",
+        width: 130,
+        render: (h: any, p: any) =>
+            h(
+                "Tag",
+                { color: p.row.platformLevel ? "blue" : "green" },
+                () => (p.row.platformLevel ? "平台级（不可改）" : "本校")
+            )
+    },
+    {
+        title: "可用条目",
+        key: "items",
+        width: 110,
+        render: (h: any, p: any) => h("span", `${(p.row.items || []).length}`)
+    },
+    {
+        title: "引用方式",
+        key: "source",
+        minWidth: 180,
+        render: (h: any, p: any) => h("code", { style: CODE_CHIP_STYLE }, `dict:${p.row.code}`)
+    },
+    {
+        title: "操作",
+        key: "action",
+        width: 190,
+        align: "center",
+        render: (h: any, p: any) =>
+            p.row.platformLevel && !canEdit(p.row)
+                ? h("span", { style: { color: "#c5c8ce", fontSize: "12px" } }, "可见可用不可改")
+                : h("div", { class: "op-cell" }, [
+                      h("div", { class: "operating-link", onClick: () => openItems(p.row) }, "条目维护"),
+                      h("div", { class: "operating-link", onClick: () => openRename(p.row) }, "改名"),
+                      h("div", { class: "operating-link text-error", onClick: () => removeDict(p.row) }, "删除")
+                  ])
+    }
+]);
+
+function canEdit(dict: DictView): boolean {
+    // 平台级行必须处在超管的平台级上下文里才可写；本校行本校管理员可写
+    return dict.platformLevel ? layer.value === "platform" && store.isSuperAdmin : !dict.platformLevel;
+}
+
+async function load() {
+    loading.value = true;
+    try {
+        own.value = (await dictApi.list(scope.value).send()) || [];
+        selectable.value = (await dictApi.selectable().send()) || [];
+    } catch (e: any) {
+        Message.error(e?.message || "字典列表加载失败");
+    } finally {
+        loading.value = false;
+    }
+}
+
+function switchLayer(next: "school" | "platform") {
+    layer.value = next;
+    load();
+}
+
+function openCreate() {
+    dictModal.visible = true;
+    dictModal.creating = true;
+    dictModal.origin = null;
+    dictModal.code = "";
+    dictModal.name = "";
+}
+
+function openRename(dict: DictView) {
+    dictModal.visible = true;
+    dictModal.creating = false;
+    dictModal.origin = dict;
+    // code 是 schema 里的引用键，建后不可改：这里只给名字
+    dictModal.code = dict.code;
+    dictModal.name = dict.name;
+}
+
+async function submitDict() {
+    const code = dictModal.code.trim();
+    const name = dictModal.name.trim();
+    if (!CODE_PATTERN.test(code)) {
+        Message.error("字典 code 仅限字母/数字/下划线（≤64 位）");
+        return;
+    }
+    if (!name) {
+        Message.error("字典名称不能为空");
+        return;
+    }
+    busy.value = true;
+    try {
+        await dictApi.save({ ...scope.value, code, name }).send();
+        Message.success(dictModal.creating ? `已创建字典 ${code}` : "名称已更新（code 不变，引用不受影响）");
+        dictModal.visible = false;
+        await load();
+    } catch (e: any) {
+        Message.error(e?.message || "保存失败");
+    } finally {
+        busy.value = false;
+    }
+}
+
+function removeDict(dict: DictView) {
+    Modal.confirm({
+        title: `删除字典 ${dict.name}`,
+        content: "软删字典。引用它的表单再次发布会因「字典无法解析」被拒；历史答卷的取值仍可原样重存。",
+        onOk: async () => {
+            try {
+                await dictApi.remove({ ...scope.value, code: dict.code, name: dict.name }).send();
+                Message.success("已删除");
+                await load();
+            } catch (e: any) {
+                Message.error(e?.message || "删除失败");
+            }
+        }
+    });
+}
+
+async function openItems(dict: DictView) {
+    // 编辑目标取最新一份（列表里的对象可能是 selectable 的平台级副本）
+    const target = own.value.find((d) => d.code === dict.code) || dict;
+    itemModal.visible = true;
+    itemModal.dict = target;
+    itemModal.newLabel = "";
+    itemModal.items = (target.items || []).map((i) => ({ ...i }));
+}
+
+function nextValue(): string {
+    return nextOptionValue(itemModal.items.map((i) => i.value), "val");
+}
+
+async function addItem() {
+    const label = itemModal.newLabel.trim();
+    const dict = itemModal.dict;
+    if (!dict) return;
+    if (!label) {
+        Message.error("条目名称不能为空");
+        return;
+    }
+    busy.value = true;
+    try {
+        const value = nextValue();
+        const created = await dictApi
+            .saveItem({ ...scope.value, dictCode: dict.code, value, label, sort: itemModal.items.length + 1 })
+            .send();
+        itemModal.items.push({ ...created });
+        itemModal.newLabel = "";
+        Message.success(`已新增条目（value=${created.value}，生成后不可变）`);
+        await load();
+    } catch (e: any) {
+        Message.error(e?.message || "新增失败");
+    } finally {
+        busy.value = false;
+    }
+}
+
+async function saveItem(item: DictItemView) {
+    const dict = itemModal.dict;
+    if (!dict) return;
+    if (!item.label.trim()) {
+        Message.error("条目名称不能为空");
+        return;
+    }
+    busy.value = true;
+    try {
+        // 只传 label/sort：value 原样带回当定位键，接口没有改 value 的通道
+        await dictApi.saveItem({ ...scope.value, dictCode: dict.code, value: item.value, label: item.label.trim(), sort: item.sort }).send();
+        Message.success(`条目 ${item.value} 已更新（value 未变）`);
+        await load();
+    } catch (e: any) {
+        Message.error(e?.message || "保存失败");
+    } finally {
+        busy.value = false;
+    }
+}
+
+async function toggleItem(item: DictItemView) {
+    const dict = itemModal.dict;
+    if (!dict) return;
+    busy.value = true;
+    try {
+        if (item.deleted) {
+            await dictApi
+                .saveItem({ ...scope.value, dictCode: dict.code, value: item.value, label: item.label, sort: item.sort })
+                .send();
+            Message.success("已恢复为可选条目");
+        } else {
+            await dictApi.removeItem({ ...scope.value, dictCode: dict.code, value: item.value, label: item.label }).send();
+            Message.success("已废弃：设计器不再给选，旧答卷该 value 仍可原样重存");
+        }
+        await load();
+        const fresh = own.value.find((d) => d.code === dict.code);
+        itemModal.items = (fresh?.items || []).map((i) => ({ ...i }));
+    } catch (e: any) {
+        Message.error(e?.message || "操作失败");
+    } finally {
+        busy.value = false;
+    }
+}
+
+onMounted(load);
 </script>
 
 <template>
-    <PageStub
-        title="字典管理"
-        stage="T6"
-        note="form_dict / form_dict_item 两级维护、条目 value 不可变、options.source=dict:{code} 引用在 T6 落地；平台级字典（sch_id=0）只在超管上下文维护（方案 §6.5）。"
-    />
+    <div class="page-wrapper yh-fill">
+        <div class="main-container">
+            <div class="toolbar">
+                <Button type="primary" icon="md-add" :disabled="layer === 'platform' && !store.isSuperAdmin"
+                    @click="openCreate">新建字典</Button>
+                <RadioGroup v-if="store.isSuperAdmin" :model-value="layer" type="button" size="small"
+                    @on-change="switchLayer">
+                    <Radio label="school">本校字典</Radio>
+                    <Radio label="platform">平台级（sch_id=0）</Radio>
+                </RadioGroup>
+                <Alert v-else type="info" class="layer-note">
+                    当前维护域：本校。平台级字典由学校可见、可用、<b>不可改</b>（方案 §4.3③b）
+                </Alert>
+                <Button icon="md-refresh" @click="load">刷新</Button>
+            </div>
+
+            <div class="table-region">
+                <Table :columns="columns" :data="rows" :loading="loading" no-data-text="还没有字典" class="link-table" />
+            </div>
+
+            <p class="foot-note">
+                设计器里字段写 <code>options.source = "dict:{code}"</code> 引用字典；引用是活引用、
+                不进版本快照，读接口下发时内联展开（契约 §2.1）。
+            </p>
+        </div>
+
+        <Modal v-model="dictModal.visible" :title="dictModal.creating ? '新建字典' : '字典改名'" :mask-closable="false"
+            :width="480">
+            <Form :label-width="90">
+                <FormItem label="code" required>
+                    <Input v-model="dictModal.code" :disabled="!dictModal.creating"
+                        placeholder="字母/数字/下划线，≤64，建后不可改" />
+                    <p class="tip">code 是 schema 里的引用键，改 code 等于换字典</p>
+                </FormItem>
+                <FormItem label="名称" required>
+                    <Input v-model="dictModal.name" :maxlength="MAX_NAME_LEN" placeholder="如：民族" />
+                </FormItem>
+            </Form>
+            <template #footer>
+                <Button @click="dictModal.visible = false">取消</Button>
+                <Button type="primary" :loading="busy" @click="submitDict">保存</Button>
+            </template>
+        </Modal>
+
+        <Modal v-model="itemModal.visible" :title="`条目维护｜${itemModal.dict?.name || ''}`" :mask-closable="false"
+            :width="720">
+            <Alert type="info" show-icon class="mb10">
+                value 生成即不可变（答案存它）；只有名称与排序可改。废弃=软删，旧答卷照旧可读可重存。
+            </Alert>
+            <div class="item-head">
+                <span class="col-value">value</span>
+                <span class="col-label">名称（可改）</span>
+                <span class="col-sort">排序</span>
+                <span class="col-op">操作</span>
+            </div>
+            <div v-for="item in itemModal.items" :key="item.value" class="item-row" :class="{ dropped: item.deleted }">
+                <code class="col-value">{{ item.value }}</code>
+                <Input v-model="item.label" size="small" :maxlength="MAX_LABEL_LEN" class="col-label" />
+                <InputNumber v-model="item.sort" size="small" :min="0" class="col-sort" controls-out />
+                <span class="col-op">
+                    <Button size="small" @click="saveItem(item)">保存</Button>
+                    <Button size="small" type="text" :class="item.deleted ? '' : 'text-error'"
+                        @click="toggleItem(item)">
+                        {{ item.deleted ? "恢复" : "废弃" }}
+                    </Button>
+                    <Tag v-if="item.deleted" color="default" size="small">已废弃</Tag>
+                </span>
+            </div>
+            <div class="item-row add-row">
+                <code class="col-value">{{ nextValue() }}</code>
+                <Input v-model="itemModal.newLabel" size="small" placeholder="新条目名称，如 维吾尔族" class="col-label"
+                    @on-enter="addItem" />
+                <span class="col-sort"></span>
+                <span class="col-op">
+                    <Button size="small" type="primary" :loading="busy" icon="md-add" @click="addItem">新增条目</Button>
+                </span>
+            </div>
+            <p class="tip">
+                上一行的 value 是新增时将生成的值（{{ itemModal.dict?.code }} 现有
+                {{ itemModal.items.length }} 条，含已废弃）；生成后它就固定了。
+            </p>
+            <template #footer>
+                <Button @click="itemModal.visible = false">关闭</Button>
+            </template>
+        </Modal>
+    </div>
 </template>
+
+<style scoped>
+.toolbar {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+    flex-wrap: wrap;
+}
+.layer-note {
+    margin: 0;
+}
+.table-region {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+}
+.foot-note {
+    color: #808695;
+    font-size: 12px;
+    margin-top: 10px;
+    line-height: 1.7;
+}
+.item-head,
+.item-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+.item-head {
+    color: #808695;
+    font-size: 12px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid #eff0f3;
+}
+.col-value {
+    width: 120px;
+    font-family: Menlo, Consolas, monospace;
+    font-size: 12px;
+    background: #f3f4f6;
+    border-radius: 3px;
+    padding: 3px 6px;
+    flex-shrink: 0;
+}
+.col-label {
+    flex: 1;
+}
+.col-sort {
+    width: 110px;
+    flex-shrink: 0;
+}
+.col-op {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+}
+.item-row.dropped .col-value {
+    color: #c5c8ce;
+    text-decoration: line-through;
+}
+.add-row {
+    border-top: 1px dashed #eff0f3;
+    padding-top: 10px;
+}
+.tip {
+    color: #808695;
+    font-size: 12px;
+    line-height: 1.7;
+}
+.mb10 {
+    margin-bottom: 10px;
+}
+</style>

src/views/admin/FormDesigner.vue

@@ -0,0 +1,479 @@
+<script setup lang="ts">
+/**
+ * 表单设计器（全屏三栏：控件面板 / 画布 / 属性面板 + 版本与发布流程）。
+ *
+ * 版本语义按 P20 落到 UI 上，这是本页最容易做错的地方：
+ * - **保存 ≠ 发布**。保存只在草稿行上直改，或为已发布表单开一条新的草稿行，
+ *   头表的 status/current_version 一律不动——升版窗口期旧版仍可填（契约 §5 钉版）。
+ * - 所以头部必须同时说清「当前发布 v几」和「待发布草稿 v几」，
+ *   并且版本下拉里选到已发布行时整页转只读（行不可变，V7）。
+ * - 发布才把草稿行钉成版本、推指针，并留下 change_log。
+ *
+ * 编辑权边界：已发布过的字段 key 与 type 锁死（改 key=换字段、同 key 不换 type 是后端红线），
+ * 面板里只给「删旧增新」这条路；code 发布后同样不可改（改 code=换表单）。
+ */
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { Message, Modal } from "view-ui-plus";
+import ComponentLibrary from "@/components/designer/ComponentLibrary.vue";
+import DesignerCanvas from "@/components/designer/DesignerCanvas.vue";
+import FieldPropPanel from "@/components/designer/FieldPropPanel.vue";
+import FormConfigModal from "@/components/form/FormConfigModal.vue";
+import { formApi } from "@/api/module/form";
+import { dictApi } from "@/api/module/dict";
+import type { DictView, FormView, VersionView } from "@/types/form";
+import type { DesignField, DesignGroup } from "@/types/formSchema";
+import { MAX_CHANGE_LOG_LEN, MAX_NAME_LEN } from "@/types/formSchema";
+import {
+    buildSchemaJson,
+    cloneField,
+    collectUsedKeys,
+    countFields,
+    defaultGroup,
+    makeNextKey,
+    restoreSchema,
+    typesByKeys,
+    validateDesign
+} from "@/utils/designer/schema";
+
+const route = useRoute();
+const router = useRouter();
+
+const uuid = computed(() => String(route.query.uuid || "").trim());
+const form = ref<FormView | null>(null);
+const versions = ref<VersionView[]>([]);
+const groups = ref<DesignGroup[]>([]);
+const dicts = ref<DictView[]>([]);
+const selected = ref<{ gi: number; fi: number } | null>(null);
+/** 当前画布装载的版本行号 */
+const viewing = ref<number | null>(null);
+const viewingPublished = ref(false);
+/** 当前发布版本行原文（锁 key/type + 跨版本身份校验都按它判） */
+const publishedSchemaJson = ref<string | null>(null);
+const nameDraft = ref("");
+const codeDraft = ref("");
+const saving = ref(false);
+const publishing = ref(false);
+const showErrors = ref(false);
+/** 装载时的 schema 原文基线：dirty 就是「与它不一致」，不用深 watcher 追 */
+const baseline = ref("");
+const configRef = ref<InstanceType<typeof FormConfigModal> | null>(null);
+const publishModal = reactive({ visible: false, changeLog: "" });
+
+const locked = computed(() => viewingPublished.value);
+const usedKeys = computed(() => collectUsedKeys(groups.value));
+const publishedTypes = computed(() => typesByKeys(publishedSchemaJson.value));
+/** 画布要知道哪些 key 是发布过的（卡片上的身份标记） */
+const publishedKeySet = computed(() => new Set(publishedTypes.value.keys()));
+const codeEditable = computed(() => !!form.value && form.value.currentVersion === null);
+const selectedField = computed<DesignField | null>(() => {
+    const s = selected.value;
+    if (!s) return null;
+    return groups.value[s.gi]?.fields[s.fi] ?? null;
+});
+const errors = computed(() =>
+    validateDesign(groups.value, {
+        name: nameDraft.value,
+        code: codeEditable.value ? codeDraft.value : undefined,
+        publishedSchemaJson: publishedSchemaJson.value
+    })
+);
+const visibleErrors = computed(() => (showErrors.value ? errors.value : []));
+const versionOptions = computed(() =>
+    versions.value.map((v) => ({
+        value: v.version,
+        label: `v${v.version} ${v.published ? "已发布" : "待发布草稿"}`
+    }))
+);
+
+const dirty = computed(() => baseline.value !== buildSchemaJson(groups.value));
+
+async function reloadHead() {
+    if (!uuid.value) return;
+    form.value = await formApi.get(uuid.value).send();
+    versions.value = (await formApi.versions(uuid.value).send()) || [];
+    nameDraft.value = form.value?.name || "";
+    codeDraft.value = form.value?.code || "";
+    if (form.value?.currentVersion != null) {
+        const row = await formApi.version(uuid.value, form.value.currentVersion).send();
+        publishedSchemaJson.value = row?.schemaJson || null;
+    } else {
+        publishedSchemaJson.value = null;
+    }
+}
+
+/** 装载某个版本行：已发布行只读（V7 逐字节冻结），草稿行可编辑 */
+async function loadVersion(version: number) {
+    if (!uuid.value || typeof version !== "number" || !Number.isFinite(version)) return;
+    if (loadingRow || version === viewing.value) return;
+    loadingRow = true;
+    try {
+        const row = await formApi.version(uuid.value, version).send();
+        const restored = restoreSchema(row?.schemaJson);
+        groups.value = restored.length ? restored : [defaultGroup(new Set<string>(), 0)];
+        // 基线取「用同一个序列化函数再算一遍」，不取库里的原文：
+        // 原文的属性顺序可能不同，直接比会把刚装载的版本误标成「未保存」
+        baseline.value = buildSchemaJson(groups.value);
+        viewing.value = version;
+        viewingPublished.value = !!row?.published;
+        selected.value = null;
+        showErrors.value = false;
+    } finally {
+        loadingRow = false;
+    }
+}
+
+/**
+ * 版本下拉的选择入口。
+ * iView 的 Select 在挂载/modelValue 变化时可能回吐一次 on-change（值还不一定是合法版本），
+ * 不加这道闸就是「渲染→emit→请求→渲染」的死循环（浏览器标签会被自己打满）。
+ */
+function onVersionPick(next: unknown) {
+    const version = Number(next);
+    if (!Number.isInteger(version) || version === viewing.value) return;
+    loadVersion(version);
+}
+
+let loadingRow = false;
+
+function defaultTargetVersion(f: FormView | null): number | null {
+    if (!f) return null;
+    // 草稿优先：有草稿就编辑草稿，没有草稿则装载当前发布版（第一次保存时开新草稿行）
+    return f.draftVersion ?? f.currentVersion ?? (versions.value[versions.value.length - 1]?.version ?? null);
+}
+
+function addGroup() {
+    groups.value.push(defaultGroup(usedKeys.value, groups.value.length));
+}
+
+function removeGroup(gi: number) {
+    const g = groups.value[gi];
+    if (!g) return;
+    const content = g.fields.length
+        ? `分组「${g.label || g.key}」内还有 ${g.fields.length} 个字段，删除后字段一并移除（已发布字段的历史答卷仍可按 key 回退检索）。`
+        : "确定删除该分组吗？";
+    Modal.confirm({
+        title: "删除分组确认",
+        content,
+        onOk: () => {
+            groups.value.splice(gi, 1);
+            selected.value = null;
+        }
+    });
+}
+
+function addField(field: DesignField) {
+    if (!groups.value.length) addGroup();
+    const gi = selected.value?.gi ?? groups.value.length - 1;
+    const group = groups.value[gi];
+    group.fields.push(field);
+    select(gi, group.fields.length - 1);
+}
+
+function select(gi: number, fi: number) {
+    const g = groups.value[gi];
+    if (!g || !g.fields[fi]) {
+        selected.value = null;
+        return;
+    }
+    selected.value = { gi, fi };
+}
+
+function copyField(gi: number, fi: number) {
+    const src = groups.value[gi]?.fields[fi];
+    if (!src) return;
+    const copy = cloneField(src);
+    copy.key = makeNextKey(usedKeys.value)(src.type);
+    groups.value[gi].fields.splice(fi + 1, 0, copy);
+    select(gi, fi + 1);
+}
+
+function removeField(gi: number, fi: number) {
+    const f = groups.value[gi]?.fields[fi];
+    if (!f) return;
+    const history = publishedTypes.value.has(f.key)
+        ? `「${f.key}」已发布过：删除后历史答卷该字段仍可读、按它筛选仍有效（V8），但新表单不再有它。`
+        : "确定删除该字段吗？";
+    Modal.confirm({ title: "删除字段确认", content: history, onOk: () => {
+        groups.value[gi].fields.splice(fi, 1);
+        selected.value = null;
+    } });
+}
+
+async function save(silent = false): Promise<boolean> {
+    if (!uuid.value || !form.value) return false;
+    if (locked.value) {
+        Message.warning("已发布版本行只读；要改版请在版本下拉切回待发布草稿");
+        return false;
+    }
+    showErrors.value = true;
+    if (errors.value.length) {
+        if (!silent) Message.error(errors.value[0]);
+        return false;
+    }
+    saving.value = true;
+    try {
+        const res = await formApi
+            .save({
+                uuid: uuid.value,
+                name: nameDraft.value.trim(),
+                code: codeEditable.value ? codeDraft.value.trim() : undefined,
+                schemaJson: buildSchemaJson(groups.value)
+            })
+            .send();
+        form.value = res;
+        await reloadHead();
+        baseline.value = buildSchemaJson(groups.value);
+        if (!silent) {
+            Message.success(
+                res.currentVersion === null
+                    ? "已保存为草稿 v" + res.draftVersion + "（发布后填报入口才生效）"
+                    : `已保存为待发布草稿 v${res.draftVersion}；当前发布仍是 v${res.currentVersion}，旧版仍可填`
+            );
+        }
+        return true;
+    } catch (e: any) {
+        Message.error(e?.message || "保存失败");
+        return false;
+    } finally {
+        saving.value = false;
+    }
+}
+
+function openPublish() {
+    if (!form.value) return;
+    if (!form.value.draftVersion && !dirty.value) {
+        Message.warning("没有待发布的草稿版本：已发布表单要先保存改动才会开新草稿");
+        return;
+    }
+    showErrors.value = true;
+    if (errors.value.length) {
+        Message.error(errors.value[0]);
+        return;
+    }
+    publishModal.changeLog = "";
+    publishModal.visible = true;
+}
+
+async function confirmPublish() {
+    if (!uuid.value) return;
+    publishing.value = true;
+    try {
+        // 发布走的是库里那条草稿行，先把画布上的改动落盘，避免「发的是旧草稿」
+        if (dirty.value && !(await save(true))) return;
+        if (!form.value?.draftVersion) {
+            Message.warning("库里没有待发布的草稿版本，请先保存改动");
+            return;
+        }
+        const log = publishModal.changeLog.trim().slice(0, MAX_CHANGE_LOG_LEN);
+        const res = await formApi.publish(uuid.value, log || undefined).send();
+        form.value = res;
+        await reloadHead();
+        publishModal.visible = false;
+        Message.success(`已发布 v${res.currentVersion}，填报入口按该版本寻址`);
+        // 发布后草稿行被钉成版本，画布切到新发布版（继续改就再开一条草稿）
+        await loadVersion(res.currentVersion ?? viewing.value ?? 1);
+    } catch (e: any) {
+        Message.error(e?.message || "发布失败");
+    } finally {
+        publishing.value = false;
+    }
+}
+
+async function copyAs() {
+    const f = form.value;
+    if (!f) return;
+    Modal.confirm({
+        title: "另存为副本",
+        content: `基于当前装载的 v${viewing.value} 复制一张新表单（新 code、新 uuid、version 从 1 起，字典引用随行），原表单与其历史数据零改动。`,
+        onOk: async () => {
+            const code = `${f.code}_copy`;
+            try {
+                const res = await formApi.copy({ uuid: f.formUuid, code, name: `${f.name}（副本）` }).send();
+                Message.success(`副本已创建：${res.code}`);
+                router.push({ path: "/admin/forms/designer", query: { uuid: res.formUuid } });
+            } catch (e: any) {
+                Message.error(e?.message || "副本创建失败");
+            }
+        }
+    });
+}
+
+function onConfigSaved(res: FormView) {
+    form.value = res;
+}
+
+async function boot() {
+    if (!uuid.value) {
+        Message.warning("请从表单列表进入设计器");
+        router.replace("/admin/forms");
+        return;
+    }
+    try {
+        dicts.value = (await dictApi.selectable().send()) || [];
+        await reloadHead();
+        const target = defaultTargetVersion(form.value);
+        if (target != null) await loadVersion(target);
+    } catch (e: any) {
+        Message.error(e?.message || "表单加载失败");
+        router.replace("/admin/forms");
+    }
+}
+
+onMounted(boot);
+</script>
+
+<template>
+    <div class="designer-page">
+        <div class="designer-head">
+            <div class="head-left">
+                <Button icon="ios-arrow-back" @click="router.push('/admin/forms')">返回列表</Button>
+                <Input v-model="nameDraft" placeholder="表单名称" :maxlength="MAX_NAME_LEN" style="width: 200px" />
+                <Tooltip max-width="260" placement="bottom"
+                    content="code 发布后不可改（改 code=换表单）；仅限字母/数字/下划线/中划线 ≤64">
+                    <Input v-model="codeDraft" :disabled="!codeEditable" placeholder="表单 code" style="width: 170px" />
+                </Tooltip>
+                <Select :model-value="viewing" style="width: 190px" @on-change="onVersionPick">
+                    <Option v-for="v in versionOptions" :key="v.value" :value="v.value" :label="v.label" />
+                </Select>
+                <Tag v-if="form && form.currentVersion !== null" color="success">当前发布 v{{ form.currentVersion }}</Tag>
+                <Tag v-if="form && form.draftVersion" color="warning">待发布草稿 v{{ form.draftVersion }}</Tag>
+                <Tag v-if="form && form.currentVersion === null && form.draftVersion" color="default">从未发布</Tag>
+                <span v-if="form" class="head-meta">
+                    {{ form.code }}｜{{ form.appCode }}｜{{ countFields(groups) }} 个字段
+                    <span v-if="dirty" class="head-dirty">未保存</span>
+                </span>
+            </div>
+            <div class="head-right">
+                <Button @click="configRef?.open()">表单配置</Button>
+                <Button @click="copyAs">另存为副本</Button>
+                <Button :loading="saving" :disabled="locked" @click="save()">保存草稿</Button>
+                <Button type="primary" :disabled="locked" @click="openPublish">发布</Button>
+            </div>
+        </div>
+
+        <Alert v-if="visibleErrors.length" type="error" show-icon class="head-errors">
+            <div v-for="(err, i) in visibleErrors" :key="i">{{ err }}</div>
+        </Alert>
+        <Alert v-if="locked" type="warning" show-icon class="head-errors">
+            正在查看已发布版本 v{{ viewing }}：行内容逐字节冻结（V7），画布只读。要改版请切到待发布草稿。
+        </Alert>
+
+        <div class="designer-body">
+            <ComponentLibrary :next-key="makeNextKey(usedKeys)" :disabled="locked" @add="addField" />
+            <DesignerCanvas
+                :groups="groups"
+                :selected="selected"
+                :disabled="locked"
+                :dicts="dicts"
+                :published-keys="publishedKeySet"
+                @select="select"
+                @copy="copyField"
+                @remove="removeField"
+                @add="addField"
+                @add-group="addGroup"
+                @remove-group="removeGroup"
+            />
+            <FieldPropPanel
+                v-if="selectedField"
+                :key="selectedField._uid"
+                :field="selectedField"
+                :dicts="dicts"
+                :used-keys="usedKeys"
+                :published-types="publishedTypes"
+                :disabled="locked"
+            />
+            <aside v-else class="d-prop-empty">
+                <Icon type="ios-settings" />
+                <p>选中画布中的字段后在这里改属性</p>
+                <p class="d-prop-sub">
+                    选项类控件改名称不会影响已生成的 value（value 只读），<br />
+                    引用字典的字段候选项由字典侧决定，不进版本快照
+                </p>
+            </aside>
+        </div>
+
+        <FormConfigModal ref="configRef" :form="form" @saved="onConfigSaved" />
+
+        <Modal v-model="publishModal.visible" title="发布新版本" :mask-closable="false">
+            <p class="publish-tip">
+                发布把待发布草稿 v{{ form?.draftVersion ?? "?" }} 钉成不可变版本行并推当前发布指针；<br />
+                历史答卷仍按各自钉住的版本读取，升版窗口期的在途提交按旧版安全落地。
+            </p>
+            <Input v-model="publishModal.changeLog" type="textarea" :rows="3" :maxlength="MAX_CHANGE_LOG_LEN"
+                placeholder="变更说明（可空，写入版本行 change_log）" />
+            <template #footer>
+                <Button @click="publishModal.visible = false">取消</Button>
+                <Button type="primary" :loading="publishing" @click="confirmPublish">确认发布</Button>
+            </template>
+        </Modal>
+    </div>
+</template>
+
+<style scoped>
+.designer-page {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: #f2f4f8;
+}
+.designer-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 10px 14px;
+    background: #fff;
+    border-bottom: 1px solid #e8eaec;
+    flex-shrink: 0;
+}
+.head-left,
+.head-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+.head-meta {
+    color: #808695;
+    font-size: 12px;
+}
+.head-dirty {
+    color: #ff9900;
+    margin-left: 6px;
+}
+.head-errors {
+    border-radius: 0;
+    margin: 0;
+}
+.designer-body {
+    flex: 1;
+    display: flex;
+    min-height: 0;
+    overflow: hidden;
+}
+.d-prop-empty {
+    width: 320px;
+    flex-shrink: 0;
+    border-left: 1px solid #e8eaec;
+    background: #fff;
+    color: #808695;
+    text-align: center;
+    padding: 40px 18px;
+}
+.d-prop-empty :deep(.ivu-icon) {
+    font-size: 28px;
+    color: #c5c8ce;
+}
+.d-prop-sub {
+    font-size: 12px;
+    line-height: 1.8;
+    margin-top: 12px;
+}
+.publish-tip {
+    color: #515a6e;
+    font-size: 13px;
+    line-height: 1.8;
+    margin-bottom: 10px;
+}
+</style>

src/views/admin/Forms.vue

@@ -1,11 +1,373 @@
 <script setup lang="ts">
-import PageStub from "@/components/PageStub.vue";
+/**
+ * 表单列表（/admin/forms，替换 T5 占位页）。
+ *
+ * 两条口径写明白，避免接手的人以为是「后端分页列表」：
+ * - `/api/form/admin/list` 返回本校（+ 目标域）全量表单头表，**没有服务端分页参数**，
+ *   所以这里用 `.table-region` 实测高度喂固定表头、关键字/状态在前端过滤当页数据；
+ *   答卷数据面的两段式列表与 keyset 分页是 T8 的事，两者不是一回事。
+ * - 每行同时呈现**两根指针**：`当前发布 v{n}` 与 `待发布草稿 v{m}`（P20）——
+ *   只写 status 会让人以为「保存了就是改了线上」。
+ *
+ * 操作列形态按 P51 定 text 文字链（同族 center 应用一致），超出 2 个自动收进「更多」。
+ */
+import { computed, onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import { Message, Modal } from "view-ui-plus";
+import { formApi } from "@/api/module/form";
+import { actionColumn } from "@/utils/tableActions";
+import { useElementHeight } from "@/utils/hook/useElementHeight";
+import FormConfigModal from "@/components/form/FormConfigModal.vue";
+import type { FormView } from "@/types/form";
+import { AUDIENCE, FORM_STATUS } from "@/types/form";
+import { CODE_PATTERN, MAX_NAME_LEN } from "@/types/formSchema";
+
+const router = useRouter();
+const regionRef = ref<HTMLElement | null>(null);
+const regionH = useElementHeight(regionRef);
+
+const list = ref<FormView[]>([]);
+const loading = ref(false);
+const keyword = ref("");
+const statusFilter = ref<number | string>("");
+
+const createModal = ref(false);
+const createDraft = ref({ code: "", name: "", appCode: "form-center" });
+const creating = ref(false);
+const copyModal = ref({ visible: false, source: null as FormView | null, code: "", name: "" });
+const copying = ref(false);
+/** 配置面板就地开在列表页（不进设计器也能改表单级配置，它不进版本快照） */
+const configRef = ref<InstanceType<typeof FormConfigModal> | null>(null);
+const activeForm = ref<FormView | null>(null);
+
+const filtered = computed(() => {
+    const kw = keyword.value.trim().toLowerCase();
+    return list.value
+        .filter((f) => statusFilter.value === "" || f.status === Number(statusFilter.value))
+        .filter((f) => !kw || f.name.toLowerCase().includes(kw) || f.code.toLowerCase().includes(kw));
+});
+
+const columns = computed(() => [
+    {
+        title: "表单名称",
+        key: "name",
+        minWidth: 180,
+        render: (h2: any, p: any) =>
+            h2("div", { class: "cell-name" }, [
+                h2("span", p.row.name),
+                p.row.appCode && p.row.appCode !== "form-center"
+                    ? h2("span", { class: "cell-app" }, `快应用 ${p.row.appCode}`)
+                    : null
+            ])
+    },
+    { title: "code", key: "code", minWidth: 150 },
+    {
+        title: "状态",
+        key: "status",
+        width: 200,
+        render: (h2: any, p: any) => {
+            const f: FormView = p.row;
+            const tag =
+                f.status === FORM_STATUS.DRAFT
+                    ? h2("Tag", { color: "default" }, () => "草稿")
+                    : f.status === FORM_STATUS.PUBLISHED
+                      ? h2("Tag", { color: "success" }, () => `已发布 v${f.currentVersion}`)
+                      : h2("Tag", { color: "error" }, () => `已停用 v${f.currentVersion}`);
+            return h2("div", { class: "cell-status" }, [
+                tag,
+                f.draftVersion ? h2("Tag", { color: "warning" }, () => `待发布草稿 v${f.draftVersion}`) : null
+            ]);
+        }
+    },
+    {
+        title: "面向",
+        key: "audience",
+        width: 90,
+        render: (h2: any, p: any) => h2("span", p.row.audience === AUDIENCE.TEACHER ? "面向教师" : "面向学生")
+    },
+    {
+        title: "截止",
+        key: "deadline",
+        width: 130,
+        render: (h2: any, p: any) => h2("span", p.row.deadline ? String(p.row.deadline).slice(0, 10) : "不限")
+    },
+    {
+        title: "限次/报名号",
+        key: "fillLimit",
+        width: 130,
+        render: (h2: any, p: any) =>
+            h2("span", `${p.row.fillLimit ? "限一次" : "不限次"}｜${p.row.answerNoEnabled ? "有报名号" : "无报名号"}`)
+    },
+    actionColumn(
+        [
+            { key: "design", label: "设计", on: (row: FormView) => goDesigner(row) },
+            { key: "config", label: "配置", on: (row: FormView) => openConfig(row) },
+            {
+                key: "publish",
+                label: "发布",
+                when: (row: FormView) => !!row.draftVersion,
+                on: (row: FormView) => publish(row)
+            },
+            {
+                key: "disable",
+                label: "停用",
+                when: (row: FormView) => row.status === FORM_STATUS.PUBLISHED,
+                on: (row: FormView) => lifecycle(row, "disable")
+            },
+            {
+                key: "enable",
+                label: "恢复",
+                when: (row: FormView) => row.status === FORM_STATUS.DISABLED,
+                on: (row: FormView) => lifecycle(row, "enable")
+            },
+            { key: "copy", label: "另存为副本", on: (row: FormView) => openCopy(row) },
+            { key: "delete", label: "删除", danger: true, on: (row: FormView) => softDelete(row) }
+        ],
+        { mode: "text", maxInline: 2 }
+    )
+]);
+
+function goDesigner(row: FormView) {
+    router.push({ path: "/admin/forms/designer", query: { uuid: row.formUuid } });
+}
+
+function openConfig(row: FormView) {
+    activeForm.value = row;
+    configRef.value?.open();
+}
+
+function onConfigSaved(res: FormView) {
+    activeForm.value = res;
+    load();
+}
+
+async function load() {
+    loading.value = true;
+    try {
+        list.value = (await formApi.list().send()) || [];
+    } catch (e: any) {
+        Message.error(e?.message || "表单列表加载失败");
+    } finally {
+        loading.value = false;
+    }
+}
+
+const createError = computed(() => {
+    const c = createDraft.value.code.trim();
+    if (!c) return "code 不能为空";
+    if (!CODE_PATTERN.test(c)) return "code 仅限字母/数字/下划线/中划线，≤64 位";
+    if (!createDraft.value.name.trim()) return "名称不能为空";
+    return "";
+});
+
+async function submitCreate() {
+    if (createError.value) {
+        Message.error(createError.value);
+        return;
+    }
+    creating.value = true;
+    try {
+        const res = await formApi
+            .create({
+                code: createDraft.value.code.trim(),
+                name: createDraft.value.name.trim(),
+                appCode: createDraft.value.appCode.trim() || "form-center"
+            })
+            .send();
+        Message.success(`已创建草稿：${res.code}`);
+        createModal.value = false;
+        createDraft.value = { code: "", name: "", appCode: "form-center" };
+        goDesigner(res);
+        await load();
+    } catch (e: any) {
+        Message.error(e?.message || "创建失败");
+    } finally {
+        creating.value = false;
+    }
+}
+
+function publish(row: FormView) {
+    Modal.confirm({
+        title: `发布 ${row.name}`,
+        content: `把待发布草稿 v${row.draftVersion} 钉成不可变版本并推当前发布指针；当前发布 v${row.currentVersion ?? "无"} 在升版窗口期仍可被在途提交按旧版落地。`,
+        onOk: async () => {
+            try {
+                const res = await formApi.publish(row.formUuid).send();
+                Message.success(`已发布 v${res.currentVersion}`);
+                await load();
+            } catch (e: any) {
+                Message.error(e?.message || "发布失败");
+            }
+        }
+    });
+}
+
+function lifecycle(row: FormView, action: "disable" | "enable") {
+    Modal.confirm({
+        title: action === "disable" ? `停用 ${row.name}` : `恢复 ${row.name}`,
+        content:
+            action === "disable"
+                ? "停用只断填报入口，数据管理仍可读可导（方案 §5.4）。"
+                : "恢复=重新发布当前版本，不产生新版本行；草稿请走发布。",
+        onOk: async () => {
+            try {
+                const res = action === "disable" ? await formApi.disable(row.formUuid).send() : await formApi.enable(row.formUuid).send();
+                Message.success(action === "disable" ? "已停用" : `已恢复 v${res.currentVersion}`);
+                await load();
+            } catch (e: any) {
+                Message.error(e?.message || "操作失败");
+            }
+        }
+    });
+}
+
+function openCopy(row: FormView) {
+    copyModal.value = { visible: true, source: row, code: `${row.code}_copy`, name: `${row.name}（副本）` };
+}
+
+async function submitCopy() {
+    const m = copyModal.value;
+    if (!m.source) return;
+    if (!CODE_PATTERN.test(m.code.trim())) {
+        Message.error("副本 code 仅限字母/数字/下划线/中划线，≤64 位");
+        return;
+    }
+    copying.value = true;
+    try {
+        const res = await formApi
+            .copy({ uuid: m.source.formUuid, code: m.code.trim(), name: m.name.trim() })
+            .send();
+        Message.success(`副本已创建：${res.code}（v${res.draftVersion}，源表单零改动）`);
+        m.visible = false;
+        await load();
+    } catch (e: any) {
+        Message.error(e?.message || "副本创建失败");
+    } finally {
+        copying.value = false;
+    }
+}
+
+function softDelete(row: FormView) {
+    Modal.confirm({
+        title: `删除 ${row.name}`,
+        content: "只做软删：填报入口消失，历史答卷与索引行保留，且系统没有物理删除接口（方案 §5.4）。",
+        onOk: async () => {
+            try {
+                await formApi.softDelete(row.formUuid).send();
+                Message.success("已删除（软删）");
+                await load();
+            } catch (e: any) {
+                Message.error(e?.message || "删除失败");
+            }
+        }
+    });
+}
+
+onMounted(load);
 </script>
 
 <template>
-    <PageStub
-        title="表单设计"
-        stage="T6"
-        note="设计器三件套（14 类控件面板 + 属性面板 + 表单级配置）、发布/升版流程、另存为副本在 T6 落地。"
-    />
+    <div class="page-wrapper yh-fill">
+        <div class="main-container">
+            <div class="toolbar">
+                <Button type="primary" icon="md-add" @click="createModal = true">新建表单</Button>
+                <Input v-model="keyword" search placeholder="按名称或 code 搜索" style="width: 220px" clearable />
+                <Select v-model="statusFilter" style="width: 150px" placeholder="状态">
+                    <Option value="">全部状态</Option>
+                    <Option :value="0">草稿</Option>
+                    <Option :value="1">已发布</Option>
+                    <Option :value="2">停用</Option>
+                </Select>
+                <Button icon="md-refresh" @click="load">刷新</Button>
+                <span class="toolbar-note">
+                    列表显示 {{ filtered.length }} / {{ list.length }} 条（后端一次给全量头表，筛选在前端）
+                </span>
+            </div>
+
+            <div class="table-region" ref="regionRef">
+                <Table :columns="columns" :data="filtered" :height="regionH || undefined" :loading="loading"
+                    no-data-text="还没有表单，点「新建表单」开始" class="link-table" />
+            </div>
+        </div>
+
+        <Modal v-model="createModal" title="新建表单" :mask-closable="false" :width="520">
+            <Form :label-width="90">
+                <FormItem label="表单名称" required>
+                    <Input v-model="createDraft.name" :maxlength="MAX_NAME_LEN" placeholder="如：三好学生申报" />
+                </FormItem>
+                <FormItem label="表单 code" required>
+                    <Input v-model="createDraft.code" placeholder="字母/数字/下划线/中划线，≤64" />
+                    <div class="form-tip">
+                        入口与分享地址按 code 寻址（/form-center/f/{code}）；发布后不可改，改 code=换表单
+                    </div>
+                </FormItem>
+                <FormItem label="归属应用">
+                    <Input v-model="createDraft.appCode" placeholder="form-center" />
+                    <div class="form-tip">中心表单留 form-center；快应用表单挂该快应用的 app_code</div>
+                </FormItem>
+            </Form>
+            <Alert v-if="createError" type="warning" show-icon class="form-tip">{{ createError }}</Alert>
+            <template #footer>
+                <Button @click="createModal = false">取消</Button>
+                <Button type="primary" :loading="creating" :disabled="!!createError" @click="submitCreate">
+                    创建并进设计器
+                </Button>
+            </template>
+        </Modal>
+
+        <Modal v-model="copyModal.visible" title="另存为副本" :mask-closable="false" :width="520">
+            <p class="form-tip">
+                副本=新 code + 新 uuid + version 从 1 起，schema 深拷贝、字典引用随行；<br />
+                源表单与其历史答卷零改动（V41）。表单级配置随副本，但**不继承旧截止时间**。
+            </p>
+            <Form :label-width="90">
+                <FormItem label="副本名称" required>
+                    <Input v-model="copyModal.name" :maxlength="MAX_NAME_LEN" />
+                </FormItem>
+                <FormItem label="副本 code" required>
+                    <Input v-model="copyModal.code" placeholder="字母/数字/下划线/中划线，≤64" />
+                </FormItem>
+            </Form>
+            <template #footer>
+                <Button @click="copyModal.visible = false">取消</Button>
+                <Button type="primary" :loading="copying" @click="submitCopy">创建副本</Button>
+            </template>
+        </Modal>
+
+        <FormConfigModal ref="configRef" :form="activeForm" @saved="onConfigSaved" />
+    </div>
 </template>
+
+<style scoped>
+.toolbar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 12px;
+    flex-wrap: wrap;
+}
+.toolbar-note {
+    color: #808695;
+    font-size: 12px;
+}
+.form-tip {
+    color: #808695;
+    font-size: 12px;
+    line-height: 1.7;
+    margin-top: 4px;
+}
+.cell-name {
+    display: flex;
+    flex-direction: column;
+}
+.cell-app {
+    color: #808695;
+    font-size: 12px;
+}
+.cell-status {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    flex-wrap: wrap;
+}
+</style>

src/views/admin/Stats.vue

@@ -1,11 +1,298 @@
 <script setup lang="ts">
-import PageStub from "@/components/PageStub.vue";
+/**
+ * 统计页 /admin/stats（T8 落地，替换 T5 占位）。
+ *
+ * 三条纪律：
+ * 1. **前端零聚合**（V11 前端半句）：总数 / 按状态 / 按字段分组三个数都直接来自
+ *    `POST /api/form/admin/data/stats`，本页不含任何 `reduce`/`filter(...).length`/`groupBy`。
+ *    页面只负责把后端给的桶画成图——一旦前端自己数一遍，就会出现"列表和统计对不上"的第二套口径。
+ * 2. **不缓存、不限定 scope**：短 TTL 缓存由后端管（键含范围签名，仅升版失效——铁律④）；
+ *    scope 也由后端按契约 §8 矩阵解析。响应里的 `cached` 只用来把"这是缓存值"讲清楚，
+ *    前端既不自己缓存，也不传范围参数（传了就是越权面）。
+ * 3. **分组候选 = 筛选候选取 searchable 字段**（同一个 `filterFields` 端点形状，后端已排除附件类，P28）——
+ *    分组阈值与筛选阈值是同一份"有算子的 searchable 字段"，不另造一份候选。
+ *
+ * 快应用上下文复用本组件：传 `context="app"` + `app-code` + `codes`（同 Data.vue 的取 uuid 路径）。
+ */
+import { computed, onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { Message } from "view-ui-plus";
+import { useFormCandidates } from "@/utils/hook/useFormCandidates";
+import { dataApi } from "@/api/module/data";
+import { scopeLabel, type CountItem, type FieldGroups, type FilterField, type StatsView } from "@/types/data";
+
+const props = withDefaults(
+    defineProps<{
+        context?: "center" | "app";
+        appCode?: string;
+        codes?: string[];
+        /** 被宿主页面内嵌（快应用上下文）时置 true：不套 `.page-wrapper > .main-container` */
+        embedded?: boolean;
+    }>(),
+    { context: "center", appCode: "", codes: () => [], embedded: false }
+);
+
+const route = useRoute();
+
+const { candidates, candidateError, formUuid, loadCandidates, selectForm } = useFormCandidates(
+    () => props.context,
+    () => props.appCode,
+    () => props.codes
+);
+
+/** 分组候选：与筛选候选同一个端点（searchable 且有算子；附件类不出现） */
+const groupFields = ref<FilterField[]>([]);
+const groupByField = ref("");
+const stats = ref<StatsView | null>(null);
+const loading = ref(false);
+const loadedOnce = ref(false);
+
+/** 生效范围文案（只展示，不过滤——任务书 T8 红线） */
+const scopes = ref<string[]>([]);
+const scopeText = computed(() => (scopes.value.length ? scopes.value.map(scopeLabel).join("、") : "后端未回传"));
+
+/**
+ * 只按"哪些字段能分组"这一件事取候选。scopes 从统计响应里拿（列表接口会回传，统计接口不带——
+ * 首个响应回来后从列表接口补一次范围签名不合适：那会把统计页变成列表页的依赖）。
+ * 这里统一从 `filterFields` 拉不到范围，就把范围文案留空，不编一个假的。
+ */
+async function loadGroupFields(uuid: string) {
+    try {
+        groupFields.value = (await dataApi.filterFields(uuid).send()) || [];
+    } catch (e: any) {
+        groupFields.value = [];
+        console.warn("[T8] 统计分组候选取不到：", e?.message || e);
+    }
+}
+
+async function loadStats() {
+    if (!formUuid.value) return;
+    loading.value = true;
+    try {
+        stats.value = await dataApi
+            .stats({
+                formUuid: formUuid.value,
+                groupByField: groupByField.value || undefined
+            })
+            .send();
+        loadedOnce.value = true;
+    } catch (e: any) {
+        Message.error(e?.message || "统计加载失败");
+    } finally {
+        loading.value = false;
+    }
+}
+
+/** 按状态 / 按字段的桶宽度：以桶内最大值归一，纯视觉映射（不是聚合） */
+function barPercent(items: CountItem[]): (item: CountItem) => number {
+    const max = items.reduce((m, it) => Math.max(m, it.count), 0);
+    return (item: CountItem) => (max > 0 ? Math.max(2, Math.round((item.count / max) * 100)) : 0);
+}
+
+const statusPercent = computed(() => barPercent(stats.value?.byStatus || []));
+const fieldPercent = computed(() => (groups: FieldGroups) => barPercent(groups.items || []));
+
+async function selectFormAndLoad(uuid: string) {
+    groupByField.value = "";
+    stats.value = null;
+    loadedOnce.value = false;
+    await selectForm(uuid);
+    await loadGroupFields(uuid);
+    await loadStats();
+}
+
+async function init() {
+    await loadCandidates();
+    const fromQuery = String(route.query.form || "");
+    const picked = candidates.value.find((c: { formUuid: string }) => c.formUuid === fromQuery) || candidates.value[0];
+    if (picked) await selectFormAndLoad(picked.formUuid);
+}
+
+watch(
+    () => [props.context, props.appCode, props.codes.join(",")],
+    () => init()
+);
+
+onMounted(init);
 </script>
 
 <template>
-    <PageStub
-        title="统计"
-        stage="T8"
-        note="总数/按状态/按字段分组走接口聚合（铁律④：前端不自己聚合），缓存失效仅升版；UserBase 侧「统计」行可并入数据管理，二选一。"
-    />
+    <div :class="embedded ? 'stats-bare' : 'page-wrapper yh-fill'">
+        <div :class="embedded ? '' : 'main-container'">
+            <div class="toolbar">
+                <Select v-model="formUuid" style="width: 260px" placeholder="选择表单" @on-change="selectFormAndLoad">
+                    <Option v-for="c in candidates" :key="c.formUuid" :value="c.formUuid"
+                        :label="`${c.name}（${c.appCode}/${c.code}）`" />
+                </Select>
+                <Select v-model="groupByField" style="width: 240px" placeholder="按字段分组（可不选）" clearable
+                    @on-change="loadStats">
+                    <Option value="">不分组（只出总数与按状态）</Option>
+                    <Option v-for="f in groupFields" :key="f.key" :value="f.key" :label="f.label" />
+                </Select>
+                <Button icon="md-refresh" :disabled="!formUuid" @click="loadStats">刷新</Button>
+                <span class="toolbar-note">
+                    三个数（总数 / 按状态 / 按字段）全部来自接口聚合，本页不做任何二次统计
+                </span>
+            </div>
+
+            <Alert v-if="candidateError" show-icon type="warning" class="region-tip">
+                表单清单：{{ candidateError }}
+            </Alert>
+
+            <Spin v-if="loading && !stats" fix></Spin>
+            <template v-if="stats">
+                <div class="stat-cards">
+                    <div class="stat-card">
+                        <div class="stat-value">{{ stats.total }}</div>
+                        <div class="stat-label">总数</div>
+                        <div class="stat-sub">范围：{{ scopeText }}</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value">{{ stats.byStatus.length }}</div>
+                        <div class="stat-label">状态桶数</div>
+                        <div class="stat-sub">含"已废弃"状态的行会带 null label</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value">{{ stats.byField.length }}</div>
+                        <div class="stat-label">分组字段数</div>
+                        <div class="stat-sub">
+                            {{ stats.cached ? "命中后端短 TTL 缓存（容忍 N 分钟延迟）" : "本次数值直接来自接口聚合" }}
+                        </div>
+                    </div>
+                </div>
+
+                <h5 class="section-title">按状态</h5>
+                <div v-if="!stats.byStatus.length" class="empty-tip">没有可统计的答卷（或后端未回传状态桶）</div>
+                <div v-else class="bar-list">
+                    <div v-for="item in stats.byStatus" :key="item.value" class="bar-row">
+                        <span class="bar-label">{{ item.label || item.value }}</span>
+                        <div class="bar-track">
+                            <div class="bar-fill" :style="{ width: statusPercent(item) + '%' }"></div>
+                        </div>
+                        <span class="bar-count">{{ item.count }}</span>
+                    </div>
+                </div>
+
+                <template v-for="groups in stats.byField" :key="groups.key">
+                    <h5 class="section-title">按字段分组：{{ groups.label || groups.key }}</h5>
+                    <div v-if="!groups.items.length" class="empty-tip">该字段没有可统计的分组值</div>
+                    <div v-else class="bar-list">
+                        <div v-for="item in groups.items" :key="item.value" class="bar-row">
+                            <span class="bar-label">{{ item.label || item.value }}</span>
+                            <div class="bar-track">
+                                <div class="bar-fill" :style="{ width: fieldPercent(groups)(item) + '%' }"></div>
+                            </div>
+                            <span class="bar-count">{{ item.count }}</span>
+                        </div>
+                    </div>
+                </template>
+
+                <p class="toolbar-note foot-note">
+                    统计只覆盖你数据范围内的答卷（契约 §8 矩阵，后端四读出路径共用同一构造器）；
+                    新提交的答卷在短 TTL 内不计入是<b>预期行为</b>（铁律④：提交不清缓存）。
+                </p>
+            </template>
+
+            <Alert v-else-if="loadedOnce === false && !loading && !candidateError" show-icon type="info" class="region-tip">
+                先在上面选一张表单。
+            </Alert>
+        </div>
+    </div>
 </template>
+
+<style scoped>
+.toolbar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 12px;
+    flex-wrap: wrap;
+}
+.toolbar-note {
+    color: #808695;
+    font-size: 12px;
+}
+.region-tip {
+    margin-bottom: 12px;
+}
+.stat-cards {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+    margin-bottom: 16px;
+}
+.stat-card {
+    flex: 1 1 200px;
+    min-width: 180px;
+    padding: 14px 16px;
+    background: #f8f8f9;
+    border-radius: 4px;
+}
+.stat-value {
+    font-size: 26px;
+    font-weight: 600;
+    color: #2d8cf0;
+    line-height: 1.2;
+}
+.stat-label {
+    font-size: 13px;
+    color: #515a6e;
+    margin-top: 4px;
+}
+.stat-sub {
+    font-size: 12px;
+    color: #808695;
+    margin-top: 6px;
+}
+.section-title {
+    margin: 18px 0 10px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #17233d;
+    border-left: 3px solid #2d8cf0;
+    padding-left: 8px;
+}
+.bar-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+.bar-row {
+    display: grid;
+    grid-template-columns: 180px 1fr 64px;
+    align-items: center;
+    gap: 12px;
+}
+.bar-label {
+    font-size: 13px;
+    color: #515a6e;
+    word-break: break-all;
+}
+.bar-track {
+    height: 14px;
+    background: #eef0f3;
+    border-radius: 7px;
+    overflow: hidden;
+}
+.bar-fill {
+    height: 100%;
+    background: #2d8cf0;
+    border-radius: 7px;
+    transition: width 0.2s ease;
+}
+.bar-count {
+    font-size: 13px;
+    color: #17233d;
+    text-align: right;
+}
+.empty-tip {
+    color: #808695;
+    font-size: 13px;
+    padding: 8px 0;
+}
+.foot-note {
+    display: block;
+    margin-top: 20px;
+    line-height: 1.6;
+}
+</style>