fix(ci): 构建容器名唯一化 + npm 走国内镜像源（避免并发互踩 exit 137）

ci: apk 源统一走 aliyun（规避 dl-cdn 时段性被拦卡 60s）
[CMS-REWORK] #4 保存恒被拦(模板实参ref被解包致validate恒false): refs改脚本侧取用+validate返回首错精确文案
2026-10-21 06:24:32 +00:00 · 2026-10-21 01:37:04 +00:00 · 2026-09-29 11:03:47 +08:00 · 2026-09-29 10:54:39 +08:00 · 2026-09-29 10:53:03 +08:00 · 2026-09-29 10:49:49 +08:00
36 changed files with 4253 additions and 728 deletions
@@ -19,7 +19,10 @@ jobs:
      options: --network infra-infra-net
    steps:
      - name: 安装 git / curl / zip（alpine）
-        run: apk add --no-cache git curl zip
+        run: |
+          # 统一走 aliyun 源：dl-cdn 时段性被拦会卡满 60s×2（2026-10-20 事故）
+          sed -i 's#dl-cdn.alpinelinux.org#mirrors.aliyun.com#g' /etc/apk/repositories
+          apk add --no-cache git curl zip

      # 内网 Gitea 无法访问 GitHub 拉 actions/checkout，手动 clone 本仓库
      - name: 拉取源码（内网无 GitHub，手动 clone 本仓库）
@@ -51,6 +54,8 @@ jobs:
            set -e
            cd /build
            if [ -f .npmrc ]; then sed -i "/SASS_BINARY_PATH/d" .npmrc; fi
+            # 国内镜像源：内网直连 registry.npmjs.org 跨境极慢（实测 npm install 12 分 46 秒 / 754 包）
+            npm config set registry https://registry.npmmirror.com
            npm ci
            npm run build
          '
@@ -1,11 +1,12 @@
 // @vitest-environment jsdom
 /**
- * B5 栏目工作台组件行为（方案 P1-2）：
- * ① 列表型栏目 → 右侧 ArticleListPanel 且 categoryId 正确传递；
- * ② 切换树节点 → 面板 watch categoryId 联动 reload；
+ * B5 栏目工作台组件行为（方案 P1-2）+ P-D1 内容管理 IA 切分（v2 §B）：
+ * ① 列表型栏目 → 右侧「栏目内容概览」（统计 + 最近 5 条只读 + CTA），不再渲染完整操作表；
+ * ② 切换树节点 → 概览 watch categoryId 联动 reload；
 * ③ 单页型 → 摘要面板（含"编辑内容"入口）不渲染文章列表；
 * ④ 外链型 → linkUrl + 打开链接；
- * ⑤ 新建文章按钮 → 路由跳转带 categoryId query。
+ * ⑤ 新建文章按钮 → 路由跳转带 categoryId query；
+ * ⑥ T-D-02/03：/article 读 ?categoryId= 预筛选；概览"查看全部"深链到该地址。
 *
 * 无 @vue/test-utils 依赖：createApp 手写挂载 + vi.mock 桩（树面板/排序弹窗/图标/确认框/api/router）。
 */
@@ -14,20 +15,26 @@ import { createApp, defineComponent, h, nextTick, reactive } from "vue";
 import { createPinia } from "pinia";
 import ViewUIPlus from "view-ui-plus";

-const { pageMock, routerPush, openMock, saveMock, saveRejection } = vi.hoisted(() => ({
+const { pageMock, routerPush, openMock, saveMock, saveRejection, pageResult, treeFixture, routeMock } = vi.hoisted(() => ({
    pageMock: vi.fn(),
    routerPush: vi.fn(),
    openMock: vi.fn(),
    saveMock: vi.fn(),
    /** 第 N 次（0 起）save.send() 拒绝；-1=全部成功（批量添加"失败继续"用） */
    saveRejection: { value: -1 },
+    /** articleApi.page 返回值桩：默认空列表（各用例按需覆盖 list/total） */
+    pageResult: { value: { list: [] as any[], total: 0 } },
+    /** categoryApi.tree 返回值桩：默认空树（用例按需给栏目层级） */
+    treeFixture: { value: [] as any[] },
+    /** useRoute 桩：可变 query，测 ?categoryId= 深链初始化 */
+    routeMock: { value: { params: {}, query: {} as Record<string, string> } },
 }));

 vi.mock("@/api/module/cms", () => ({
    articleApi: {
        page: (query: any) => {
            pageMock(query);
-            return { send: () => Promise.resolve({ list: [], total: 0 }) };
+            return { send: () => Promise.resolve(pageResult.value) };
        },
        publish: () => ({ send: () => Promise.resolve({}) }),
        offline: () => ({ send: () => Promise.resolve({}) }),
@@ -35,7 +42,7 @@ vi.mock("@/api/module/cms", () => ({
        delete: () => ({ send: () => Promise.resolve({}) }),
    },
    categoryApi: {
-        tree: () => ({ send: () => Promise.resolve([]) }),
+        tree: () => ({ send: () => Promise.resolve(treeFixture.value) }),
        save: (payload: any) => {
            const nth = saveMock.mock.calls.length;
            saveMock(payload);
@@ -54,7 +61,7 @@ vi.mock("@/api/module/cms", () => ({

 vi.mock("vue-router", () => ({
    useRouter: () => ({ push: routerPush, replace: vi.fn() }),
-    useRoute: () => ({ params: {}, query: {} }),
+    useRoute: () => routeMock.value,
 }));

 /** 树面板桩：把 emit 挂到全局，测试用它模拟"选中节点"；捕获 props 供 treeApi 断言 */
@@ -67,6 +74,8 @@ vi.mock("@/components/CategoryTreePanel.vue", () => ({
                emit("update:curTreeNode", node);
                emit("on-change", node);
            };
+            // P-D-01：概览统计要"直属+子孙"，用 on-tree-data 把（含虚拟根的）栏目树喂给 CategoryManage.treeData
+            (globalThis as any).__treeEmitData = (list: any[]) => emit("on-tree-data", list);
            (globalThis as any).__treeProps = props;
            // CategoryManage 会经模板 ref 调这些方法（真实组件的 exposed API）
            expose({ loadTree: () => {}, refreshTree: () => {}, reloadTree: () => {} });
@@ -126,7 +135,11 @@ async function flush(frames = 5) {
 beforeEach(() => {
    vi.clearAllMocks();
    (globalThis as any).__treeEmit = undefined;
+    (globalThis as any).__treeEmitData = undefined;
    (globalThis as any).__treeProps = undefined;
+    pageResult.value = { list: [], total: 0 };
+    treeFixture.value = [];
+    routeMock.value = { params: {}, query: {} };
    currentStore = null;
    window.open = openMock as any;
 });
@@ -168,6 +181,19 @@ describe("categoryWorkbench - ArticleListPanel（列表型右侧面板）", () =
        expect(pageMock.mock.calls[1][0]).toMatchObject({ categoryIds: 7 });
    });

+    it("T-D-02 文章页 ?categoryId= 深链：读 query 初始化栏目筛选并回显下拉", async () => {
+        treeFixture.value = [{ id: 5, name: "新闻中心", type: 1, children: [{ id: 51, name: "校园时讯", type: 1 }] }];
+        routeMock.value = { params: {}, query: { categoryId: "5" } };
+        const el = mountApp(defineComponent({
+            setup: () => () => h(ArticleListPanel, {}),
+        }));
+        await flush();
+
+        // query 里的字符串 id 须转成数字：既对齐后端 categoryIds，也让栏目下拉回显选中项
+        expect(pageMock.mock.calls[0][0]).toMatchObject({ siteId: 1, categoryIds: 5 });
+        expect(el.querySelector(".ivu-select-selected-value")?.textContent).toContain("新闻中心");
+    });
+
    it("⑤ 面板新建文章：非固定模式带 categoryId query 跳转；固定模式入口收敛到工作台面板头（面板内无重复按钮）", async () => {
        const state = reactive({ cid: 5, fixed: false });
        const host = defineComponent({
@@ -218,15 +244,75 @@ describe("categoryWorkbench - CategoryManage 右侧类型化面板", () => {
        expect(openMock).toHaveBeenCalledWith("https://www.moe.gov.cn", "_blank");
    });

-    it("列表型栏目：右侧渲染 ArticleListPanel（categoryId=选中栏目）", async () => {
+    it("T-D-01 列表型栏目：右侧降级为「栏目内容概览」（统计 + 最近 5 条只读），不再渲染操作表", async () => {
+        pageResult.value = {
+            total: 12,
+            list: [1, 2, 3, 4, 5, 6].map(i => ({
+                id: 900 + i,
+                title: `云海大学第${i}次党代会筹备推进会`,
+                categoryId: 5,
+                categoryName: "新闻中心",
+                status: 1,
+                publishTime: "2026-09-20 10:00",
+                topmost: 0,
+            })),
+        };
+        const el = mountApp(defineComponent({ render: () => h(CategoryManage) }));
+        await flush();
+        // 统计口径 = 直属 + 子孙栏目：树经 on-tree-data 下发（含 W2 虚拟根），子孙 51/52 须并入计数
+        (globalThis as any).__treeEmitData([
+            {
+                id: 0,
+                name: "演示学校",
+                virtual: true,
+                children: [
+                    {
+                        id: 5,
+                        name: "新闻中心",
+                        type: 1,
+                        children: [
+                            { id: 51, name: "校园时讯", type: 1 },
+                            { id: 52, name: "通知公告", type: 1 },
+                        ],
+                    },
+                ],
+            },
+        ]);
+        (globalThis as any).__treeEmit({ id: 5, parentId: 0, name: "新闻中心", type: 1, sortNo: 0, status: 1 });
+        await flush();
+
+        const box = el.querySelector(".category-content-summary");
+        expect(box).toBeTruthy();
+        // 完整的文章操作表不再出现在栏目页（唯一操作台是 /article）
+        expect(el.querySelector(".article-list-panel")).toBeNull();
+        expect(box!.querySelector(".ivu-table")).toBeNull();
+        // 概览内不得出现文章操作入口（发布/下架/置顶/删除按钮）；状态说明文字不算
+        const affordances = [...box!.querySelectorAll("button, a")].map(n => (n.textContent || "").trim());
+        expect(affordances.some(t => ["发布", "下架", "取消置顶", "置顶", "删除"].includes(t))).toBe(false);
+
+        // 统计查询：直属+子孙（逗号分隔，后端 List<Integer> 契约）、全状态（不带 status）、只要最近 5 条
+        expect(pageMock).toHaveBeenCalled();
+        const q = pageMock.mock.calls[0][0];
+        expect(q).toMatchObject({ siteId: 1, categoryIds: "5,51,52", page: 1, pageSize: 5 });
+        expect(q.status).toBeUndefined();
+
+        expect(box!.textContent).toContain("共 12 篇");
+        // 只读 5 条（第 6 条不渲染）
+        expect(box!.querySelectorAll(".ccs-row")).toHaveLength(5);
+        expect(box!.textContent).toContain("云海大学第1次党代会筹备推进会");
+    });
+
+    it("T-D-03 概览「查看全部 →」跳 /article 深链（带 categoryId 预筛选）", async () => {
        const el = mountApp(defineComponent({ render: () => h(CategoryManage) }));
        await flush();
        (globalThis as any).__treeEmit({ id: 5, parentId: 0, name: "新闻中心", type: 1, sortNo: 0, status: 1 });
        await flush();

-        expect(el.querySelector(".article-list-panel")).toBeTruthy();
-        expect(pageMock).toHaveBeenCalled();
-        expect(pageMock.mock.calls[0][0]).toMatchObject({ categoryIds: 5 });
+        const more = [...el.querySelectorAll("a, button")].find(b => b.textContent?.includes("查看全部"));
+        expect(more).toBeTruthy();
+        more!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        await flush();
+        expect(routerPush).toHaveBeenCalledWith("/sch/demo1/article?categoryId=5");
    });

    it("未选中节点：右侧显示空态引导", async () => {
@@ -1,21 +1,24 @@
 // @vitest-environment jsdom
 /**
- * 首页布局编辑器（v2 工作项 B / 手册 §2.8）挂载回归：T-B-09——
- * quick_links 的属性面板必须是「数组编辑器」（每行 name + url，可增删、受 12 项上限约束），
- * notice_bar 必须是正文 + 可选跳转 + level 选择；序列行摘要走 blockSummary 新增分支。
- * 沿用 siteSetting.spec.ts 的手写 createApp + vi.mock 桩风格。
+ * 首页布局编辑器（v2 工作项 B → docs/20 F2 三栏升级）挂载回归：
+ * T-B-09 quick_links/notice_bar 属性面板行为不变；
+ * F2 新增：三栏结构（序列/预览/属性）、预览视口三档切换、类型卡 SVG 缩略图（R-40）、
+ * 展示形态 RadioCard、首用自动编排（无 home_layout + 有列表栏目 → 自动生成）。
 */
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { createApp, defineComponent, h, nextTick, ref } from "vue";
 import ViewUIPlus from "view-ui-plus";

 Element.prototype.scrollIntoView = Element.prototype.scrollIntoView || (() => {});

+const treeMock = vi.hoisted(() => ({ send: vi.fn() }));
+
 vi.mock("@/api/module/cms", () => ({
-    categoryApi: { tree: () => ({ send: async () => [] }) },
+    categoryApi: { tree: () => treeMock },
 }));

 import HomeLayoutEditor from "@/views/cms/homeLayout/HomeLayoutEditor.vue";
+import { CategoryTreeNode } from "@/types/cms";

 const cleanups: (() => void)[] = [];

@@ -41,13 +44,27 @@ const CONFIG = JSON.stringify({
    },
 });

-async function mountEditor(configJson: string) {
+const TREE: CategoryTreeNode[] = [
+    { id: 11, name: "校园时讯", type: 1, children: [] },
+    { id: 12, name: "媒体聚焦", type: 1, children: [] },
+] as unknown as CategoryTreeNode[];
+
+async function mountEditor(
+    configJson: string,
+    opts?: { siteId?: number; portalUrl?: string; siteIdRef?: ReturnType<typeof ref<number | undefined>> },
+) {
    const el = document.createElement("div");
    document.body.appendChild(el);
    const model = ref(configJson);
    const app = createApp(
        defineComponent({
-            render: () => h(HomeLayoutEditor, { modelValue: model.value, "onUpdate:modelValue": (v: string) => (model.value = v) }),
+            render: () =>
+                h(HomeLayoutEditor, {
+                    modelValue: model.value,
+                    siteId: opts?.siteIdRef ? opts.siteIdRef.value : opts?.siteId,
+                    portalUrl: opts?.portalUrl,
+                    "onUpdate:modelValue": (v: string) => (model.value = v),
+                }),
        }),
    );
    app.use(ViewUIPlus);
@@ -74,11 +91,16 @@ function del(field: HTMLElement, index: number): HTMLElement {
    return field.querySelectorAll<HTMLElement>(".hle-link-del")[index];
 }

+beforeEach(() => {
+    treeMock.send.mockReset();
+    treeMock.send.mockResolvedValue([]);
+});
+
 afterEach(() => {
    cleanups.splice(0).forEach(fn => fn());
 });

-describe("HomeLayoutEditor - quick_links / notice_bar 属性面板（T-B-09）", () => {
+describe("HomeLayoutEditor - quick_links / notice_bar 属性面板（T-B-09，F2 改造后回归）", () => {
    it("quick_links：入口行编辑器渲染 name+url 双输入，添加/删除可用且回写 items", async () => {
        const { el, model } = await mountEditor(CONFIG);
        // 序列行摘要走 blockSummary 新增分支
@@ -140,3 +162,190 @@ describe("HomeLayoutEditor - quick_links / notice_bar 属性面板（T-B-09）",
        expect(levelField.textContent).toContain("醒目");
    });
 });
+
+describe("HomeLayoutEditor - F2 三栏 + 预览 + 缩略图 + 自动编排（docs/20）", () => {
+    it("三栏结构：序列 / 实时预览 iframe / 属性面板；视口三档与刷新按钮齐备", async () => {
+        const { el } = await mountEditor(CONFIG, { portalUrl: "http://x/portal/demo/" });
+        expect(el.querySelector(".hle-sequence")).toBeTruthy();
+        expect(el.querySelector(".hle-props")).toBeTruthy();
+        const preview = el.querySelector(".hle-preview")!;
+        expect(preview).toBeTruthy();
+        expect(preview.querySelector("iframe")).toBeTruthy();
+        expect(preview.querySelector("iframe")!.getAttribute("src")).toBe("http://x/portal/demo/");
+        // 视口三档
+        expect(preview.textContent).toContain("桌面 1200");
+        expect(preview.textContent).toContain("平板 768");
+        expect(preview.textContent).toContain("手机 390");
+        const refresh = [...preview.querySelectorAll("button")].find(b => b.textContent?.includes("刷新预览"));
+        expect(refresh).toBeTruthy();
+    });
+
+    it("添加抽屉：每个类型卡配 SVG 缩略示意图（R-40，注册表全量）", async () => {
+        const { el } = await mountEditor(CONFIG);
+        const addBtn = [...el.querySelectorAll("button")].find(b => b.textContent?.includes("添加区块"))!;
+        addBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        await settle();
+        // Drawer 渲染到 body 级传送门
+        const drawer = document.querySelector(".hle-drawer") || document.body;
+        const cards = drawer.querySelectorAll(".hle-type-card");
+        expect(cards.length).toBeGreaterThanOrEqual(6);
+        cards.forEach(c => {
+            expect(c.querySelector(".hle-type-thumb svg")).toBeTruthy();
+        });
+    });
+
+    it("展示形态 = RadioCard 可视化选择（5 张缩略图 + 文字，非纯文字下拉）", async () => {
+        const config = JSON.stringify({
+            home_layout: { version: 1, blocks: [{ id: "a1", type: "article_list", categoryIds: [11], style: "card", size: 8 }] },
+        });
+        const { el, model } = await mountEditor(config);
+        (el.querySelector(".hle-row") as HTMLElement).click();
+        await settle();
+        const styleField = fieldOf(el as HTMLElement, "展示形态")!;
+        expect(styleField.querySelector(".hle-style-cards")).toBeTruthy();
+        expect(styleField.querySelectorAll(".hle-style-card").length).toBe(5);
+        expect(styleField.querySelectorAll(".hle-style-card svg").length).toBe(5);
+        // 点击第 2 张卡（news_grid）→ 选中态 + 回写布局
+        (styleField.querySelectorAll(".hle-style-card")[1] as HTMLElement).click();
+        await settle();
+        expect(styleField.querySelectorAll(".hle-style-card")[1].className).toContain("active");
+        expect(JSON.parse(model.value).home_layout.blocks[0].style).toBe("news_grid");
+    });
+
+    it("首用自动编排：无 home_layout 键 + 站点有列表栏目 → 自动生成初始序列（D-4）", async () => {
+        treeMock.send.mockResolvedValue(TREE);
+        const noLayoutConfig = JSON.stringify({ logo: "/a.png" });
+        const { model } = await mountEditor(noLayoutConfig, { siteId: 1 });
+        const layout = JSON.parse(model.value).home_layout;
+        expect(layout).toBeTruthy();
+        expect(layout.blocks.length).toBeGreaterThanOrEqual(4); // ticker + 2 栏目区块 + gallery
+        expect(layout.blocks[0].type).toBe("ticker");
+        expect(layout.blocks.some((b: { type: string; title?: string }) => b.type === "article_list" && b.title === "校园时讯")).toBe(true);
+        expect(layout.blocks.some((b: { type: string }) => b.type === "gallery")).toBe(true);
+        // 其余键无损
+        expect(JSON.parse(model.value).logo).toBe("/a.png");
+    });
+
+    it("显式空布局（blocks=[]）不触发自动编排（用户选择优先）", async () => {
+        treeMock.send.mockResolvedValue(TREE);
+        const emptyLayout = JSON.stringify({ home_layout: { version: 1, blocks: [] } });
+        const { model } = await mountEditor(emptyLayout, { siteId: 1 });
+        expect(JSON.parse(model.value).home_layout.blocks).toEqual([]);
+    });
+
+    it("无列表栏目不触发自动编排", async () => {
+        treeMock.send.mockResolvedValue([]);
+        const { model } = await mountEditor(JSON.stringify({ logo: "/a.png" }), { siteId: 1 });
+        expect(JSON.parse(model.value).home_layout).toBeUndefined();
+    });
+});
+
+describe("HomeLayoutEditor - 栏目树加载与首用编排解耦（docs/20 返工 #1）", () => {
+    it("已有布局 + 有列表栏目 + siteId：栏目树仍无条件加载，数据栏目可勾选", async () => {
+        treeMock.send.mockResolvedValue(TREE);
+        const config = JSON.stringify({
+            home_layout: { version: 1, blocks: [{ id: "a1", type: "article_list", categoryIds: [11], style: "card", size: 8 }] },
+        });
+        const { el, model } = await mountEditor(config, { siteId: 1 });
+        // 树加载发生（幂等标记下 treeMock 恰好 1 次调用）
+        expect(treeMock.send).toHaveBeenCalledTimes(1);
+        (el.querySelector(".hle-row") as HTMLElement).click();
+        await settle();
+        const cats = fieldOf(el as HTMLElement, "数据栏目")!;
+        expect(cats).not.toBeNull();
+        expect(cats.querySelectorAll(".hle-cat").length).toBe(2);
+        expect(cats.textContent).toContain("校园时讯");
+        expect(cats.textContent).toContain("媒体聚焦");
+        // 已有布局不被自动编排改写
+        expect(JSON.parse(model.value).home_layout.blocks[0].id).toBe("a1");
+    });
+
+    it("siteId 晚于挂载到位（父级异步种入）：watch 补跑加载，数据栏目可用", async () => {
+        treeMock.send.mockResolvedValue(TREE);
+        const siteIdRef = ref<number | undefined>(undefined);
+        const config = JSON.stringify({
+            home_layout: { version: 1, blocks: [{ id: "a1", type: "article_list", categoryIds: [], style: "card", size: 8 }] },
+        });
+        const { el } = await mountEditor(config, { siteIdRef });
+        await settle();
+        // siteId 未到位时不请求
+        expect(treeMock.send).not.toHaveBeenCalled();
+        siteIdRef.value = 1;
+        await settle(6);
+        expect(treeMock.send).toHaveBeenCalledTimes(1);
+        (el.querySelector(".hle-row") as HTMLElement).click();
+        await settle();
+        const cats = fieldOf(el as HTMLElement, "数据栏目")!;
+        expect(cats.querySelectorAll(".hle-cat").length).toBe(2);
+    });
+
+    it("watch + onMounted 双触发下幂等：同 siteId 只请求一次", async () => {
+        treeMock.send.mockResolvedValue(TREE);
+        const siteIdRef = ref<number | undefined>(1);
+        await mountEditor(JSON.stringify({ logo: "/a.png" }), { siteIdRef });
+        await settle(6);
+        expect(treeMock.send).toHaveBeenCalledTimes(1);
+    });
+});
+
+describe("HomeLayoutEditor - 区块序列序号徽标（docs/20 返工 #3）", () => {
+    it("每行右上角显示连续序号（1 起始、含隐藏区块不重排），与校验报错「第 N 个区块」对齐", async () => {
+        const config = JSON.stringify({
+            home_layout: {
+                version: 1,
+                blocks: [
+                    { id: "a1", type: "article_list", categoryIds: [11], style: "card", size: 8 },
+                    { id: "n1", type: "notice_bar", text: "公告", visible: false },
+                    { id: "g1", type: "gallery" },
+                ],
+            },
+        });
+        const { el } = await mountEditor(config);
+        const nos = Array.from(el.querySelectorAll(".hle-row-no")).map(n => n.textContent!.trim());
+        expect(nos).toEqual(["1", "2", "3"]);
+        // 隐藏区块（第 2 行）保留序号、行整体置灰，编号不重排
+        const rows = Array.from(el.querySelectorAll(".hle-row"));
+        expect(rows[1].className).toContain("hidden");
+        expect(rows[1].querySelector(".hle-row-no")!.textContent!.trim()).toBe("2");
+    });
+});
+
+describe("HomeLayoutEditor - D 组件属性面板（docs/20 D-1/D-8）", () => {
+    it("stats_band：统计项三列编辑器（名称/数值/单位）渲染并可增行", async () => {
+        const config = JSON.stringify({
+            home_layout: { version: 1, blocks: [
+                { id: "s1", type: "stats_band", stats: [{ label: "在校生", value: "3.2", unit: "万" }] },
+            ] },
+        });
+        const { el } = await mountEditor(config);
+        (el.querySelector(".hle-row") as HTMLElement).click();
+        await settle();
+        const field = fieldOf(el as HTMLElement, "统计项")!;
+        expect(field.querySelector(".hle-stat-row")).toBeTruthy();
+        expect((field.querySelector(".hle-stat-row input") as HTMLInputElement)).toBeTruthy();
+        const add = field.querySelector(".hle-stat-add, .hle-link-add") as HTMLElement;
+        add.click();
+        await settle();
+        expect(field.querySelectorAll(".hle-stat-row").length).toBe(2);
+    });
+
+    it("gallery：布局形态下拉含瀑布流（campus_wall）选项且选中回写", async () => {
+        const config = JSON.stringify({
+            home_layout: { version: 1, blocks: [{ id: "g1", type: "gallery" }] },
+        });
+        const { el, model } = await mountEditor(config);
+        (el.querySelector(".hle-row") as HTMLElement).click();
+        await settle();
+        const field = fieldOf(el as HTMLElement, "布局形态")!;
+        const select = field.querySelector(".ivu-select") as HTMLElement;
+        expect(select).toBeTruthy();
+        // 展开下拉点选 masonry
+        select.querySelector(".ivu-select-selection").dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        await settle(8);
+        const opt = [...document.querySelectorAll(".ivu-select-item")].find(n => n.textContent?.includes("瀑布流")) as HTMLElement;
+        expect(opt).toBeTruthy();
+        opt.click();
+        await settle(8);
+        expect(JSON.parse(model.value).home_layout.blocks[0].layout).toBe("masonry");
+    });
+});
@@ -0,0 +1,114 @@
+// @vitest-environment jsdom
+/**
+ * SiteConfigForm 组件级回归（docs/20 返工 #4）：
+ * - 本分区无必填字段：全空 → validate() 通过（返回 null），不因「必填」拦保存；
+ * - 全合法值 → validate() 通过；
+ * - 填了但格式非法 → validate() 返回该字段的明确错误（「字段名：原因」），
+ *   且表单内出现 iView 内联红框（.ivu-form-item-error），不再有「红星必填」式误导。
+ * 沿用手写 createApp 挂载 + vi.mock 桩风格（与 homeLayoutEditor.spec.ts 一致）。
+ */
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+import ViewUIPlus from "view-ui-plus";
+
+Element.prototype.scrollIntoView = Element.prototype.scrollIntoView || (() => {});
+
+import SiteConfigForm from "@/views/cms/components/SiteConfigForm.vue";
+
+const cleanups: (() => void)[] = [];
+
+/** 排空微任务 + 一个宏任务（iView 校验态/DOM 类名更新走 nextTick） */
+async function settle(frames = 4) {
+    for (let i = 0; i < frames; i++) {
+        await nextTick();
+    }
+    await new Promise(r => setTimeout(r, 0));
+    for (let i = 0; i < frames; i++) {
+        await nextTick();
+    }
+}
+
+async function mountForm(modelValue: string, groups: string[]) {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    const model = ref(modelValue);
+    const childRef = ref<any>(null);
+    const app = createApp(
+        defineComponent({
+            setup() {
+                return () =>
+                    h(SiteConfigForm, {
+                        ref: childRef,
+                        modelValue: model.value,
+                        groups,
+                        "onUpdate:modelValue": (v: string) => (model.value = v),
+                    });
+            },
+        }),
+    );
+    app.use(ViewUIPlus);
+    app.mount(el);
+    cleanups.push(() => {
+        app.unmount();
+        el.remove();
+    });
+    await settle(6);
+    return { el, model, child: childRef };
+}
+
+/** 模拟真实输入：走原生 input 事件（iView Input 据此回填 v-model 并触发 on-change 回写） */
+async function typeByPlaceholder(el: HTMLElement, placeholder: string, value: string) {
+    const input = Array.from(el.querySelectorAll<HTMLInputElement>("input, textarea")).find(
+        n => n.getAttribute("placeholder") === placeholder,
+    );
+    expect(input, `placeholder ${placeholder} 对应的输入框应存在`).toBeTruthy();
+    const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!;
+    setter.call(input!, value);
+    input!.dispatchEvent(new Event("input", { bubbles: true }));
+    await settle();
+}
+
+beforeEach(() => {});
+
+afterEach(() => {
+    cleanups.splice(0).forEach(fn => fn());
+});
+
+describe("SiteConfigForm 校验（docs/20 返工 #4）", () => {
+    it("全空（无必填字段）→ validate() 通过返回 null", async () => {
+        const { child } = await mountForm("", ["display"]);
+        const err = await child.value.validate();
+        expect(err).toBeNull();
+    });
+
+    it("全合法值 → validate() 通过返回 null", async () => {
+        const { el, child } = await mountForm("", ["display"]);
+        await typeByPlaceholder(el, "门户顶栏展示的一句话标语（可选）", "云海大学欢迎您");
+        await typeByPlaceholder(el, "留空默认「专业院系」", "院系导航");
+        const err = await child.value.validate();
+        expect(err).toBeNull();
+    });
+
+    it("合法 configJson 种入 + 手填非法 URL → 返回「字段名：原因」，出现内联红框", async () => {
+        const { el, child } = await mountForm(JSON.stringify({ logo: "/yschcms/upload/2026/06/logo.png" }), ["footer"]);
+        await typeByPlaceholder(el, "微博主页链接 https://weibo.com/…（留空不展示图标）", "不是链接");
+        const err = await child.value.validate();
+        expect(typeof err).toBe("string");
+        expect(err).toContain("微博");
+        expect(err).toContain("http");
+        // 内联红框 + 字段下方错误文案存在
+        expect(el.querySelector(".ivu-form-item-error .ivu-form-item-error-tip")).toBeTruthy();
+    });
+
+    it("asset 字段非法值同样精确报错（种入非法 logo 值）", async () => {
+        // REWORK-DECISION: 经控件 UI 填 asset 值的路径依赖上传（jsdom 不可行）与「手动粘贴」通道
+        // （其「填入」按钮因 slot="append" 旧语法在 Vue 3 下不渲染，属本次返工范围外的存量缺陷，
+        // 见返工报告遗留项），故从种入 configJson 驱动：等价覆盖「存在非法 asset 值 → 精确报错」。
+        const { el, child } = await mountForm(JSON.stringify({ logo: "随便写的路径" }), ["display"]);
+        const err = await child.value.validate();
+        expect(typeof err).toBe("string");
+        expect(err).toContain("站点 Logo");
+        expect(err).toContain("上传路径");
+        expect(el.querySelector(".ivu-form-item-error")).toBeTruthy();
+    });
+});
@@ -30,9 +30,10 @@ vi.mock("vue-router", () => ({
 import SchoolLayout from "@/components/SchoolLayout.vue";
 import { useCmsStore } from "@/store";

+/** 站点卡皮肤包名取 user.sites[].theme（后端 AuthUserVo.sites = List<SiteVo>，字段已具备，零后端改动） */
 const SITES = [
-    { id: 1, code: "demo", name: "云海大学门户", path: "demo", parentSiteId: 0, schId: 1001, schName: "云海大学" },
-    { id: 2, code: "jdxy", name: "机电学院", path: "demo/jdxy", parentSiteId: 1, schId: 1001, schName: "云海大学" },
+    { id: 1, code: "demo", name: "云海大学门户", path: "demo", parentSiteId: 0, theme: "scholar-blue", schId: 1001, schName: "云海大学" },
+    { id: 2, code: "jdxy", name: "机电学院", path: "demo/jdxy", parentSiteId: 1, theme: "campus-glow", schId: 1001, schName: "云海大学" },
    { id: 3, code: "wtxy", name: "文学院", path: "demo/wtxy", parentSiteId: 1, schId: 1001, schName: "云海大学" },
 ];

@@ -296,3 +297,57 @@ describe("docs/13 身份条次级入口与幂等切换（docs/15 T5）", () => {
        expect(box.push).toHaveBeenCalledWith("/sch/demo/site/jdxy/site");
    });
 });
+
+/* ===== docs/22 v3：页头身份「学校名.站点名」 + 侧栏站点卡撤除 =====
+   口径：页头 .school-cap（> .sc-sep + .sc-site）是唯一常驻身份点，主站不写站全名统一「主站」；
+   切站入口收敛到面包屑站点身份条（T-B-* / SiteSwitcher 用例）与站点工作台卡片两处。
+   原 v2 的卡内切站用例（T-C-01b）随卡撤除而删除。 */
+describe("P-C1 页头身份与侧栏卡撤除（docs/22 v3）", () => {
+    it("T-C-01 主站态：侧栏 .menu-top-box 复归空档（卡已撤），页头 = 学校名.主站", async () => {
+        setRoute("/sch/demo/article", { schCode: "demo" });
+        const el = mountLayout();
+        await flush();
+
+        // 站点卡撤除：侧栏顶部空档恢复为空 div（回到加卡之前的 layout.css 形态）
+        const topBox = el.querySelector(".left-menu .menu-top-box");
+        expect(topBox).toBeTruthy();
+        expect(topBox!.children).toHaveLength(0);
+
+        // 页头身份：学校名.站点名 —— 主站档位统一「主站」，不写站全名
+        expect(el.querySelector(".header-container h4")!.textContent).toContain("云海大学.主站");
+        expect(el.querySelector(".header-container .school-cap")!.textContent).toContain("云海大学");
+        expect(el.querySelector(".header-container .sc-site")!.textContent.trim()).toBe("主站");
+    });
+
+    it("T-C-02 身份染色：子站态 .school-cap 挂 band-sub、.sc-site=站名；主站态 band-main、.sc-site=主站", async () => {
+        setRoute("/sch/demo/site/jdxy/article", { schCode: "demo", siteCode: "jdxy" });
+        const sub = mountLayout();
+        await flush();
+        // 侧栏/面包屑色带档位保留（identityClass 仍在 .left-menu / .path-nav 上工作）
+        expect(sub.querySelector(".left-menu")!.className).toContain("band-sub");
+        expect(sub.querySelector(".header-container .school-cap")!.classList.contains("band-sub")).toBe(true);
+        expect(sub.querySelector(".header-container .sc-site")!.textContent.trim()).toBe("机电学院");
+
+        setRoute("/sch/demo/article", { schCode: "demo" });
+        const main = mountLayout();
+        await flush();
+        expect(main.querySelector(".left-menu")!.className).toContain("band-main");
+        expect(main.querySelector(".header-container .school-cap")!.classList.contains("band-sub")).toBe(false);
+        expect(main.querySelector(".header-container .sc-site")!.textContent.trim()).toBe("主站");
+    });
+
+    it("T-C-03 标题带站点：页头与 document.title 均为「页面名 · 学校名.站点名」，切站后跟随", async () => {
+        setRoute("/sch/demo/site/jdxy/article", { schCode: "demo", siteCode: "jdxy" });
+        const el = mountLayout();
+        await flush();
+        expect(document.title).toBe("文章列表 · 云海大学.机电学院");
+        expect(el.querySelector(".header-container h4")!.textContent).toContain("云海大学.机电学院");
+
+        // 同一壳内切回主站形态：标题与 document.title 同步为「学校名.主站」
+        box.route.path = "/sch/demo/article";
+        box.route.fullPath = "/sch/demo/article";
+        box.route.params = { schCode: "demo" };
+        await flush();
+        expect(document.title).toBe("文章列表 · 云海大学.主站");
+    });
+});
@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 /**
- * 站点管理列表页回归（docs/16 主线A 整页化后）：
- * 行「编辑」→ 跳站点设置中心 site/setting/:id（弹窗已退役）；「新建站点」→ site/new 创建模式；
+ * 站点管理页回归：docs/22 站点工作台（默认卡片视图）+ 表格视图保留。
+ * 行「站点设置」→ 跳站点设置中心 site/setting/:id（弹窗已退役）；「新建站点」→ site/new 创建模式；
 * 子站行带 URL 站点段（docs/13 adminPathOf 口径）。沿用手写 createApp 挂载桩风格。
 */
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
@@ -93,6 +93,13 @@ function clickRowAction(el: ParentNode, iconClass: string, rowIndex = 0) {
    return btn;
 }

+/** docs/22 后默认视图为卡片；表格行操作用例先切到表格视图 */
+async function switchToTable(el: ParentNode) {
+    const btn = [...el.querySelectorAll(".seg button")].find(b => b.textContent?.includes("表格"));
+    btn!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await flush();
+}
+
 beforeEach(() => {
    vi.clearAllMocks();
    siteListMock.mockResolvedValue(JSON.parse(JSON.stringify([siteRow])));
@@ -105,9 +112,10 @@ afterEach(() => {
 });

 describe("SiteManage 列表页（docs/16 整页化后）", () => {
-    it("① 行「编辑」跳站点设置中心（主站形态无站点段）", async () => {
+    it("① 行「站点设置」跳站点设置中心（主站形态无站点段）", async () => {
        const el = mountPage();
        await flush();
+        await switchToTable(el);

        const btn = clickRowAction(el, "icon-edit");
        expect(btn).toBeTruthy();
@@ -116,13 +124,14 @@ describe("SiteManage 列表页（docs/16 整页化后）", () => {
        expect(routerPushMock).toHaveBeenCalledWith("/sch/demo/site/setting/1");
    });

-    it("② 子站行「编辑」带 URL 站点段（/sch/{main}/site/{sub}/site/setting/{id}）", async () => {
+    it("② 子站行「站点设置」带 URL 站点段（/sch/{main}/site/{sub}/site/setting/{id}）", async () => {
        siteListMock.mockResolvedValue(JSON.parse(JSON.stringify([
            siteRow,
            { ...siteRow, id: 2, code: "jdxy", path: "demo/jdxy", parentSiteId: 1, parentName: "云海大学门户网站", name: "机械学院" },
        ])));
        const el = mountPage();
        await flush();
+        await switchToTable(el);

        clickRowAction(el, "icon-edit", 1);
        await flush();
@@ -143,3 +152,58 @@ describe("SiteManage 列表页（docs/16 整页化后）", () => {
        expect(routerPushMock).toHaveBeenCalledWith("/sch/demo/site/new");
    });
 });
+
+describe("站点工作台（docs/22 v3）", () => {
+    /** 1 主站 + 2 子站：卡片工作台的最小分组样本 */
+    function mockOneMainTwoSubs() {
+        siteListMock.mockResolvedValue(
+            JSON.parse(
+                JSON.stringify([
+                    siteRow,
+                    { ...siteRow, id: 2, code: "jdxy", path: "demo/jdxy", parentSiteId: 1, parentName: "云海大学门户网站", name: "机电学院" },
+                    { ...siteRow, id: 3, code: "wtxy", path: "demo/wtxy", parentSiteId: 1, parentName: "云海大学门户网站", name: "文学院" },
+                ])
+            )
+        );
+    }
+
+    it("T-SM-01 默认卡片视图：主站宽卡 1 + 子站网格 2，当前站唯一高亮；表格视图可切回", async () => {
+        mockOneMainTwoSubs();
+        const el = mountPage(store => {
+            store.user = { superAdmin: true } as any;
+            store.currentSite = { id: 2, code: "jdxy", name: "机电学院" } as any;
+        });
+        await flush();
+
+        expect(el.querySelectorAll(".main-card")).toHaveLength(1);
+        expect(el.querySelectorAll(".site-card")).toHaveLength(2);
+        expect(el.querySelectorAll(".site-card.is-cur")).toHaveLength(1);
+        // 主站卡「子站」统计 = 过滤前真实规模（SiteVo 无栏目/文章字段，仅子站数必显）
+        expect(el.querySelector(".main-card .mc-stats")!.textContent).toContain("2");
+
+        // 切表格视图：卡片网格消失、ivu-table 出现
+        await switchToTable(el);
+        expect(el.querySelector(".card-grid")).toBeNull();
+        expect(el.querySelector(".ivu-table")).toBeTruthy();
+    });
+
+    it("T-SM-02 搜索过滤：命中子站保留、主站宽卡不消失（层级锚点），子站统计不随过滤变化", async () => {
+        mockOneMainTwoSubs();
+        const el = mountPage(store => {
+            store.user = { superAdmin: true } as any;
+            store.currentSite = { id: 1, code: "demo", name: "云海大学门户网站" } as any;
+        });
+        await flush();
+
+        const input = el.querySelector(".seg-search input") as HTMLInputElement;
+        input.value = "机电";
+        input.dispatchEvent(new Event("input", { bubbles: true }));
+        await flush();
+
+        expect(el.querySelectorAll(".main-card")).toHaveLength(1);
+        expect(el.querySelectorAll(".site-card")).toHaveLength(1);
+        expect(el.querySelector(".site-card")!.textContent).toContain("机电学院");
+        // rawSubs 按过滤前全量行统计：仍是 2 个子站
+        expect(el.querySelector(".main-card .mc-stats")!.textContent).toContain("2");
+    });
+});
@@ -1,10 +1,12 @@
 // @vitest-environment jsdom
 /**
- * 站点设置中心（docs/16 主线A）挂载回归：
- * ① 创建模式：③~⑦锁定（"创建站点后开放"×5）、主按钮=「创建站点」、
- *    校级锁定本校主站时门户地址预览随编码联动（原向导 T-W4-18 能力收编）；
- * ② 编辑模式：基本信息回填、未注册皮肤告警保留原值（任务三行为迁入②分区）；
- * ③ 分区保存：保存基本信息 = 当前 configJson 事实源全量提交（其他分区键不丢）。
+ * 站点设置中心（docs/16 主线A → docs/20 F1 Tab 化 + 渐进式向导）挂载回归：
+ * ① 创建模式（渐进式向导）：无任何「创建站点后开放」灰态；主按钮=「创建站点，下一步」；
+ *    创建成功自动进入第二步（皮肤 Tab + Steps + 「保存并完成」）；
+ *    校级锁定本校主站时门户地址预览随编码联动；
+ * ② 编辑模式：7 Tab 结构、基本信息回填、未注册皮肤告警保留原值；
+ * ③ Tab 独立保存：保存基本信息 = 以服务端事实源 configJson 提交（其他 Tab 键不丢、不连带提交）；
+ * ④ 自定义样式独立 Tab（textarea 代码编辑器，非折叠面板）。
 * 沿用手写 createApp 挂载 + vi.mock 桩风格（与 siteManage.spec.ts 一致）。
 */
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
@@ -12,8 +14,6 @@ import { createApp, defineComponent, h, nextTick } from "vue";
 import { createPinia } from "pinia";
 import ViewUIPlus from "view-ui-plus";

-Element.prototype.scrollIntoView = Element.prototype.scrollIntoView || (() => {});
-
 const routeMock = vi.hoisted(() => ({ params: {} as Record<string, string>, query: {} as Record<string, string> }));
 const routerMock = vi.hoisted(() => ({ push: vi.fn(), replace: vi.fn() }));

@@ -69,8 +69,9 @@ vi.mock("@/components/theme/ThemePreviewFrame.vue", () => ({
 }));
 vi.mock("@/views/cms/components/SiteConfigForm.vue", () => ({
    default: defineComponent({
-        props: ["modelValue", "groups", "showExtras", "siteId"],
-        methods: { validate: async () => true },
+        props: ["modelValue", "groups", "siteId"],
+        // 返工 #4 起 validate 契约：null=通过；失败返回首个错误文案
+        methods: { validate: async () => null, ownFields: () => ({}) },
        render: () => h("div", "config-form-stub"),
    }),
 }));
@@ -135,16 +136,15 @@ afterEach(() => {
    cleanups = [];
 });

-describe("SiteSetting 创建模式（site/new，向导退役收编）", () => {
-    it("③~⑦分区锁定（创建站点后开放×5），主按钮=创建站点", async () => {
+describe("SiteSetting 创建模式（docs/20 F1 渐进式向导）", () => {
+    it("第一步仅基本信息表单：无任何灰态锁定提示，主按钮=创建站点，下一步", async () => {
        const el = mountPage();
        await flush();

-        const tips = (el.textContent.match(/创建站点后开放/g) || []).length;
-        expect(tips).toBe(5);
+        expect(el.textContent).not.toContain("创建站点后开放");
        expect(el.textContent).toContain("新建站点");
-        const createBtn = [...el.querySelectorAll("button")].find(b => b.textContent?.includes("创建站点"));
-        expect(createBtn).toBeTruthy();
+        expect(el.textContent).toContain("创建站点，下一步");
+        expect(el.querySelector('input[placeholder="URL 路径用，如 demo"]')).toBeTruthy();
    });

    it("无上级时门户地址预览随编码联动（/portal/{code}/）", async () => {
@@ -179,7 +179,7 @@ describe("SiteSetting 创建模式（site/new，向导退役收编）", () => {
        expect(selectEl).toBeTruthy();
    });

-    it("创建成功：replace 到站点设置页并解锁分区", async () => {
+    it("创建成功：自动进入第二步（皮肤 Tab + Steps + 保存并完成），全 Tab 开放", async () => {
        const el = mountPage();
        await flush();

@@ -189,26 +189,34 @@ describe("SiteSetting 创建模式（site/new，向导退役收编）", () => {
        setInputValue(nameInput, "机械学院门户");
        await flush();

-        const createBtn = [...el.querySelectorAll("button")].find(b => b.textContent?.includes("创建站点"))!;
+        const createBtn = [...el.querySelectorAll("button")].find(b => b.textContent?.includes("创建站点，下一步"))!;
        createBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-        await flush();
+        await flush(10);

        expect(mocks.siteSave).toHaveBeenCalledTimes(1);
        const payload = mocks.siteSave.mock.calls[0][0];
        expect(payload.code).toBe("jdxy");
        expect(payload.name).toBe("机械学院门户");
        expect(routerMock.replace).toHaveBeenCalledWith("/sch/jdxy/site/setting/99");
+        // 向导第二步：Steps 可见 + 皮肤 Tab 激活 + 完成按钮；无灰态
+        expect(el.textContent).toContain("皮肤与外观");
+        expect(el.textContent).toContain("保存并完成");
+        expect(el.textContent).toContain("跳过，稍后配置");
+        expect(el.textContent).not.toContain("创建站点后开放");
    });
 });

-describe("SiteSetting 编辑模式（site/setting/:id）", () => {
-    it("基本信息回填 + 已注册皮肤无告警", async () => {
+describe("SiteSetting 编辑模式（site/setting/:id，docs/20 F1 7 Tab）", () => {
+    it("7 个 Tab 标题齐备（基本信息…自定义样式），基本信息回填，无灰态提示", async () => {
        routeMock.params = { id: "1" };
        const el = mountPage();
        await flush();

+        ["基本信息", "皮肤与外观", "首页布局", "基础展示", "页脚信息", "SEO 与域名", "自定义样式"].forEach(t =>
+            expect(el.textContent).toContain(t)
+        );
        expect(el.querySelector<HTMLInputElement>('input[placeholder="URL 路径用，如 demo"]')!.value).toBe("demo");
-        expect((el.textContent || "")).not.toContain("未在注册表中");
+        expect(el.textContent || "").not.toContain("未在注册表中");
        expect(el.textContent).toContain("云海大学门户网站");
        expect(el.textContent).not.toContain("创建站点后开放");
    });
@@ -223,7 +231,7 @@ describe("SiteSetting 编辑模式（site/setting/:id）", () => {
        expect(el.textContent).toContain("skin-x");
    });

-    it("仅保存基本信息：以当前 configJson 事实源全量提交（home_layout 等其他分区键随行）", async () => {
+    it("保存基本信息：以服务端事实源 configJson 提交（home_layout 等其他 Tab 键随行不丢）", async () => {
        routeMock.params = { id: "1" };
        const el = mountPage();
        await flush();
@@ -232,7 +240,7 @@ describe("SiteSetting 编辑模式（site/setting/:id）", () => {
        setInputValue(nameInput, "改名后的门户");
        await flush();

-        const saveBtn = [...el.querySelectorAll("button")].find(b => b.textContent?.includes("仅保存基本信息"))!;
+        const saveBtn = [...el.querySelectorAll("button")].find(b => b.textContent?.includes("保存基本信息"))!;
        saveBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
        await flush();

@@ -244,27 +252,21 @@ describe("SiteSetting 编辑模式（site/setting/:id）", () => {
        const config = JSON.parse(payload.configJson);
        expect(config.logo).toBe("/cms/upload/logo.png");
        expect(config.gallery_title).toBe("线上展厅"); // 被吸收旧键随事实源保留
-        expect(config.home_layout.blocks).toEqual([{ id: "b1", type: "links" }]); // 首页布局分区未动
+        expect(config.home_layout.blocks).toEqual([{ id: "b1", type: "links" }]); // 首页布局 Tab 未动
    });

-    it("T-T-05: 皮肤分区不再有参数微调区（只留选皮肤 + 站点级 CSS），保存不写 theme_params", async () => {
+    it("T-T-05: 皮肤 Tab 只留选皮肤（无参数微调），保存不写 theme_params", async () => {
        routeMock.params = { id: "1" };
        const el = mountPage();
        await flush();

-        const themeCard = el.querySelector('[data-section="theme"]')!;
-        expect(themeCard).toBeTruthy();
        // ThemeParamForm 已被桩化为 theme-param-stub：站点设置页不再出现该桩
-        expect(themeCard.textContent).not.toContain("theme-param-stub");
-        expect(themeCard.textContent).not.toContain("参数微调");
-        // 站点级 CSS 覆盖区保留（副标题文案 + textarea 编辑框）
-        expect(themeCard.textContent).toContain("站点级 CSS 覆盖");
-        expect(themeCard.querySelector("textarea")).toBeTruthy();
-        // v1 §三：站点只负责选哪套包（选皮肤仍在）
-        expect(themeCard.textContent).toContain("theme-picker-stub");
+        expect(el.textContent).not.toContain("theme-param-stub");
+        expect(el.textContent).not.toContain("参数微调");
+        expect(el.textContent).toContain("theme-picker-stub");

-        const saveBtn = [...themeCard.querySelectorAll("button")].find(b =>
-            b.textContent?.includes("仅保存皮肤与外观")
+        const saveBtn = [...el.querySelectorAll("button")].find(b =>
+            b.textContent?.includes("保存皮肤与外观")
        )!;
        saveBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
        await flush();
@@ -274,4 +276,55 @@ describe("SiteSetting 编辑模式（site/setting/:id）", () => {
        expect(config).not.toHaveProperty("theme_params"); // 参数值不再由站点提交
        expect(config.logo).toBe("/cms/upload/logo.png"); // 其余键仍随事实源保留
    });
+
+    it("F1：自定义样式为独立 Tab 的代码编辑器（textarea + 字符计数），非折叠面板", async () => {
+        routeMock.params = { id: "1" };
+        const el = mountPage();
+        await flush();
+
+        const cssTextarea = el.querySelector("textarea");
+        expect(cssTextarea).toBeTruthy();
+        expect(el.textContent).toContain("自定义样式");
+        expect(el.textContent).toContain("/10240 字符");
+        // 独立保存按钮
+        const cssSaveBtn = [...el.querySelectorAll("button")].find(b => b.textContent?.includes("保存自定义样式"))!;
+        expect(cssSaveBtn).toBeTruthy();
+
+        cssSaveBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        await flush();
+        expect(mocks.siteSave).toHaveBeenCalledTimes(1);
+        const config = JSON.parse(mocks.siteSave.mock.calls[0][0].configJson);
+        expect(config).not.toHaveProperty("custom_css"); // 空样式 = 删除键
+        expect(config.home_layout).toBeTruthy(); // 其他 Tab 键不受影响
+    });
+});
+
+describe("SiteSetting 假脏防护（docs/20 返工 #2）", () => {
+    it("冷加载不标脏：7 个 Tab 标题均无 ●（种值触发的 watcher 落在 seeding 窗口内）", async () => {
+        routeMock.params = { id: "1" };
+        const el = mountPage();
+        await flush();
+
+        const labels = Array.from(el.querySelectorAll(".ivu-tabs-tab")).map(t => t.textContent!.trim());
+        expect(labels.length).toBe(7);
+        labels.forEach(t => expect(t.includes("●")).toBe(false));
+    });
+
+    it("真实编辑才标脏：改站点名称 → 基本信息 ●；保存成功后 ● 消失", async () => {
+        routeMock.params = { id: "1" };
+        const el = mountPage();
+        await flush();
+        const labels = () => Array.from(el.querySelectorAll(".ivu-tabs-tab")).map(t => t.textContent!.trim());
+
+        const nameInput = el.querySelector<HTMLInputElement>('input[placeholder="如 XX学校门户网站"]')!;
+        setInputValue(nameInput, "改名后的门户");
+        await flush();
+        expect(labels().find(t => t.includes("基本信息"))!.includes("●")).toBe(true);
+
+        const saveBtn = [...el.querySelectorAll("button")].find(b => b.textContent?.includes("保存基本信息"))!;
+        saveBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        await flush();
+        expect(mocks.siteSave).toHaveBeenCalledTimes(1);
+        expect(labels().find(t => t.includes("基本信息"))!.includes("●")).toBe(false);
+    });
 });
@@ -0,0 +1,107 @@
+// @vitest-environment jsdom
+/**
+ * F5（docs/20）页脚/基础展示视觉位置示意：
+ * ① 页脚分组底部渲染 FooterPreview 结构示意图（六处位置标注，已填内容回显）；
+ * ② asset 字段的 aspect 占位框（favicon 1:1 / 二维码 4:3，无值虚线框、有值比例预览）。
+ */
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+import ViewUIPlus from "view-ui-plus";
+
+vi.mock("@/api/module/cms", () => ({
+    assetUrl: (u: string) => u,
+    uploadUrl: () => "/api/attachment/upload",
+}));
+
+import SiteConfigForm from "@/views/cms/components/SiteConfigForm.vue";
+
+const cleanups: (() => void)[] = [];
+async function settle(frames = 4) {
+    for (let i = 0; i < frames; i++) {
+        await nextTick();
+    }
+    await new Promise(r => setTimeout(r, 0));
+    await nextTick();
+}
+
+const FOOTER_CONFIG = JSON.stringify({
+    contact: "电话 0571-88888888",
+    footer_addresses: "潭山校区：南湖路 237 号\n淮河校区：大学路 1 号",
+    qr_wechat: "/cms/upload/qr-wechat.png",
+    social_weibo: "https://weibo.com/xxx",
+    copyright: "XX学校 · 版权所有 © 2026",
+    beian: "浙ICP备XXXXXXXX号-1",
+    logo: "/cms/upload/logo.png",
+});
+
+async function mountForm(configJson: string, groups?: string[]) {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    const model = ref(configJson);
+    const app = createApp(
+        defineComponent({
+            render: () =>
+                h(SiteConfigForm, {
+                    modelValue: model.value,
+                    groups,
+                    "onUpdate:modelValue": (v: string) => (model.value = v),
+                }),
+        }),
+    );
+    app.use(ViewUIPlus);
+    app.mount(el);
+    cleanups.push(() => {
+        app.unmount();
+        el.remove();
+    });
+    await settle();
+    return el;
+}
+
+afterEach(() => {
+    cleanups.splice(0).forEach(fn => fn());
+});
+
+describe("F5 视觉位置示意（docs/20）", () => {
+    it("页脚分组：底部渲染结构示意图，六处位置标注 + 已填内容回显", async () => {
+        const el = await mountForm(FOOTER_CONFIG, ["footer"]);
+        const preview = el.querySelector(".footer-preview")!;
+        expect(preview).toBeTruthy();
+        const text = preview.textContent || "";
+        // 已填字段实时回显内容（而非占位标注）
+        expect(text).toContain("电话 0571-88888888");
+        expect(text).toContain("潭山校区：南湖路 237 号");
+        expect(text).toContain("XX学校 · 版权所有 © 2026");
+        expect(text).toContain("浙ICP备XXXXXXXX号-1");
+        expect(preview.querySelector('img[src="/cms/upload/qr-wechat.png"]')).toBeTruthy();
+        // 未填字段显示位置标注（微博二维码空 → 占位）
+        expect(text).toContain("微博二维码");
+        expect(text).toContain("社媒图标行");
+    });
+
+    it("页脚全空配置：六处位置标注完整（① 联系方式/② 地址/③ 二维码/④ 社媒/⑤ 版权/⑥ 备案）", async () => {
+        const el = await mountForm("{}", ["footer"]);
+        const text = el.querySelector(".footer-preview")!.textContent || "";
+        expect(text).toContain("① 联系方式");
+        expect(text).toContain("② 多校区地址");
+        expect(text).toContain("微信二维码");
+        expect(text).toContain("③ 4:3");
+        expect(text).toContain("④ 社媒图标行");
+        expect(text).toContain("⑤ 版权文字");
+        expect(text).toContain("⑥ 备案号");
+    });
+
+    it("基础展示分组：无示意图（仅页脚有）", async () => {
+        const el = await mountForm(FOOTER_CONFIG, ["display"]);
+        expect(el.querySelector(".footer-preview")).toBeFalsy();
+    });
+
+    it("aspect 占位框：二维码无值时 4:3 虚线占位、favicon 无值时 1:1 占位", async () => {
+        const el = await mountForm("{}", ["display", "footer"]);
+        const holders = el.querySelectorAll(".iaf-holder");
+        expect(holders.length).toBe(3); // favicon 1:1 + 微信/微博 4:3
+        expect(el.querySelector(".iaf-holder-1x1")).toBeTruthy();
+        expect(el.querySelectorAll(".iaf-holder-4x3").length).toBe(2);
+        expect(holders[0].textContent).toContain("1:1");
+    });
+});
@@ -8,21 +8,34 @@ import { resolveEditableTheme } from "@/utils/themeEdit";
 */
 describe("resolveEditableTheme 站点编辑主题归一（任务三）", () => {
    it("注册中的主题原值保留且不告警", () => {
-        expect(resolveEditableTheme("mint-breeze", ["default", "mint-breeze"])).toEqual({
-            theme: "mint-breeze",
+        expect(resolveEditableTheme("scholar-blue", ["default", "scholar-blue"])).toEqual({
+            theme: "scholar-blue",
            unregistered: false,
        });
    });

+    it("docs/20 E：下架主题解析为保留主题 + colorScheme 预设（不误报未注册）", () => {
+        expect(resolveEditableTheme("classic-red", ["default", "scholar-blue", "campus-glow"])).toEqual({
+            theme: "default",
+            unregistered: false,
+            aliasColorScheme: "classic-red",
+        });
+        expect(resolveEditableTheme("poly-blue", ["default", "scholar-blue", "campus-glow"])).toEqual({
+            theme: "scholar-blue",
+            unregistered: false,
+            aliasColorScheme: "poly",
+        });
+    });
+
    it("未注册主题保留原值并标记 unregistered（不再归一 default）", () => {
-        expect(resolveEditableTheme("ghost-theme", ["default", "mint-breeze"])).toEqual({
+        expect(resolveEditableTheme("ghost-theme", ["default", "scholar-blue"])).toEqual({
            theme: "ghost-theme",
            unregistered: true,
        });
    });

    it("空主题归一 default（站点未选过皮肤的场景）", () => {
-        expect(resolveEditableTheme(undefined, ["default", "mint-breeze"])).toEqual({
+        expect(resolveEditableTheme(undefined, ["default", "scholar-blue"])).toEqual({
            theme: "default",
            unregistered: false,
        });
@@ -14,6 +14,7 @@ import {
    DeleteRequest,
    LinkVo,
    PageResult,
+    PersonVo,
    SchoolCard,
    SchoolOption,
    SiteVo,
@@ -34,6 +35,7 @@ const ARTICLE = "/api/article";
 const ATTACHMENT = "/api/attachment";
 const BANNER = "/api/banner";
 const LINK = "/api/link";
+const PERSON = "/api/person";
 const THEME = "/api/theme";

 /** GET（query 参数） */
@@ -208,6 +210,21 @@ class LinkApi {
    }
 }

+/** 名师风采人物（docs/20 D-7） */
+class PersonApi {
+    list(siteId: number) {
+        return get<PersonVo[]>(`${PERSON}/list`, { siteId });
+    }
+
+    save(data: Partial<PersonVo>) {
+        return postJSON<PersonVo>(`${PERSON}/save`, data);
+    }
+
+    delete(data: DeleteRequest) {
+        return postJSON<void>(`${PERSON}/delete`, data);
+    }
+}
+
 class ThemeApi {
    /** 可用主题列表（含 params schema，建站向导/站点编辑共用，方案 §5.2） */
    list() {
@@ -271,6 +288,7 @@ export const categoryApi = new CategoryApi();
 export const articleApi = new ArticleApi();
 export const attachmentApi = new AttachmentApi();
 export const bannerApi = new BannerApi();
+export const personApi = new PersonApi();
 export const linkApi = new LinkApi();
 export const themeApi = new ThemeApi();

@@ -283,6 +301,7 @@ export default {
    articleApi,
    attachmentApi,
    bannerApi,
+    personApi,
    linkApi,
    themeApi,
    uploadUrl,
@@ -159,11 +159,12 @@ html.side-plain{--strip-bg:linear-gradient(180deg,#f2f4f8 0,#fff 100%)}
 .layout-wrap .path-nav .ivu-breadcrumb a:hover{color:var(--brand)}
 .layout-wrap .path-nav .crumb-home{color:var(--brand)}
 .layout-wrap .path-nav .ivu-breadcrumb-item-separator{color:#ccd4e0}
-/* 定稿：不再画独立 3px 横杠——顶部 3px 由接缝条承接顶栏渐变；子站让位身份橙 */
+/* 定稿：不再画独立 3px 横杠——顶部 3px 由接缝条承接顶栏渐变。
+   v3：站点身份已由页头「学校名.站点名」承担，原先 band-sub 让位身份橙的覆盖已删，
+   否则子站态上面包屑顶部常驻一条橙色横杠，与页头身份重复，且被误读成边框。 */
 .layout-wrap .path-nav::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--topbar-bg);z-index:1;
 }
-.layout-wrap .path-nav.band-sub::before{background:#ff9900}
 .layout-wrap .path-nav::after{display:none}

 /* ---- 内容区：灰底 + 白卡 ---- */
@@ -0,0 +1,252 @@
+<script setup lang="ts">
+/**
+ * 区块类型缩略示意图（docs/20 F2 / R-40）：添加抽屉类型卡 + 属性面板形态 RadioCard 共用。
+ * 纯内联 SVG 线框示意（本地资产，无外部 CDN——皮肤包契约红线仅约束门户，管理端同样不引）；
+ * 每种 type/variant 一幅极简骨架图，新组件类型 = 在 THUMBS 补一支绘制函数（注册表驱动配套）。
+ */
+const props = withDefaults(
+    defineProps<{
+        /** 区块类型（BLOCK_TYPES.type） */
+        type: string;
+        /** article_list 展示形态（style），其余类型忽略 */
+        variant?: string;
+    }>(),
+    { variant: "" },
+);
+
+/** 图底色板（示意线框用，与皮肤无关） */
+const C = {
+    band: "#dce6f5",
+    block: "#e8eef8",
+    strong: "#9db8e0",
+    text: "#c3cfe2",
+    accent: "#5b8dd9",
+};
+</script>
+
+<template>
+    <svg class="block-type-thumb" viewBox="0 0 120 64" preserveAspectRatio="xMidYMid meet" role="img" aria-hidden="true">
+        <!-- article_list 五形态 -->
+        <template v-if="type === 'article_list'">
+            <!-- card：头条图 + 摘要 + 行列表 -->
+            <template v-if="variant === 'card' || !variant">
+                <rect x="6" y="6" width="34" height="22" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+                <rect x="45" y="9" width="44" height="5" rx="1.5" :fill="C.strong" />
+                <rect x="45" y="18" width="66" height="3" rx="1.5" :fill="C.text" />
+                <rect x="45" y="24" width="56" height="3" rx="1.5" :fill="C.text" />
+                <rect x="6" y="34" width="108" height="3" rx="1.5" :fill="C.text" />
+                <rect x="6" y="42" width="100" height="3" rx="1.5" :fill="C.text" />
+                <rect x="6" y="50" width="104" height="3" rx="1.5" :fill="C.text" />
+                <rect x="6" y="58" width="92" height="3" rx="1.5" :fill="C.text" />
+            </template>
+            <!-- news_grid：色带底 + 双栏行 -->
+            <template v-else-if="variant === 'news_grid'">
+                <rect x="0" y="0" width="120" height="64" :fill="C.band" />
+                <rect x="8" y="8" width="104" height="48" rx="2" fill="#ffffff" />
+                <rect x="14" y="14" width="40" height="4" rx="2" :fill="C.accent" />
+                <rect x="14" y="26" width="42" height="3" rx="1.5" :fill="C.text" />
+                <rect x="14" y="34" width="38" height="3" rx="1.5" :fill="C.text" />
+                <rect x="14" y="42" width="40" height="3" rx="1.5" :fill="C.text" />
+                <rect x="64" y="26" width="42" height="3" rx="1.5" :fill="C.text" />
+                <rect x="64" y="34" width="38" height="3" rx="1.5" :fill="C.text" />
+                <rect x="64" y="42" width="40" height="3" rx="1.5" :fill="C.text" />
+            </template>
+            <!-- media_focus：来源徽标 + 行 -->
+            <template v-else-if="variant === 'media_focus'">
+                <rect x="6" y="8" width="24" height="8" rx="2" :fill="C.accent" />
+                <rect x="36" y="11" width="60" height="3" rx="1.5" :fill="C.strong" />
+                <rect x="6" y="24" width="20" height="8" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+                <rect x="32" y="27" width="70" height="3" rx="1.5" :fill="C.text" />
+                <rect x="6" y="40" width="18" height="8" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+                <rect x="30" y="43" width="64" height="3" rx="1.5" :fill="C.text" />
+                <rect x="6" y="54" width="34" height="4" rx="1.5" :fill="C.band" />
+            </template>
+            <!-- compact：纯文字行 -->
+            <template v-else-if="variant === 'compact'">
+                <rect x="8" y="10" width="8" height="3" rx="1.5" :fill="C.accent" />
+                <rect x="20" y="10" width="84" height="3" rx="1.5" :fill="C.text" />
+                <rect x="8" y="21" width="8" height="3" rx="1.5" :fill="C.accent" />
+                <rect x="20" y="21" width="76" height="3" rx="1.5" :fill="C.text" />
+                <rect x="8" y="32" width="8" height="3" rx="1.5" :fill="C.accent" />
+                <rect x="20" y="32" width="88" height="3" rx="1.5" :fill="C.text" />
+                <rect x="8" y="43" width="8" height="3" rx="1.5" :fill="C.accent" />
+                <rect x="20" y="43" width="72" height="3" rx="1.5" :fill="C.text" />
+                <rect x="8" y="54" width="8" height="3" rx="1.5" :fill="C.accent" />
+                <rect x="20" y="54" width="80" height="3" rx="1.5" :fill="C.text" />
+            </template>
+            <!-- image_wall：图片格阵 -->
+            <template v-else-if="variant === 'image_wall'">
+                <rect x="6" y="8" width="24" height="20" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+                <rect x="35" y="8" width="24" height="20" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+                <rect x="64" y="8" width="24" height="20" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+                <rect x="93" y="8" width="21" height="20" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+                <rect x="6" y="34" width="24" height="20" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+                <rect x="35" y="34" width="24" height="20" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+                <rect x="64" y="34" width="24" height="20" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+                <rect x="93" y="34" width="21" height="20" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            </template>
+        </template>
+
+        <!-- ticker：横条 + 滚动标题 -->
+        <template v-else-if="type === 'ticker'">
+            <rect x="0" y="20" width="120" height="24" :fill="C.accent" />
+            <rect x="6" y="28" width="26" height="8" rx="2" fill="#ffffff" opacity="0.9" />
+            <rect x="38" y="30" width="34" height="4" rx="2" fill="#ffffff" opacity="0.75" />
+            <rect x="78" y="30" width="30" height="4" rx="2" fill="#ffffff" opacity="0.6" />
+        </template>
+
+        <!-- gallery：居中标题 + 图墙 -->
+        <template v-else-if="type === 'gallery'">
+            <rect x="46" y="4" width="28" height="5" rx="2" :fill="C.strong" />
+            <rect x="38" y="11" width="44" height="2.5" rx="1.25" :fill="C.text" />
+            <rect x="8" y="20" width="24" height="18" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="37" y="20" width="24" height="18" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="66" y="20" width="24" height="18" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="95" y="20" width="19" height="18" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="8" y="44" width="24" height="16" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="37" y="44" width="24" height="16" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="66" y="44" width="24" height="16" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="95" y="44" width="19" height="16" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+        </template>
+
+        <!-- links：胶囊按钮行 -->
+        <template v-else-if="type === 'links'">
+            <rect x="46" y="6" width="28" height="5" rx="2" :fill="C.strong" />
+            <rect x="10" y="22" width="22" height="12" rx="6" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="38" y="22" width="22" height="12" rx="6" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="66" y="22" width="22" height="12" rx="6" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="94" y="22" width="18" height="12" rx="6" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="24" y="42" width="22" height="12" rx="6" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="52" y="42" width="22" height="12" rx="6" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="80" y="42" width="22" height="12" rx="6" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+        </template>
+
+        <!-- quick_links：图标宫格 -->
+        <template v-else-if="type === 'quick_links'">
+            <circle cx="26" cy="16" r="9" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
+            <rect x="18" y="29" width="16" height="3" rx="1.5" :fill="C.text" />
+            <circle cx="60" cy="16" r="9" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
+            <rect x="52" y="29" width="16" height="3" rx="1.5" :fill="C.text" />
+            <circle cx="94" cy="16" r="9" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
+            <rect x="86" y="29" width="16" height="3" rx="1.5" :fill="C.text" />
+            <circle cx="26" cy="46" r="9" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
+            <rect x="18" y="59" width="16" height="3" rx="1.5" :fill="C.text" />
+            <circle cx="60" cy="46" r="9" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
+            <rect x="52" y="59" width="16" height="3" rx="1.5" :fill="C.text" />
+            <circle cx="94" cy="46" r="9" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
+            <rect x="86" y="59" width="16" height="3" rx="1.5" :fill="C.text" />
+        </template>
+
+        <!-- notice_bar：通栏提示条 -->
+        <template v-else-if="type === 'notice_bar'">
+            <rect x="0" y="22" width="120" height="20" :fill="C.band" />
+            <rect x="0" y="22" width="120" height="1" :fill="C.strong" />
+            <rect x="0" y="41" width="120" height="1" :fill="C.strong" />
+            <rect x="8" y="29" width="20" height="6" rx="2" :fill="C.accent" />
+            <rect x="34" y="31" width="70" height="3" rx="1.5" :fill="C.strong" />
+        </template>
+
+        <!-- D 系新组件（docs/20 D-1~D-9）：D 步上线时同步补绘 -->
+        <!-- D-1 stats_band：大数字横排 -->
+        <template v-else-if="type === 'stats_band'">
+            <rect x="0" y="10" width="120" height="44" :fill="C.band" />
+            <text x="24" y="34" font-size="13" font-weight="700" :fill="C.accent">3.2万</text>
+            <rect x="20" y="40" width="24" height="3" rx="1.5" :fill="C.text" />
+            <text x="60" y="34" font-size="13" font-weight="700" :fill="C.accent">2800</text>
+            <rect x="56" y="40" width="24" height="3" rx="1.5" :fill="C.text" />
+            <text x="94" y="34" font-size="13" font-weight="700" :fill="C.accent">12</text>
+            <rect x="90" y="40" width="24" height="3" rx="1.5" :fill="C.text" />
+        </template>
+        <!-- D-2 icon_nav：六边形图标阵 -->
+        <template v-else-if="type === 'icon_nav'">
+            <polygon points="26,6 38,13 38,27 26,34 14,27 14,13" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
+            <rect x="16" y="39" width="20" height="3" rx="1.5" :fill="C.text" />
+            <polygon points="60,6 72,13 72,27 60,34 48,27 48,13" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
+            <rect x="50" y="39" width="20" height="3" rx="1.5" :fill="C.text" />
+            <polygon points="94,6 106,13 106,27 94,34 82,27 82,13" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
+            <rect x="84" y="39" width="20" height="3" rx="1.5" :fill="C.text" />
+            <polygon points="26,46 38,53 38,67 26,74 14,67 14,53" transform="translate(0,-12)" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
+            <rect x="16" y="61" width="20" height="3" rx="1.5" :fill="C.text" />
+            <polygon points="60,46 72,53 72,67 60,74 48,67 48,53" transform="translate(0,-12)" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
+            <rect x="50" y="61" width="20" height="3" rx="1.5" :fill="C.text" />
+            <polygon points="94,46 106,53 106,67 94,74 82,67 82,53" transform="translate(0,-12)" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
+            <rect x="84" y="61" width="20" height="3" rx="1.5" :fill="C.text" />
+        </template>
+        <!-- D-3 featured_topics：专题大卡 -->
+        <template v-else-if="type === 'featured_topics'">
+            <rect x="6" y="8" width="52" height="48" rx="3" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="12" y="40" width="30" height="4" rx="2" fill="#ffffff" />
+            <rect x="12" y="48" width="18" height="4" rx="2" :fill="C.accent" />
+            <rect x="62" y="8" width="52" height="48" rx="3" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="68" y="40" width="30" height="4" rx="2" fill="#ffffff" />
+            <rect x="68" y="48" width="18" height="4" rx="2" :fill="C.accent" />
+        </template>
+        <!-- D-5 video_tour：视频封面 + 播放键 -->
+        <template v-else-if="type === 'video_tour'">
+            <rect x="6" y="8" width="108" height="48" rx="3" :fill="C.band" />
+            <circle cx="60" cy="32" r="12" fill="#ffffff" opacity="0.9" />
+            <polygon points="56,25 70,32 56,39" :fill="C.accent" />
+        </template>
+        <!-- D-6 events：大日期块 + 活动列表 -->
+        <template v-else-if="type === 'events'">
+            <rect x="6" y="8" width="26" height="26" rx="2" :fill="C.accent" />
+            <rect x="10" y="13" width="18" height="5" rx="1.5" fill="#ffffff" opacity="0.9" />
+            <rect x="38" y="12" width="50" height="4" rx="2" :fill="C.strong" />
+            <rect x="38" y="21" width="66" height="3" rx="1.5" :fill="C.text" />
+            <rect x="6" y="40" width="26" height="20" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="38" y="44" width="50" height="4" rx="2" :fill="C.strong" />
+            <rect x="38" y="53" width="66" height="3" rx="1.5" :fill="C.text" />
+        </template>
+        <!-- D-7 people：圆头像卡 -->
+        <template v-else-if="type === 'people'">
+            <circle cx="24" cy="24" r="14" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
+            <rect x="12" y="43" width="24" height="4" rx="2" :fill="C.strong" />
+            <rect x="14" y="51" width="20" height="3" rx="1.5" :fill="C.text" />
+            <circle cx="60" cy="24" r="14" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
+            <rect x="48" y="43" width="24" height="4" rx="2" :fill="C.strong" />
+            <rect x="50" y="51" width="20" height="3" rx="1.5" :fill="C.text" />
+            <circle cx="96" cy="24" r="14" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
+            <rect x="84" y="43" width="24" height="4" rx="2" :fill="C.strong" />
+            <rect x="86" y="51" width="20" height="3" rx="1.5" :fill="C.text" />
+        </template>
+        <!-- D-8 campus_wall：瀑布流（错落图） -->
+        <template v-else-if="type === 'campus_wall'">
+            <rect x="8" y="6" width="24" height="28" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="37" y="6" width="24" height="18" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="66" y="6" width="24" height="32" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="95" y="6" width="19" height="22" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="8" y="40" width="24" height="18" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="37" y="30" width="24" height="28" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="66" y="44" width="24" height="14" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+            <rect x="95" y="34" width="19" height="24" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
+        </template>
+        <!-- D-9 badges：徽章横排 -->
+        <template v-else-if="type === 'badges'">
+            <circle cx="26" cy="26" r="15" :fill="C.band" :stroke="C.accent" stroke-width="1.2" />
+            <rect x="18" y="46" width="16" height="3" rx="1.5" :fill="C.text" />
+            <circle cx="60" cy="26" r="15" :fill="C.band" :stroke="C.accent" stroke-width="1.2" />
+            <rect x="52" y="46" width="16" height="3" rx="1.5" :fill="C.text" />
+            <circle cx="94" cy="26" r="15" :fill="C.band" :stroke="C.accent" stroke-width="1.2" />
+            <rect x="86" y="46" width="16" height="3" rx="1.5" :fill="C.text" />
+        </template>
+
+        <!-- 兜底：区块头 + 行 -->
+        <template v-else>
+            <rect x="8" y="8" width="32" height="5" rx="2" :fill="C.strong" />
+            <rect x="8" y="22" width="104" height="3" rx="1.5" :fill="C.text" />
+            <rect x="8" y="32" width="96" height="3" rx="1.5" :fill="C.text" />
+            <rect x="8" y="42" width="100" height="3" rx="1.5" :fill="C.text" />
+            <rect x="8" y="52" width="88" height="3" rx="1.5" :fill="C.text" />
+        </template>
+    </svg>
+</template>
+
+<style scoped lang="scss">
+.block-type-thumb {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: #fbfcfe;
+    border-radius: 4px;
+}
+</style>
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { assetUrl } from "@/api/module/cms";
+/**
+ * F5（docs/20）页脚结构示意图：页脚 Tab 内的固定示意图，标注各字段在门户页脚中的视觉位置——
+ * 品牌区（站名+联系方式+多校区地址行）/ 二维码区（微信+微博，4:3）/ 社媒图标行 / 版权备案行。
+ * 已填字段实时回显内容（填完即知页脚长什么样）；空字段以灰字占位标注。
+ */
+const props = defineProps<{
+    contact?: string;
+    footerAddresses?: string;
+    qrWechat?: string;
+    qrWeibo?: string;
+    socials?: { label: string; value?: string }[];
+    copyright?: string;
+    beian?: string;
+}>();
+
+const addressLines = (props.footerAddresses || "")
+    .split(/\r?\n/)
+    .map(l => l.trim())
+    .filter(Boolean)
+    .slice(0, 3);
+</script>
+
+<template>
+    <div class="footer-preview">
+        <div class="fp-caption">页脚结构示意（下图与字段一一对应，已填内容实时回显）</div>
+        <div class="fp-frame" role="img" aria-label="页脚结构示意图">
+            <div class="fp-brand">
+                <div class="fp-logo">
+                    <span class="fp-logo-mark">LOGO</span>
+                    <span class="fp-site">XX学校</span>
+                </div>
+                <p class="fp-line" :class="{ filled: contact }">
+                    {{ contact || "① 联系方式（页脚品牌区）" }}
+                </p>
+                <p v-for="(l, i) in addressLines" :key="i" class="fp-line small filled">{{ l }}</p>
+                <p v-if="!addressLines.length" class="fp-line small">② 多校区地址（每行一个校区）</p>
+            </div>
+            <div class="fp-qr">
+                <div class="fp-qr-box">
+                    <img v-if="qrWechat" :src="assetUrl(qrWechat)" alt="微信二维码预览" />
+                    <span v-else>微信二维码<br />③ 4:3</span>
+                </div>
+                <div class="fp-qr-box">
+                    <img v-if="qrWeibo" :src="assetUrl(qrWeibo)" alt="微博二维码预览" />
+                    <span v-else>微博二维码<br />③ 4:3</span>
+                </div>
+            </div>
+            <div class="fp-social">
+                <span class="fp-social-label">④ 社媒图标行：</span>
+                <span v-for="s in socials" :key="s.label" class="fp-social-item" :class="{ on: s.value }">
+                    {{ s.label }}
+                </span>
+            </div>
+            <div class="fp-bottom">
+                <span :class="{ filled: copyright }">{{ copyright || "⑤ 版权文字" }}</span>
+                <span :class="{ filled: beian }" class="fp-beian">{{ beian || "⑥ 备案号" }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.footer-preview {
+    margin-top: 6px;
+    .fp-caption {
+        color: #8a93a6;
+        font-size: 12px;
+        margin-bottom: 8px;
+    }
+    .fp-frame {
+        border: 1px solid #e9edf5;
+        border-radius: 8px;
+        background: linear-gradient(180deg, #1f3a5f 0%, #16294a 100%);
+        color: rgba(255, 255, 255, 0.5);
+        padding: 18px 22px 12px;
+        display: grid;
+        grid-template-columns: 1fr auto;
+        gap: 10px 18px;
+        font-size: 12px;
+        line-height: 1.7;
+        .fp-brand {
+            .fp-logo {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                margin-bottom: 6px;
+                .fp-logo-mark {
+                    border: 1px dashed rgba(255, 255, 255, 0.35);
+                    border-radius: 4px;
+                    padding: 2px 8px;
+                    font-size: 11px;
+                }
+                .fp-site {
+                    color: rgba(255, 255, 255, 0.75);
+                    font-weight: 600;
+                }
+            }
+            .fp-line {
+                margin: 2px 0;
+                &.small {
+                    font-size: 11px;
+                    opacity: 0.9;
+                }
+                &.filled {
+                    color: #fff;
+                }
+            }
+        }
+        .fp-qr {
+            display: flex;
+            gap: 12px;
+            align-items: flex-start;
+            .fp-qr-box {
+                width: 84px;
+                height: 63px;
+                border: 1px dashed rgba(255, 255, 255, 0.4);
+                border-radius: 6px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                text-align: center;
+                font-size: 10px;
+                position: relative;
+                overflow: hidden;
+                img {
+                    max-width: 100%;
+                    max-height: 100%;
+                    object-fit: contain;
+                }
+            }
+        }
+        .fp-social {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            flex-wrap: wrap;
+            .fp-social-label {
+                color: rgba(255, 255, 255, 0.45);
+            }
+            .fp-social-item {
+                border: 1px solid rgba(255, 255, 255, 0.3);
+                border-radius: 12px;
+                padding: 1px 10px;
+                font-size: 11px;
+                opacity: 0.55;
+                &.on {
+                    opacity: 1;
+                    border-color: rgba(255, 255, 255, 0.85);
+                    color: #fff;
+                }
+            }
+        }
+        .fp-bottom {
+            grid-column: 1 / -1;
+            border-top: 1px solid rgba(255, 255, 255, 0.15);
+            padding-top: 8px;
+            display: flex;
+            justify-content: space-between;
+            gap: 12px;
+            flex-wrap: wrap;
+            font-size: 11px;
+            .filled {
+                color: rgba(255, 255, 255, 0.85);
+            }
+        }
+    }
+}
+</style>
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+/**
+ * D-2（docs/20）内置图标选择器：图标网格预览 + 点选即绑定图标标识符（§3.3 定案 2 综合方案 A+C）。
+ * 数据源 icons.ts（与门户骨架 fragment 同 key）；再次点击已选图标 = 清除（回 null = 首字徽章兜底）。
+ */
+import { ICON_DEFS } from "@/views/cms/homeLayout/icons";
+
+const model = defineModel<string | null>("modelValue", { default: null });
+
+function pick(key: string) {
+    model.value = model.value === key ? null : key;
+}
+</script>
+
+<template>
+    <div class="icon-grid">
+        <button
+            v-for="icon in ICON_DEFS"
+            :key="icon.key"
+            type="button"
+            class="icon-cell"
+            :class="{ active: model === icon.key }"
+            :title="`${icon.label}（${icon.key}）`"
+            @click="pick(icon.key)"
+        >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
+                 stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path v-for="(d, i) in icon.paths" :key="i" :d="d" />
+            </svg>
+            <span class="icon-name">{{ icon.label }}</span>
+        </button>
+        <p class="icon-tip">未选图标时入口渲染「名称首字徽章」；再次点击已选图标可清除</p>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.icon-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 6px;
+    .icon-cell {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 3px;
+        border: 1px solid #e2e8f2;
+        border-radius: 6px;
+        background: #fff;
+        padding: 7px 2px 5px;
+        cursor: pointer;
+        color: #515a6e;
+        transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
+        &:hover {
+            border-color: #5cadff;
+            color: #2d8cf0;
+        }
+        &.active {
+            border-color: #2d8cf0;
+            color: #2d8cf0;
+            box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.12);
+        }
+        svg {
+            width: 22px;
+            height: 22px;
+        }
+        .icon-name {
+            font-size: 11px;
+            line-height: 1.2;
+        }
+    }
+    .icon-tip {
+        grid-column: 1 / -1;
+        color: #999;
+        font-size: 12px;
+        margin: 4px 0 0;
+    }
+}
+</style>
@@ -15,6 +15,9 @@ const props = defineProps<{
    /** 附件场景（空=不带 scene；svc 场景已迁办事大厅，CMS 内为 article/banner 等） */
    scene?: string;
    placeholder?: string;
+    /** F5（docs/20）：预览/占位框比例（"1:1" favicon / "4:3" 二维码；缺省 8:5 通用横图），
+     *  无值时按比例显示虚线占位框，帮助确认最终在门户中的尺寸感 */
+    aspect?: "1:1" | "4:3";
 }>();
 const emit = defineEmits<{ (e: "update:modelValue", v: string): void }>();

@@ -76,12 +79,16 @@ function clearValue() {
            >
                <Button size="small" icon="ios-cloud-upload-outline" :loading="uploading">上传图片</Button>
            </Upload>
-            <span v-else class="iaf-thumb">
+            <span v-else class="iaf-thumb" :class="aspect ? 'iaf-thumb-' + aspect.replace(':', 'x') : ''">
                <img :src="previewSrc" alt="" />
                <span class="iaf-thumb-del" title="清除" @click="clearValue">
                    <Icon type="ios-close" />
                </span>
            </span>
+            <!-- F5：无值时按字段比例显示虚线占位框（尺寸感示意） -->
+            <span v-if="!modelValue && aspect" class="iaf-holder" :class="'iaf-holder-' + aspect!.replace(':', 'x')">
+                {{ aspect }} 位
+            </span>
            <Button size="small" type="text" class="iaf-toggle" @click="manualOpen = !manualOpen">
                {{ manualOpen ? "收起" : "手动粘贴路径" }}
            </Button>
@@ -123,6 +130,16 @@ function clearValue() {
            border: 1px solid #dcdee2;
            background: #f8f8f9;
        }
+        &.iaf-thumb-1x1 img {
+            width: 48px;
+            height: 48px;
+            object-fit: contain;
+        }
+        &.iaf-thumb-4x3 img {
+            width: 88px;
+            height: 66px;
+            object-fit: contain;
+        }
        .iaf-thumb-del {
            position: absolute;
            top: -7px;
@@ -142,6 +159,24 @@ function clearValue() {
            display: block;
        }
    }
+    .iaf-holder {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px dashed #cfd8e6;
+        border-radius: 4px;
+        color: #b4bfce;
+        font-size: 11px;
+        background: #fafbfd;
+        &.iaf-holder-1x1 {
+            width: 48px;
+            height: 48px;
+        }
+        &.iaf-holder-4x3 {
+            width: 88px;
+            height: 66px;
+        }
+    }
    .iaf-manual {
        max-width: 420px;
        margin-top: 6px;
@@ -42,9 +42,34 @@ const pathNavStyle = computed(() => (isAlone.value ? { left: "0", width: "100%"
 const school = computed(() => store.currentSchool);
 const isSuper = computed(() => store.isSuperAdmin);

-/** 当前落点是否院系子站（store 契约）：决定身份条徽章与底边色带 */
+/** 当前落点是否院系子站（store 契约）：决定身份条徽章、侧栏/面包屑身份色带与页头站点名（v2 §C.3 #2/#3） */
 const isSubSite = computed(() => store.isSubSite);
-const pathNavClass = computed(() => (isSubSite.value ? "band-sub" : "band-main"));
+/** 身份档位类：同名类挂在 .left-menu 与 .path-nav 两处壳层节点，主站不染色（默认为主站、偏离才提示） */
+const identityClass = computed(() => (isSubSite.value ? "band-sub" : "band-main"));
+
+/* 页头身份（docs/22 v3）：学校名.站点名 —— 一处文字同时回答「哪个学校 + 哪个站点」。
+   子站取站点名（云海大学.机电学院），主站固定写「主站」（云海大学.主站）；
+   沿用既有 .shell-site 胶囊语汇（band-sub 橙 / band-main 中性白），不引新色值。 */
+const siteName = computed(() => store.currentSite?.name || "");
+const schoolName = computed(() => school.value?.schName || school.value?.mainSiteName || "");
+/** 页头站点档位文案：主站不写站全名（会很长），统一「主站」 */
+const siteLabel = computed(() => (isSubSite.value ? siteName.value : "主站"));
+/** 完整身份串：学校名.站点名（学校未就绪时退化为站点名） */
+const identityText = computed(() => {
+    const label = siteLabel.value;
+    if (!label) return "";
+    return schoolName.value ? `${schoolName.value}.${label}` : label;
+});
+const shellTitle = computed(() =>
+    identityText.value ? `${appName.value} · ${identityText.value}` : appName.value
+);
+const docTitle = computed(() => {
+    const t = String((route.meta as any)?.title || "");
+    // 多标签页可分辨：文档标题同样带「学校名.站点名」，与页头口径一致
+    if (!identityText.value) return t;
+    return t ? `${t} · ${identityText.value}` : identityText.value;
+});
+watch(docTitle, v => { if (v) document.title = v; }, { immediate: true });

 /** 菜单/面包屑 page（主站形态完整路径）→ 当前站点形态：子站插入 /site/{code} 段（docs/13 §4）。
 *  非 /sch/ 前缀（外链模块）原样返回，防拼坏 */
@@ -312,10 +337,18 @@ watch(
                title="返回学校列表"
                @click="goWorkbench"
            >
-                <Icon type="ios-undo" :size="18" />
+                <Icon type="ios-arrow-back" :size="20" />
            </a>
            <div v-if="isSuper" class="delimiter fl align-middle"></div>
-            <h4 class="fl align-middle">{{ appName }}</h4>
+            <h4 class="fl align-middle" :title="shellTitle">
+                {{ appName }}<template v-if="identityText"
+                    ><span class="h-delimiter"></span
+                    ><span class="school-cap" :class="identityClass"
+                        >{{ schoolName }}<span class="sc-sep">.</span
+                        ><span class="sc-site">{{ siteLabel }}</span></span
+                    ></template
+                >
+            </h4>
            <div class="header-aside fr">
                <img :src="userInfo.avatar" v-if="userInfo.avatar" class="fl align-middle" @click="linkUserInfo" />
                <a class="name fl align-middle text-ellipsis" href="javascript:void(0);" @click="linkUserInfo">
@@ -329,7 +362,8 @@ watch(
            <!-- 配色切换器（fr 顺序：DOM 后置即位于用户胶囊左侧） -->
            <div class="theme-cap fr"><ThemeSwitcher /></div>
        </header>
-        <div class="left-menu" v-if="!isAlone">
+        <div class="left-menu" :class="identityClass" v-if="!isAlone">
+            <!-- 站点卡已于 docs/22 v3 撤除（与站点工作台重复）；身份改由页头「学校名.站点名」承担 -->
            <div class="menu-top-box"></div>
            <ul>
                <template v-for="(item, index) in modList" :key="'menu_li_' + index">
@@ -366,7 +400,7 @@ watch(
            <div class="clear-box"></div>
        </div>

-        <div class="path-nav" :class="pathNavClass" :style="pathNavStyle">
+        <div class="path-nav" :class="identityClass" :style="pathNavStyle">
            <Breadcrumb separator="＞">
                <!-- 首页段（常驻第一段）：旧 BschHome 已下线，统一跳用户中心 userhome -->
                <a href="javascript:;" @click="linkHomePage">
@@ -429,13 +463,23 @@ watch(
 </template>

 <style scoped lang="scss">
-/* 超管返回学校列表图标：header 常驻入口（校级账号不渲染） */
+/* 超管返回学校列表：header 常驻入口（校级账号不渲染）。
+   与「首页」按钮同规格的可点方块（26×26 + hover 底）+ 左右 10px 呼吸 ——
+   原先是裸 18×18 图标夹在两条分隔线之间（x=126/146），既无点击热区、又比首页按钮小一档；
+   图标同时从 ios-undo（字形像「拐角」）换成 ios-arrow-back。 */
 .back-workbench {
+    width: 26px;
+    height: 26px;
+    margin: 0 10px;
+    border-radius: 5px;
    color: #fff;
    display: inline-flex;
    align-items: center;
+    justify-content: center;
+    transition: background 0.16s;
    &:hover {
-        opacity: 0.85;
+        background: rgba(255, 255, 255, 0.16);
+        opacity: 1;
    }
 }
 .no-site-tip {
@@ -478,6 +522,39 @@ watch(
    margin-right: 8px;
 }

+/* 页头身份（docs/22 v3）：云海CMS ｜ 学校名.站点名
+   h4 截断——学校名+站名可能很长，完整串在 :title 与 document.title。
+   胶囊色沿用原 .shell-site 取值（主站 rgba(255,255,255,.18) / 子站橙 rgba(255,153,0,.32)），不引新色值。 */
+.header-container h4 {
+    max-width: 46vw;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.h-delimiter {
+    display: inline-block;
+    width: 1px;
+    height: 14px;
+    margin: 0 10px;
+    vertical-align: -2px;
+    background: rgba(255, 255, 255, 0.4);
+}
+.school-cap {
+    font-size: 13px;
+    font-weight: normal;
+}
+.sc-sep {
+    opacity: 0.75;
+}
+.sc-site {
+    padding: 2px 6px;
+    border-radius: 3px;
+    background: rgba(255, 255, 255, 0.18);
+}
+.school-cap.band-sub .sc-site {
+    background: rgba(255, 153, 0, 0.32);
+}
+
 /* 面包屑「首页」垂直居中：layout.css 遗留的 .path-nav .icon-category{position:relative;top:1px}
   是给老 iconfont 字体字形做的基线补偿，换成 ysch mask 的 1em 方块后反而把图标顶偏；
   这里用 inline-flex 真居中并关掉该补偿（不动压缩产物 layout.css，覆盖收在本组件内）。
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, watch } from "vue";
-import { useRouter } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import { Message, Tag } from "view-ui-plus";
 import Utils from "@/utils/index";
 import MyConfirm from "@/components/MyConfirm";
@@ -23,6 +23,7 @@ const props = defineProps<{
 }>();

 const router = useRouter();
+const route = useRoute();
 const store = useCmsStore();

 const rows = ref<ArticlePageItem[]>([]);
@@ -32,7 +33,9 @@ const pageNum = ref(1);
 const pageSize = ref(parseInt(localStorage.getItem("customPageCount") || "10"));

 const search = reactive({
-    categoryId: undefined as number | undefined,
+    // P-D1：栏目页概览「查看全部 →」以 /article?categoryId={id} 深链进入，读 query 预筛选
+    // （query 是字符串，转数字才能对上 Option 的 value 并回显下拉选中项）
+    categoryId: Number((route.query?.categoryId as any)) || undefined,
    status: undefined as number | undefined,
    keyword: "",
 });
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+import { useRouter } from "vue-router";
+import { Tag } from "view-ui-plus";
+import { articleApi } from "@/api/module/cms";
+import { useCmsStore } from "@/store";
+import { ArticlePageItem } from "@/types/cms";
+import { adminPathOf } from "@/utils/sitePath";
+
+/**
+ * 栏目内容概览（P-D1，v2 §B.3）：/category 右侧列表型栏目的降级面板。
+ * 定位=只读概览；文章的发布/下架/置顶/删除只在 /article（唯一操作台）做。
+ *
+ * 统计口径（手册 P-D1 定稿，勿自行改）：
+ * - 范围 = 选中栏目的**直属 + 全部子孙栏目**。后端 ArticlePageQuery.categoryIds 是不递归的 IN 查询，
+ *   故子孙 id 由前端从栏目树展开（与门户 PortalPageRenderer.collectListDescendantIds 同语义）。
+ * - 状态 = **全状态计数**（草稿/已发布/已下架全部计入，不带 status 过滤；系统内无"回收站"概念）。
+ * - 一次 page 请求同时拿到总数（total）与最近 5 条（list，后端按置顶降序 + 创建时间降序）。
+ */
+const props = defineProps<{
+    categoryId: number;
+    categoryName?: string;
+    /** 全量栏目树（CategoryManage 的 treeData，含 W2 虚拟根；按 id 定位，虚拟根 id=0 不会命中真实栏目） */
+    tree?: any[];
+}>();
+
+const router = useRouter();
+const store = useCmsStore();
+
+const total = ref(0);
+const rows = ref<ArticlePageItem[]>([]);
+const loading = ref(false);
+
+const statusDict = [
+    { value: 0, label: "草稿", color: "default" },
+    { value: 1, label: "已发布", color: "success" },
+    { value: 2, label: "已下架", color: "warning" },
+];
+const statusText = (s: number) => statusDict.find(i => i.value === s)?.label || "未知";
+const statusColor = (s: number) => statusDict.find(i => i.value === s)?.color || "default";
+
+function findNode(list: any[], id: number): any {
+    for (const n of list || []) {
+        if (Number(n.id) === Number(id)) return n;
+        const hit = findNode(n.children || [], id);
+        if (hit) return hit;
+    }
+    return null;
+}
+
+function collectIds(node: any, acc: number[]): number[] {
+    acc.push(Number(node.id));
+    (node.children || []).forEach((c: any) => collectIds(c, acc));
+    return acc;
+}
+
+/** 统计范围 id：树未就绪（或未命中）时退化为仅直属栏目 */
+const scopeIds = computed<number[]>(() => {
+    const node = findNode(props.tree || [], props.categoryId);
+    return node ? collectIds(node, []) : [Number(props.categoryId)];
+});
+const scopeKey = computed(() => scopeIds.value.join(","));
+
+async function run() {
+    if (!store.siteId) return;
+    loading.value = true;
+    try {
+        const page = await articleApi
+            .page({
+                siteId: store.siteId,
+                categoryIds: scopeKey.value,
+                page: 1,
+                pageSize: 5,
+            })
+            .send();
+        total.value = page?.total || 0;
+        rows.value = (page?.list || []).slice(0, 5);
+    } finally {
+        loading.value = false;
+    }
+}
+
+/** 跳 /article 深链预筛选（子栏目行按自身栏目过滤，父栏目"查看全部"按父栏目过滤） */
+function goArticles(categoryId?: number) {
+    const code = store.schoolCode;
+    if (!code) return;
+    const id = categoryId ?? props.categoryId;
+    router.push(adminPathOf(code, store.siteSegCode, "article") + `?categoryId=${id}`);
+}
+
+// 树稍后到达（子孙变化）与切换栏目都重取；站点切换由 CategoryManage 清选中后重建本组件
+watch(scopeKey, run);
+onMounted(run);
+</script>
+
+<template>
+    <div class="category-content-summary">
+        <div class="ccs-stat fix">
+            <span class="ccs-total">共 <b>{{ total }}</b> 篇</span>
+            <span class="ccs-scope">
+                {{ categoryName || "本栏目" }}及子栏目（{{ scopeIds.length }} 个栏目）· 草稿/已发布/已下架全部计入
+            </span>
+            <Button class="fr" size="small" @click="goArticles()">查看全部 →</Button>
+        </div>
+
+        <div v-if="loading" class="ccs-empty">加载中…</div>
+        <ul v-else-if="rows.length" class="ccs-list">
+            <li v-for="row in rows" :key="row.id" class="ccs-row fix">
+                <a class="ccs-title operating-link" :title="row.title" @click="goArticles(row.categoryId)">{{ row.title }}</a>
+                <Tag class="ccs-tag" :color="statusColor(row.status)">{{ statusText(row.status) }}</Tag>
+                <span class="ccs-time">{{ row.publishTime || row.createTime || "-" }}</span>
+            </li>
+        </ul>
+        <div v-else class="ccs-empty">
+            <p>本栏目及子栏目下暂无文章</p>
+            <p class="ccs-empty-tip">可在上方「新建文章」直接发布到本栏目，或到「文章列表」页检索全站内容。</p>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.category-content-summary {
+    background: #fff;
+    border-radius: 4px;
+    padding: 4px 16px 16px;
+}
+
+.ccs-stat {
+    padding: 14px 0 10px;
+    border-bottom: 1px solid #f0f0f0;
+    line-height: 24px;
+}
+
+.ccs-total {
+    font-size: 14px;
+    color: #515a6e;
+
+    b {
+        font-size: 20px;
+        color: #2d8cf0;
+        margin: 0 2px;
+    }
+}
+
+.ccs-scope {
+    margin-left: 10px;
+    font-size: 12px;
+    color: #808695;
+}
+
+.ccs-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.ccs-row {
+    padding: 10px 0;
+    border-bottom: 1px dashed #f0f0f0;
+    display: flex;
+    align-items: center;
+
+    &:last-child {
+        border-bottom: none;
+    }
+}
+
+.ccs-title {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.ccs-tag {
+    flex: none;
+    margin: 0 10px;
+}
+
+.ccs-time {
+    flex: none;
+    font-size: 12px;
+    color: #808695;
+}
+
+.ccs-empty {
+    padding: 32px 0;
+    text-align: center;
+    color: #808695;
+}
+
+.ccs-empty-tip {
+    margin-top: 6px;
+    font-size: 12px;
+}
+</style>
@@ -67,6 +67,14 @@ const cmsChildren: RouteRecordRaw[] = [
        component: () => import("@/views/cms/BannerManage.vue"),
        meta: { title: "轮播管理", modId: 3 },
    },
+    {
+        // docs/20 D-7：名师风采数据维护（people 区块数据源）。菜单挂靠轮播管理族（平台 UserBase 未配
+        // 独立模块前经首页布局编辑器 people 区块属性面板直达；modId 3 = 轮播管理，面包屑归属一致）
+        path: "person",
+        name: "PersonManage",
+        component: () => import("@/views/cms/PersonManage.vue"),
+        meta: { title: "人物管理", modId: 3, subOf: "/banner" },
+    },
    {
        path: "link",
        name: "LinkManage",
@@ -170,7 +170,7 @@ export interface ArticleSaveRequest {
 export interface ArticlePageQuery {
    siteId: number;
    /** 栏目 id（后端字段 categoryIds: List<Integer>，多选逗号分隔；空=全部栏目） */
-    categoryIds?: number;
+    categoryIds?: number | string;
    status?: number;
    keyword?: string;
    page?: number;
@@ -211,6 +211,17 @@ export interface BannerVo {
    startTime?: string;
    endTime?: string;
    status: number;
+    // ===== docs/20 D-3/D-6：topic/event 展示位扩展字段 =====
+    /** 专题大卡描述（position=topic） */
+    description?: string;
+    /** 专题大卡 CTA 按钮文字 */
+    ctaText?: string;
+    /** 专题大卡 CTA 跳转地址 */
+    ctaUrl?: string;
+    /** 活动日期（position=event，yyyy-MM-dd） */
+    eventDate?: string;
+    /** 活动地点（position=event） */
+    location?: string;
 }

 /* ===== 友链 ===== */
@@ -270,3 +281,20 @@ export interface ThemeVo {
 }

 /* ===== 事项库（svc，事项库详细设计 §7.4）===== */
+
+/* ===== 名师风采（docs/20 D-7，PersonVo） ===== */
+export interface PersonVo {
+    id?: number;
+    siteId: number;
+    name: string;
+    /** 头衔/职称 */
+    title?: string;
+    /** 一句话简介 */
+    bio?: string;
+    /** 头像 URL（空 = 首字徽章兜底） */
+    avatar?: string;
+    /** 所属栏目 id（空 = 未分组） */
+    categoryId?: number;
+    sortNo: number;
+    status: number;
+}
@@ -1,17 +1,14 @@
 import { describe, expect, it } from "vitest";
 import {
-    EXTRA_KEY_RE,
    SITE_CONFIG_FIELD_DEFS,
-    extraRowError,
-    firstExtraError,
    parseSiteConfig,
    serializeSiteConfig,
    validateFieldValue,
 } from "./siteConfigForm";

-/** docs/09 §3.1 站点配置结构化：parse/serialize/校验 */
+/** docs/09 §3.1 站点配置结构化：parse/serialize/校验；docs/20 F6 扩展参数区退役（未知键静默保留） */
 describe("siteConfigForm", () => {
-    it("parse：已知键入 fields、未知字符串键入扩展行、theme_params/对象键无损入 preserved", () => {
+    it("parse：已知键入 fields、未知键（字符串/对象）与系统托管键均无损入 preserved（F6）", () => {
        const json = JSON.stringify({
            logo: "/cms/upload/logo.png",
            contact: "电话 0571-88888888",
@@ -26,14 +23,14 @@ describe("siteConfigForm", () => {
        expect(m.fields.contact).toBe("电话 0571-88888888");
        expect(m.fields.domain).toBe("www.xxx.edu.cn");
        expect(m.fields.public_base_url).toBe("https://www.xxx.edu.cn");
-        expect(m.extras).toEqual([{ key: "my_ext", value: "自定义值" }]);
+        expect(m.preserved.my_ext).toBe("自定义值"); // F6：未知字符串键不再进扩展行，静默保留
        expect(m.preserved.theme_params).toEqual({ primary: "#b01a2e" });
        expect(m.preserved.wechat).toEqual({ appid: "wx123" });
    });

    it("parse：非法 JSON / 空值按空配置处理，已知键非字符串值无损保留", () => {
        expect(parseSiteConfig("这不是json{").fields).toEqual({});
-        expect(parseSiteConfig(null).extras).toEqual([]);
+        expect(parseSiteConfig(null).preserved).toEqual({});
        expect(parseSiteConfig("").preserved).toEqual({});
        const m = parseSiteConfig(JSON.stringify({ logo: 123, other: [1, 2] }));
        expect(m.fields.logo).toBeUndefined();
@@ -41,22 +38,17 @@ describe("siteConfigForm", () => {
        expect(m.preserved.other).toEqual([1, 2]);
    });

-    it("serialize：空值剔除、扩展行空键/空值剔除、preserved 永不丢失", () => {
+    it("serialize：空值剔除、preserved 永不丢失", () => {
        const m = parseSiteConfig(JSON.stringify({ logo: "/cms/upload/logo.png", theme_params: { primary: "#fff" }, wechat: { x: 1 } }));
        m.fields.contact = "  "; // 空白 → 剔除
-        m.extras.push({ key: "k1", value: "v1" });
-        m.extras.push({ key: "", value: "被剔除" });
-        m.extras.push({ key: "k2", value: "  " }); // 空值 → 剔除
        const out = JSON.parse(serializeSiteConfig(m));
        expect(out.logo).toBe("/cms/upload/logo.png");
        expect(out).not.toHaveProperty("contact");
-        expect(out.k1).toBe("v1");
-        expect(out).not.toHaveProperty("k2");
        expect(out.theme_params).toEqual({ primary: "#fff" });
        expect(out.wechat).toEqual({ x: 1 });
    });

-    it("roundtrip：parse→serialize→parse 内容不丢（含扩展行与 preserved）", () => {
+    it("roundtrip：parse→serialize→parse 内容不丢（未知键与 preserved 全保留）", () => {
        const json = JSON.stringify({
            copyright: "XX学校 · 版权所有 © 2026",
            seo_description: "校讯",
@@ -68,12 +60,12 @@ describe("siteConfigForm", () => {
        const twice = parseSiteConfig(serializeSiteConfig(once));
        expect(twice.fields.slogan).toBe("厚德博学");
        expect(twice.fields.copyright).toBe("XX学校 · 版权所有 © 2026");
-        expect(twice.extras).toEqual([{ key: "my_ext", value: "v" }]);
+        expect(twice.preserved.my_ext).toBe("v");
        expect(twice.preserved.theme_params).toEqual({ bg: "#f7f5f2" });
    });

    it("validateFieldValue：url/host/asset/text 各类型通过与拒绝", () => {
-        const def = (kind: string, maxLength?: number) =>
+        const def = (kind: string) =>
            SITE_CONFIG_FIELD_DEFS.find(d => d.key === { url: "public_base_url", host: "domain", asset: "logo", text: "copyright" }[kind])!;
        expect(validateFieldValue(def("url"), "https://www.xxx.edu.cn")).toBe("");
        expect(validateFieldValue(def("url"), "www.xxx.edu.cn")).toContain("http");
@@ -87,26 +79,6 @@ describe("siteConfigForm", () => {
        expect(validateFieldValue(def("url"), "")).toBe(""); // 空值一律放行（非必填）
    });

-    it("extraRowError：格式/重名/重复校验；空键行放行", () => {
-        const rows = [{ key: "my_ext", value: "v" }];
-        expect(extraRowError(rows, 0)).toBe("");
-        expect(extraRowError([{ key: "", value: "v" }], 0)).toBe("");
-        expect(extraRowError([{ key: "my-ext", value: "v" }], 0)).toContain("下划线");
-        expect(extraRowError([{ key: "1bad", value: "v" }], 0)).toContain("下划线");
-        expect(extraRowError([{ key: "logo", value: "v" }], 0)).toContain("重名");
-        expect(extraRowError([{ key: "theme_params", value: "v" }], 0)).toContain("重名");
-        expect(extraRowError([{ key: "a", value: "1" }, { key: "a", value: "2" }], 1)).toContain("重复");
-        expect(EXTRA_KEY_RE.test("wechat_appid")).toBe(true);
-        expect(EXTRA_KEY_RE.test("_priv")).toBe(true);
-        expect(EXTRA_KEY_RE.test("9bad")).toBe(false);
-    });
-
-    it("firstExtraError：返回第一条错误；全部合法返回空串", () => {
-        expect(firstExtraError([{ key: "ok_key", value: "1" }, { key: "bad-key", value: "2" }])).toContain("下划线");
-        expect(firstExtraError([{ key: "a", value: "1" }, { key: "b", value: "2" }])).toBe("");
-        expect(firstExtraError([])).toBe("");
-    });
-
    it("已知键清单与 docs/09 §0 键盘点表一致（防漂移；docs/16 D4 吸收三旧键后收敛）", () => {
        expect(SITE_CONFIG_FIELD_DEFS.map(d => d.key)).toEqual([
            "logo", "favicon", "slogan", "colleges_label",
@@ -128,7 +100,6 @@ describe("siteConfigForm", () => {
        expect(m.fields.footer_addresses).toContain("淮河校区");
        expect(m.fields.qr_wechat).toBe("/cms/upload/qr-wechat.png");
        expect(m.fields.social_weibo).toBe("https://weibo.com/xxx");
-        expect(m.extras).toEqual([]); // 新键均为已知键，不落扩展行
        const qrDef = SITE_CONFIG_FIELD_DEFS.find(d => d.key === "qr_weibo")!;
        const socialDef = SITE_CONFIG_FIELD_DEFS.find(d => d.key === "social_douyin")!;
        expect(validateFieldValue(qrDef, "javascript:alert(1)")).toContain("路径");
@@ -139,19 +110,18 @@ describe("siteConfigForm", () => {
        expect(out.footer_addresses).toContain("邮编：464300");
        expect(out).not.toHaveProperty("social_bilibili");
    });
-    it("docs/16 D4：gallery_title/gallery_subtitle/news_bg_image 被吸收为静默保留键（不落扩展行、无损回写）", () => {
+    it("docs/16 D4：gallery_title/gallery_subtitle/news_bg_image 被吸收为静默保留键（无损回写）", () => {
        const json = JSON.stringify({ gallery_title: "线上展厅", news_bg_image: "/cms/upload/campus.jpg" });
        const m = parseSiteConfig(json);
        expect(m.fields).toEqual({}); // 不进任何分区表单
-        expect(m.extras).toEqual([]); // 也不落扩展行
        expect(m.preserved.gallery_title).toBe("线上展厅");
        expect(m.preserved.news_bg_image).toBe("/cms/upload/campus.jpg");
        expect(JSON.parse(serializeSiteConfig(m))).toEqual(JSON.parse(json)); // 存量值无损保留
    });
-    it("B3：custom_css 为保留键，不入扩展行，parse/serialize 无损往返", () => {
+    it("B3：custom_css 为保留键，parse/serialize 无损往返", () => {
        const json = JSON.stringify({ custom_css: ".site-header{padding:16px 0}", my_ext: "v" });
        const m = parseSiteConfig(json);
-        expect(m.extras).toEqual([{ key: "my_ext", value: "v" }]);
+        expect(m.preserved.my_ext).toBe("v");
        expect(m.preserved.custom_css).toBe(".site-header{padding:16px 0}");
        expect(JSON.parse(serializeSiteConfig(m)).custom_css).toBe(".site-header{padding:16px 0}");
    });
@@ -1,7 +1,8 @@
 /**
- * 站点配置结构化表单纯函数模块（docs/09 §3.1）。
- * 已知键与模板/Java 实际消费方对齐（docs/09 §0 键清单表）；未知字符串键 → 可编辑扩展行
- * （Projman「添加项」模式）；未知非字符串键（theme_params 等系统托管键）原样保留无损回写。
+ * 站点配置结构化表单纯函数模块（docs/09 §3.1；docs/20 F6 扩展参数分区退役）。
+ * 已知键与模板/Java 实际消费方对齐（docs/09 §0 键清单表）；
+ * 未知键（字符串与非字符串）一律无损入 preserved 静默保留——不再提供「扩展参数」编辑区
+ * （后端对未知键的宽容策略不变：不拦截、不渲染、不丢失）。
 * vitest 单测对象：siteConfigForm.spec.ts，不依赖组件挂载基建。
 */

@@ -16,6 +17,8 @@ export interface SiteConfigFieldDef {
    multiline?: boolean;
    /** url: http(s) URL；host: 域名（不带协议）；asset: / 开头路径或 http(s) URL；text: 仅长度 */
    kind?: "text" | "url" | "host" | "asset";
+    /** F5（docs/20）：asset 类字段的预览/占位框比例（favicon 1:1、二维码 4:3） */
+    aspect?: "1:1" | "4:3";
    maxLength?: number;
 }

@@ -27,8 +30,9 @@ export const SITE_CONFIG_FIELD_DEFS: SiteConfigFieldDef[] = [
        tip: "门户顶栏与页脚品牌位展示；建议先在「附件管理」上传，复制路径填到这里。",
    },
    {
-        key: "favicon", label: "浏览器图标 favicon", group: "display", kind: "asset", maxLength: 500,
+        key: "favicon", label: "浏览器图标 favicon", group: "display", kind: "asset", maxLength: 500, aspect: "1:1",
        placeholder: "如 /yschcms/upload/…/favicon.png（留空用主题内置图标）",
+        tip: "浏览器标签页与收藏夹的小图标，不显示在页面正文中。",
    },
    {
        key: "slogan", label: "首页标语", group: "display", kind: "text", maxLength: 200,
@@ -42,6 +46,7 @@ export const SITE_CONFIG_FIELD_DEFS: SiteConfigFieldDef[] = [
    {
        key: "contact", label: "联系方式", group: "footer", kind: "text", maxLength: 200, multiline: true,
        placeholder: "如：电话 0571-88888888 · 地址杭州市 XX 路 100 号",
+        tip: "显示在页脚品牌区（页脚第一行位置）。",
    },
    {
        key: "footer_addresses", label: "多校区地址", group: "footer", kind: "text", maxLength: 500, multiline: true,
@@ -49,37 +54,44 @@ export const SITE_CONFIG_FIELD_DEFS: SiteConfigFieldDef[] = [
        tip: "逐行展示在页脚品牌区旁；换行即分行（最多 500 字）。",
    },
    {
-        key: "qr_wechat", label: "微信二维码", group: "footer", kind: "asset", maxLength: 500,
+        key: "qr_wechat", label: "微信二维码", group: "footer", kind: "asset", maxLength: 500, aspect: "4:3",
        placeholder: "如 /yschcms/upload/…/qr-wechat.png（留空不展示）",
        tip: "页脚二维码，悬停放大预览；建议先在「附件管理」上传。",
    },
    {
-        key: "qr_weibo", label: "微博二维码", group: "footer", kind: "asset", maxLength: 500,
+        key: "qr_weibo", label: "微博二维码", group: "footer", kind: "asset", maxLength: 500, aspect: "4:3",
        placeholder: "如 /yschcms/upload/…/qr-weibo.png（留空不展示）",
+        tip: "显示在页脚右侧二维码区，与微信二维码并排，悬停放大预览。",
    },
    {
        key: "social_wechat", label: "微信公众号", group: "footer", kind: "url", maxLength: 500,
        placeholder: "微信公众号主页链接，如 https://mp.weixin.qq.com/…（留空不展示图标）",
+        tip: "页脚社媒图标行（点击跳转链接地址）。",
    },
    {
        key: "social_weibo", label: "微博", group: "footer", kind: "url", maxLength: 500,
        placeholder: "微博主页链接 https://weibo.com/…（留空不展示图标）",
+        tip: "页脚社媒图标行（点击跳转链接地址）。",
    },
    {
        key: "social_douyin", label: "抖音", group: "footer", kind: "url", maxLength: 500,
        placeholder: "抖音主页链接 https://www.douyin.com/…（留空不展示图标）",
+        tip: "页脚社媒图标行（点击跳转链接地址）。",
    },
    {
        key: "social_bilibili", label: "哔哩哔哩", group: "footer", kind: "url", maxLength: 500,
        placeholder: "B 站主页链接 https://space.bilibili.com/…（留空不展示图标）",
+        tip: "页脚社媒图标行（点击跳转链接地址）。",
    },
    {
        key: "copyright", label: "版权文字", group: "footer", kind: "text", maxLength: 200,
        placeholder: "如：XX学校 · 版权所有 © 2026",
+        tip: "页脚最底行的版权声明文字。",
    },
    {
        key: "beian", label: "备案号", group: "footer", kind: "text", maxLength: 100,
        placeholder: "如：浙ICP备XXXXXXXX号-1",
+        tip: "页脚最底行版权文字旁的 ICP 备案号（可点击性质由模板决定，通常为纯文字）。",
    },
    {
        key: "seo_description", label: "SEO 描述", group: "seo", kind: "text", maxLength: 500, multiline: true,
@@ -121,28 +133,22 @@ export const RESERVED_SITE_CONFIG_KEYS = ["theme_params", "custom_css"];
 */
 export const ABSORBED_LEGACY_KEYS = ["gallery_title", "gallery_subtitle", "news_bg_image"];

-/** 扩展键名约束（与后端 CONFIG_KEY_PATTERN 一致） */
+/** 扩展键名约束（与后端 CONFIG_KEY_PATTERN 一致；供后续功能键落位时复用） */
 export const EXTRA_KEY_RE = /^[A-Za-z_][A-Za-z0-9_]*$/;

 export const HOST_RE = /^(\*\.)?[A-Za-z0-9]([A-Za-z0-9-]*[A-Za-z0-9])?(\.[A-Za-z0-9]([A-Za-z0-9-]*[A-Za-z0-9])?)+$/;
 export const URL_RE = /^https?:\/\/\S+$/;
 export const ASSET_RE = /^(\/.+|https?:\/\/\S+)$/;

-export interface SiteConfigExtraRow {
-    key: string;
-    value: string;
-}
-
 export interface SiteConfigFormModel {
    fields: Record<string, string>;
-    extras: SiteConfigExtraRow[];
-    /** 系统托管键 + 非字符串未知键，无损保留 */
+    /** 非已知键（含系统托管键与未知键）无损保留 */
    preserved: Record<string, unknown>;
 }

-/** configJson → 表单模型：已知键入 fields、未知字符串键入扩展行、其余无损入 preserved */
+/** configJson → 表单模型：已知键入 fields，其余（系统托管键/旧键/未知键）无损入 preserved */
 export function parseSiteConfig(configJson: string | undefined | null): SiteConfigFormModel {
-    const model: SiteConfigFormModel = { fields: {}, extras: [], preserved: {} };
+    const model: SiteConfigFormModel = { fields: {}, preserved: {} };
    if (!configJson || !configJson.trim()) {
        return model;
    }
@@ -159,23 +165,18 @@ export function parseSiteConfig(configJson: string | undefined | null): SiteConf
        return model;
    }
    const known = new Set(SITE_CONFIG_FIELD_DEFS.map(f => f.key));
-    const reserved = new Set([...RESERVED_SITE_CONFIG_KEYS, ...ABSORBED_LEGACY_KEYS]);
    Object.keys(parsed).forEach(k => {
        const v = parsed![k];
-        if (typeof v !== "string") {
-            model.preserved[k] = v;
-        } else if (known.has(k)) {
+        if (known.has(k) && typeof v === "string") {
            model.fields[k] = v;
-        } else if (reserved.has(k)) {
-            model.preserved[k] = v;
        } else {
-            model.extras.push({ key: k, value: v });
+            model.preserved[k] = v;
        }
    });
    return model;
 }

-/** 表单模型 → configJson：空值剔除；扩展行空键/空值剔除；preserved 原样回写（永不丢失） */
+/** 表单模型 → configJson：空值剔除；preserved 原样回写（永不丢失） */
 export function serializeSiteConfig(model: SiteConfigFormModel): string {
    const out: Record<string, unknown> = {};
    SITE_CONFIG_FIELD_DEFS.forEach(def => {
@@ -184,19 +185,35 @@ export function serializeSiteConfig(model: SiteConfigFormModel): string {
            out[def.key] = v;
        }
    });
-    (model.extras || []).forEach(row => {
-        const k = (row.key || "").trim();
-        const v = (row.value || "").trim();
-        if (k && v) {
-            out[k] = v;
-        }
-    });
    Object.keys(model.preserved || {}).forEach(k => {
        out[k] = model.preserved[k];
    });
    return JSON.stringify(out);
 }

+/**
+ * F1（docs/20）Tab 独立保存：服务端事实源 base + 本 Tab 增量 patch 合并——
+ * patch 值为空串/null/undefined = 删除该键；其余键原样保留。
+ * 各 Tab 只提交自己的键空间，其他 Tab 未保存的内存修改不会被连带提交。
+ */
+export function mergeConfigPatch(base: string | undefined | null, patch: Record<string, unknown>): string {
+    let obj: Record<string, unknown>;
+    try {
+        const parsed = base && base.trim() ? JSON.parse(base) : {};
+        obj = parsed && typeof parsed === "object" && !Array.isArray(parsed) ? { ...parsed } : {};
+    } catch {
+        obj = {};
+    }
+    Object.entries(patch).forEach(([k, v]) => {
+        if (v === undefined || v === null || (typeof v === "string" && !v.trim())) {
+            delete obj[k];
+        } else {
+            obj[k] = v;
+        }
+    });
+    return JSON.stringify(obj);
+}
+
 /** 已知字段值校验：返回错误消息，空串=通过（与后端 validateConfigJson 同语义） */
 export function validateFieldValue(def: SiteConfigFieldDef, value: string): string {
    const v = (value || "").trim();
@@ -214,35 +231,3 @@ export function validateFieldValue(def: SiteConfigFieldDef, value: string): stri
            return def.maxLength && v.length > def.maxLength ? `不能超过 ${def.maxLength} 字` : "";
    }
 }
-
-/** 扩展行校验：键名格式 / 与内置键或系统键冲突 / 行间重复；返回错误消息，空串=通过（空键行视为待填） */
-export function extraRowError(rows: SiteConfigExtraRow[], index: number): string {
-    const row = rows[index];
-    const key = (row?.key || "").trim();
-    if (!key) {
-        return "";
-    }
-    if (!EXTRA_KEY_RE.test(key)) {
-        return "键名仅限字母/数字/下划线，且以字母或下划线开头";
-    }
-    const known = new Set(SITE_CONFIG_FIELD_DEFS.map(f => f.key));
-    if (known.has(key) || RESERVED_SITE_CONFIG_KEYS.includes(key)) {
-        return "扩展键不能与内置键/系统键重名";
-    }
-    const dup = rows.findIndex(r => (r.key || "").trim() === key);
-    if (dup >= 0 && dup !== index) {
-        return "扩展键重复";
-    }
-    return "";
-}
-
-/** 保存前兜底：返回第一条扩展行错误，空串=全部通过 */
-export function firstExtraError(rows: SiteConfigExtraRow[]): string {
-    for (let i = 0; i < (rows || []).length; i++) {
-        const msg = extraRowError(rows, i);
-        if (msg) {
-            return msg;
-        }
-    }
-    return "";
-}
@@ -5,17 +5,38 @@
 * 新行为：保留原值交服务端注册表校验（保存未注册主题会被明确拒绝），仅提示告警。
 */
 export interface EditableTheme {
-    /** 编辑表单主题值（未注册时保留原值，不再偷偷归一 default） */
+    /** 编辑表单主题值（未注册时保留原值，不再偷偷归一 default；下架别名解析为保留主题） */
    theme: string;
    /** 主题未在注册列表中（保存将被服务端拒绝，需提示用户改选或先上传） */
    unregistered: boolean;
+    /** docs/20 E：下架主题别名解析到的 colorScheme 预设（保存后保持原配色；非别名为 undefined） */
+    aliasColorScheme?: string;
 }

+/** docs/20 E：下架主题别名表（与后端 ThemeRegistry.DEPRECATED_ALIASES 同构，两侧同步维护） */
+const DEPRECATED_ALIASES: Record<string, { target: string; colorScheme: string }> = {
+    "blue-white": { target: "default", colorScheme: "blue-white" },
+    "classic-red": { target: "default", colorScheme: "classic-red" },
+    "fresh-mint": { target: "default", colorScheme: "fresh-mint" },
+    "warm-kinder": { target: "default", colorScheme: "warm-kinder" },
+    "academic-navy": { target: "scholar-blue", colorScheme: "navy" },
+    "campus-azure": { target: "scholar-blue", colorScheme: "azure" },
+    "poly-blue": { target: "scholar-blue", colorScheme: "poly" },
+    "agri-forest": { target: "scholar-blue", colorScheme: "agri" },
+    "jade-normal": { target: "scholar-blue", colorScheme: "jade" },
+    "mint-breeze": { target: "scholar-blue", colorScheme: "mint" },
+};
+
 export function resolveEditableTheme(rowTheme: string | undefined, themeNames: string[]): EditableTheme {
    const value = rowTheme || "default";
    if (!themeNames.length) {
        // 列表加载失败/为空：无法判定注册状态，保留原值且不误报（由服务端校验兜底）
        return { theme: value, unregistered: false };
    }
+    // docs/20 E：下架主题 → 呈现归一后的保留主题（与服务端保存归一化一致，不误报"未注册"）
+    const alias = DEPRECATED_ALIASES[value];
+    if (alias && themeNames.includes(alias.target)) {
+        return { theme: alias.target, unregistered: false, aliasColorScheme: alias.colorScheme };
+    }
    return { theme: value, unregistered: !themeNames.includes(value) };
 }
@@ -20,13 +20,19 @@ const linkTypeDict = [
 ];
 const linkTypeText = (v: number) => linkTypeDict.find(i => i.value === v)?.label || "-";

-/** 展示位（docs/12）：home=首页轮播 / gallery=线上展厅图片画廊 */
+/** 展示位（docs/12；docs/20 F4 双 Tab 化）：home=首页轮播 / gallery=线上展厅图片画廊 */
 const position = ref("home");
+/** 弹窗打开时的展示位锚点（F4：保存归属以打开时所在 Tab 为准，弹窗期间切换 Tab 不串数据） */
+const formPosition = ref("home");
 const positionDict = [
-    { value: "home", label: "首页轮播", tip: "轮播图设计尺寸建议 1920×560（皮肤包约定）" },
-    { value: "gallery", label: "线上展厅", tip: "画廊图片设计尺寸建议 800×520，多图横向轮播（炫彩校园皮肤消费）" },
+    { value: "home", label: "首页轮播", short: "轮播", addLabel: "新增轮播", tip: "轮播图设计尺寸建议 1920×560（皮肤包约定）" },
+    { value: "gallery", label: "线上展厅", short: "展厅图片", addLabel: "新增展厅图片", tip: "画廊图片设计尺寸建议 800×520，多图横向轮播（炫彩校园皮肤消费）" },
+    // docs/20 D-3/D-6：新展示位（首页布局 featured_topics / events 区块消费）
+    { value: "topic", label: "专题大卡", short: "专题卡", addLabel: "新增专题卡", tip: "专题大卡图片建议 800×500；首页需添加「专题大卡」区块才会展示" },
+    { value: "event", label: "学术活动", short: "活动", addLabel: "新增活动", tip: "学术报告/活动海报位；首页需添加「学术日历」区块才会展示，按活动日期升序排列" },
 ];
-const positionTip = computed(() => positionDict.find(p => p.value === position.value)?.tip || "");
+const formPositionMeta = computed(() => positionDict.find(p => p.value === formPosition.value)!);
+const modalTitle = computed(() => `${form.id ? "编辑" : "新增"}${formPositionMeta.value.short}`);

 const columns = [
    {
@@ -91,6 +97,12 @@ const form = reactive({
    startTime: "" as string | "",
    endTime: "" as string | "",
    status: 1,
+    // docs/20 D-3/D-6：topic/event 展示位扩展字段
+    description: "",
+    ctaText: "",
+    ctaUrl: "",
+    eventDate: "" as string | "",
+    location: "",
 });

 const rules = {
@@ -119,7 +131,13 @@ function openCreate() {
        startTime: "",
        endTime: "",
        status: 1,
+        description: "",
+        ctaText: "",
+        ctaUrl: "",
+        eventDate: "",
+        location: "",
    });
+    formPosition.value = position.value;
    modalVisible.value = true;
 }

@@ -134,7 +152,13 @@ function openEdit(row: BannerVo) {
        startTime: row.startTime || "",
        endTime: row.endTime || "",
        status: row.status,
+        description: row.description || "",
+        ctaText: row.ctaText || "",
+        ctaUrl: row.ctaUrl || "",
+        eventDate: row.eventDate || "",
+        location: row.location || "",
    });
+    formPosition.value = position.value;
    modalVisible.value = true;
 }

@@ -154,7 +178,7 @@ async function save() {
        return;
    }
    if (!form.imageUrl) {
-        Message.warning("请上传轮播图片");
+        Message.warning("请上传图片");
        return;
    }
    saving.value = true;
@@ -163,7 +187,8 @@ async function save() {
            .save({
                id: form.id,
                siteId: store.siteId!,
-                position: position.value,
+                // F4：保存归属以弹窗打开时所在 Tab 为准（弹窗期间切换 Tab 不串数据）
+                position: formPosition.value,
                title: form.title,
                imageUrl: form.imageUrl,
                linkType: form.linkType,
@@ -172,6 +197,12 @@ async function save() {
                startTime: form.startTime || undefined,
                endTime: form.endTime || undefined,
                status: form.status,
+                // docs/20 D-3/D-6：topic/event 位扩展字段随行提交（其余位后端落库但不消费）
+                description: form.description || undefined,
+                ctaText: form.ctaText || undefined,
+                ctaUrl: form.ctaUrl || undefined,
+                eventDate: form.eventDate || undefined,
+                location: form.location || undefined,
            })
            .send();
        Message.success("保存成功！");
@@ -184,7 +215,7 @@ async function save() {

 function doDelete(row: BannerVo) {
    MyConfirm({
-        title: "删除轮播",
+        title: `删除${formPositionMeta.value.short}`,
        msg: `确定删除「${row.title}」吗？`,
        async onOk() {
            await bannerApi.delete({ id: row.id!, siteId: store.siteId! }).send();
@@ -204,34 +235,34 @@ watch(position, () => run());
 <template>
    <div class="page-wrapper">
        <div class="main-container">
-        <div class="fix mb-12">
-            <Button class="fl" type="primary" size="large" @click="openCreate">
-                <Icon type="ios-add" />
-                新增轮播
-            </Button>
-            <span class="size-tip fr">{{ positionTip }}</span>
-        </div>
-        <!-- 展示位是筛选维度不是操作，按 bsch 规范归搜索区（左侧下拉） -->
-        <div class="search-wrap fix">
-            <Select v-model="position" class="search-wrap_sel">
-                <Option v-for="p in positionDict" :key="p.value" :value="p.value">{{ p.label }}</Option>
-            </Select>
-        </div>
+        <!-- F4（docs/20）：首页轮播 / 线上展厅双 Tab——两个展示位尺寸与管理习惯不同，
+             各自独立列表、独立新增按钮、独立尺寸提示；切换 Tab 列表即时重载（watch position） -->
+        <Tabs v-model="position" class="banner-tabs">
+            <TabPane v-for="p in positionDict" :key="p.value" :label="p.label" :name="p.value">
+                <div class="fix mb-12">
+                    <Button class="fl" type="primary" size="large" @click="openCreate">
+                        <Icon type="ios-add" />
+                        {{ p.addLabel }}
+                    </Button>
+                    <span class="size-tip fr">{{ p.tip }}</span>
+                </div>
+            </TabPane>
+        </Tabs>
        <Table
            class="link-table table-bottom-box"
            :columns="columns"
            :data="rows"
            :height="tableHeight"
            :loading="loading"
-            no-data-text="暂无轮播"
+            :no-data-text="position === 'home' ? '暂无轮播' : '暂无展厅图片'"
        />

-        <Modal v-model="modalVisible" :title="form.id ? '编辑轮播' : '新增轮播'" :mask-closable="false" width="560px">
+        <Modal v-model="modalVisible" :title="modalTitle" :mask-closable="false" width="560px">
            <Form ref="formRef" :model="form" :rules="rules" :label-width="100">
                <FormItem label="标题" prop="title">
                    <Input v-model="form.title" :maxlength="200" placeholder="alt 文案/无图兜底" />
                </FormItem>
-                <FormItem label="轮播图片" required>
+                <FormItem :label="formPositionMeta.value.short" required>
                    <Upload
                        :action="uploadUrl() + '?siteId=' + store.siteId + '&scene=banner'"
                        with-credentials
@@ -264,6 +295,29 @@ watch(position, () => run());
                >
                    <Input v-model="form.linkValue" :maxlength="64" :placeholder="form.linkType === 1 ? '文章 ID' : '栏目 ID'" />
                </FormItem>
+                <!-- docs/20 D-3：专题大卡扩展字段（仅 topic 位） -->
+                <template v-if="formPosition === 'topic'">
+                    <FormItem label="专题描述">
+                        <Input v-model="form.description" type="textarea" :rows="2" :maxlength="500"
+                               placeholder="卡片上一句话描述（可选）" />
+                    </FormItem>
+                    <FormItem label="按钮文字">
+                        <Input v-model="form.ctaText" :maxlength="20" placeholder="如「进入专题」（可选，不填不显示按钮）" />
+                    </FormItem>
+                    <FormItem label="按钮地址">
+                        <Input v-model="form.ctaUrl" :maxlength="500" placeholder="https://… 或站内 / 路径（可选）" />
+                    </FormItem>
+                </template>
+                <!-- docs/20 D-6：学术活动扩展字段（仅 event 位） -->
+                <template v-if="formPosition === 'event'">
+                    <FormItem label="活动日期">
+                        <DatePicker type="date" v-model="form.eventDate" format="yyyy-MM-dd"
+                                    placeholder="大日期块展示（可选）" style="width: 220px" />
+                    </FormItem>
+                    <FormItem label="活动地点">
+                        <Input v-model="form.location" :maxlength="200" placeholder="如 图书馆报告厅（可选）" />
+                    </FormItem>
+                </template>
                <FormItem label="排序">
                    <InputNumber v-model="form.sortNo" :min="0" />
                </FormItem>
@@ -8,7 +8,7 @@ import CategoryTreePanel from "@/components/CategoryTreePanel.vue";
 import CategorySortModal from "@/components/CategorySortModal.vue";
 import BatchAddCategory from "@/components/BatchAddCategory.vue";
 import SvgIcon from "@/components/SvgIcon.vue";
-import ArticleListPanel from "@/components/article/ArticleListPanel.vue";
+import CategoryContentSummary from "@/components/category/CategoryContentSummary.vue";
 import { categoryApi } from "@/api/module/cms";
 import { useCmsStore } from "@/store";
 import config from "@/assets/config/host.config";
@@ -17,7 +17,9 @@ import { rootLabelOf, wrapTreeWithRoot } from "@/utils/categoryTree";
 import { portalUrlOf, adminPathOf } from "@/utils/sitePath";

 /* UserBase group/index 同款交互：图标工具栏（新增/编辑/子组排序/删除）+ ztree（W2：搜索/收起展开按钮移除）。
-   B5 栏目工作台：右侧类型化面板（列表=文章表格 / 单页=富文本预览 / 外链=直达）。 */
+   B5 栏目工作台：右侧类型化面板（单页=富文本预览 / 外链=直达）。
+   P-D1 内容管理 IA 切分：列表型栏目右侧降级为「栏目内容概览」（只读统计 + 最近 5 条），
+   文章的检索与操作统一在 /article（内容视图）。 */
 const store = useCmsStore();

 const refTreePanel = useTemplateRef("refTreePanel");
@@ -35,12 +37,8 @@ const typeDict = [
 ];
 const typeLabel = (t?: number) => typeDict.find(i => i.value === t)?.label || "未知";

-/** 首页展示形态（docs/12；仅列表型栏目有意义，空=主题默认卡） */
-const homeStyleDict = [
-    { value: "", label: "默认卡片" },
-    { value: "news_grid", label: "双栏新闻卡" },
-    { value: "media_focus", label: "媒体聚焦列表" },
-];
+// F3（docs/20 §四）：「首页展示形态」配置入口已收敛到「站点设置 → 首页布局」区块属性，
+// 栏目管理只管数据（名称/类型/排序/状态/SEO）；存量 homeStyle 值由后端保存时保留。

 const sortModal = ref(false);
 const sortParentId = ref<number | null>(null);
@@ -61,7 +59,6 @@ const form = reactive({
    type: 1,
    linkUrl: "",
    content: "",
-    homeStyle: "",
    sortNo: 0,
    seoTitle: "",
    seoDescription: "",
@@ -156,7 +153,6 @@ async function showAddNode() {
    form.type = 1;
    form.linkUrl = "";
    form.content = "";
-    form.homeStyle = "";
    form.sortNo = 0;
    form.seoTitle = "";
    form.seoDescription = "";
@@ -179,7 +175,6 @@ function showEditNode() {
        type: node.type ?? 1,
        linkUrl: node.linkUrl || "",
        content: node.content || "",
-        homeStyle: node.homeStyle || "",
        sortNo: node.sortNo ?? 0,
        seoTitle: node.seoTitle || "",
        seoDescription: node.seoDescription || "",
@@ -261,7 +256,6 @@ async function save() {
                type: form.type,
                linkUrl: form.linkUrl || undefined,
                content: form.content || undefined,
-                homeStyle: form.type === 1 && form.homeStyle ? form.homeStyle : undefined,
                sortNo: form.sortNo,
                seoTitle: form.seoTitle || undefined,
                seoDescription: form.seoDescription || undefined,
@@ -440,13 +434,13 @@ function openLink(url: string) {
                    </div>
                </div>

-                <!-- 列表型：本栏目文章管理（联动仅经 categoryId watch，拖拽排序不触发） -->
-                <ArticleListPanel
+                <!-- 列表型：只读内容概览（P-D1 结构/内容视图切分；文章操作统一在 /article） -->
+                <CategoryContentSummary
                    v-if="selected.type === 1"
                    class="panel-body"
                    :category-id="selected.id"
-                    :extra-height="78"
-                    fixed-category
+                    :category-name="selected.name"
+                    :tree="treeData"
                />

                <!-- 单页型：正文渲染预览 + 元信息 + 编辑入口 -->
@@ -547,12 +541,6 @@ function openLink(url: string) {
                        <div v-else class="editor-placeholder">编辑器加载中……</div>
                    </div>
                </FormItem>
-                <FormItem v-if="form.type === 1" label="首页展示形态">
-                    <Select v-model="form.homeStyle" placeholder="默认卡片">
-                        <Option v-for="s in homeStyleDict" :key="s.value" :value="s.value">{{ s.label }}</Option>
-                    </Select>
-                    <p class="form-tip">首页该栏目区块的呈现形态；「双栏新闻卡/媒体聚焦列表」需皮肤包支持（如炫彩校园），旧主题按默认卡展示。也可在「站点设置 → 首页布局」里按区块单独指定形态（以那里为准）。</p>
-                </FormItem>

                <Divider size="small" orientation="left">SEO 设置</Divider>
                <FormItem label="SEO 标题">
@@ -0,0 +1,309 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from "vue";
+import { Message } from "view-ui-plus";
+import Utils from "@/utils/index";
+import MyConfirm from "@/components/MyConfirm";
+import { categoryApi, personApi, uploadUrl } from "@/api/module/cms";
+import { useCmsStore } from "@/store";
+import { CategoryTreeNode, PersonVo } from "@/types/cms";
+
+/**
+ * 名师风采人物管理（docs/20 D-7，people 区块数据源）。
+ * 站点级 CRUD：姓名/头衔/简介/头像（附件上传 scene=person）/所属栏目（分组）/排序/状态。
+ * 入口：首页布局编辑器 people 区块属性面板「维护人物数据」直达；菜单挂靠见路由 meta（modId 3 轮播管理族）。
+ */
+const store = useCmsStore();
+
+const rows = ref<PersonVo[]>([]);
+const loading = ref(false);
+const tree = ref<CategoryTreeNode[]>([]);
+const tableHeight = Utils.useTableHeight({ isSearch: true, isOperat: true });
+
+/** 树拍平（含虚拟根排除） */
+const flat = computed(() => {
+    const out: { id: number; name: string; depth: number }[] = [];
+    const walk = (nodes: CategoryTreeNode[], depth: number) => {
+        (nodes || []).forEach(n => {
+            out.push({ id: n.id as number, name: n.name, depth });
+            walk(n.children || [], depth + 1);
+        });
+    };
+    walk(tree.value, 0);
+    return out;
+});
+const nameOfCategory = (id?: number) => (id == null ? "—" : flat.value.find(c => c.id === id)?.name || `#${id}`);
+
+const columns = [
+    {
+        title: "头像",
+        key: "avatar",
+        width: 90,
+        align: "center",
+        render: (h: any, p: any) =>
+            p.row.avatar
+                ? h("img", { src: p.row.avatar, style: { width: "48px", height: "48px", borderRadius: "50%", objectFit: "cover" } })
+                : h(
+                      "span",
+                      { style: { display: "inline-flex", alignItems: "center", justifyContent: "center", width: "48px", height: "48px", borderRadius: "50%", background: "#e8f1ff", color: "#2d8cf0", fontWeight: 600 } },
+                      (p.row.name || "?").slice(0, 1),
+                  ),
+    },
+    { title: "姓名", key: "name", width: 120 },
+    { title: "头衔/职称", key: "title", width: 160, tooltip: true, render: (h: any, p: any) => h("span", p.row.title || "—") },
+    { title: "简介", key: "bio", minWidth: 220, tooltip: true, render: (h: any, p: any) => h("span", p.row.bio || "—") },
+    {
+        title: "所属栏目",
+        key: "categoryId",
+        width: 140,
+        render: (h: any, p: any) => h("span", nameOfCategory(p.row.categoryId)),
+    },
+    { title: "排序", key: "sortNo", width: 80, align: "center" },
+    {
+        title: "状态",
+        key: "status",
+        width: 90,
+        align: "center",
+        render: (h: any, p: any) => h(Tag, { color: p.row.status === 1 ? "success" : "default" }, () => (p.row.status === 1 ? "启用" : "停用")),
+    },
+    {
+        title: "操作",
+        key: "action",
+        width: 120,
+        fixed: "right",
+        align: "center",
+        render: (h: any, p: any) => [
+            Utils.operatingHandle(h, "编辑", "icon-edit", () => openEdit(p.row)),
+            Utils.operatingHandle(h, "删除", "icon-ashbin", () => doDelete(p.row)),
+        ],
+    },
+];
+
+const modalVisible = ref(false);
+const saving = ref(false);
+const formRef = ref();
+const form = reactive({
+    id: undefined as number | undefined,
+    name: "",
+    title: "",
+    bio: "",
+    avatar: "",
+    categoryId: undefined as number | undefined,
+    sortNo: 0,
+    status: 1,
+});
+
+const rules = {
+    name: [{ required: true, message: "姓名不得为空", trigger: "blur" }],
+};
+
+async function run() {
+    if (!store.siteId) return;
+    loading.value = true;
+    try {
+        rows.value = (await personApi.list(store.siteId).send()) || [];
+    } finally {
+        loading.value = false;
+    }
+}
+
+async function loadTree() {
+    if (!store.siteId) return;
+    try {
+        tree.value = (await categoryApi.tree(store.siteId).send()) || [];
+    } catch {
+        tree.value = [];
+    }
+}
+
+function openCreate() {
+    Object.assign(form, {
+        id: undefined,
+        name: "",
+        title: "",
+        bio: "",
+        avatar: "",
+        categoryId: undefined,
+        sortNo: 0,
+        status: 1,
+    });
+    modalVisible.value = true;
+}
+
+function openEdit(row: PersonVo) {
+    Object.assign(form, {
+        id: row.id,
+        name: row.name,
+        title: row.title || "",
+        bio: row.bio || "",
+        avatar: row.avatar || "",
+        categoryId: row.categoryId,
+        sortNo: row.sortNo,
+        status: row.status,
+    });
+    modalVisible.value = true;
+}
+
+function avatarUploaded(res: any) {
+    if (res.code === 0 && res.data) {
+        form.avatar = res.data.url;
+    } else {
+        Message.error(res.msg || "头像上传失败");
+    }
+}
+
+async function save() {
+    const valid = await formRef.value?.validate();
+    if (!valid) {
+        Message.warning("请填写红色星号内容！"); // bsch §4
+        return;
+    }
+    saving.value = true;
+    try {
+        await personApi
+            .save({
+                id: form.id,
+                siteId: store.siteId!,
+                name: form.name,
+                title: form.title || undefined,
+                bio: form.bio || undefined,
+                avatar: form.avatar || undefined,
+                categoryId: form.categoryId || undefined,
+                sortNo: form.sortNo,
+                status: form.status,
+            })
+            .send();
+        Message.success("保存成功！");
+        modalVisible.value = false;
+        run();
+    } finally {
+        saving.value = false;
+    }
+}
+
+function doDelete(row: PersonVo) {
+    MyConfirm({
+        title: "删除人物",
+        msg: `确定删除「${row.name}」吗？首页名师风采区块将不再展示该人物。`,
+        async onOk() {
+            await personApi.delete({ id: row.id!, siteId: store.siteId! }).send();
+            Message.success("操作成功！");
+            run();
+        },
+    });
+}
+
+onMounted(() => {
+    run();
+    loadTree();
+});
+
+// 站点上下文切换即时重载（docs/09 §3.3）
+watch(() => store.siteId, () => {
+    run();
+    loadTree();
+});
+</script>
+
+<template>
+    <div class="page-wrapper">
+        <div class="main-container">
+        <div class="fix mb-12">
+            <Button class="fl" type="primary" size="large" @click="openCreate">
+                <Icon type="ios-add" />
+                新增人物
+            </Button>
+            <span class="size-tip fr">名师风采数据源：首页布局「名师风采」区块按所属栏目过滤展示（未分组 = 全部人物区块不选栏目时可见）</span>
+        </div>
+        <Table
+            class="link-table table-bottom-box"
+            :columns="columns"
+            :data="rows"
+            :height="tableHeight"
+            :loading="loading"
+            no-data-text="暂无人物"
+        />
+
+        <Modal v-model="modalVisible" :title="form.id ? '编辑人物' : '新增人物'" :mask-closable="false" width="560px">
+            <Form ref="formRef" :model="form" :rules="rules" :label-width="100">
+                <FormItem label="姓名" prop="name">
+                    <Input v-model="form.name" :maxlength="100" placeholder="如 王立群" />
+                </FormItem>
+                <FormItem label="头衔/职称">
+                    <Input v-model="form.title" :maxlength="100" placeholder="如 教授、长江学者" />
+                </FormItem>
+                <FormItem label="简介">
+                    <Input v-model="form.bio" type="textarea" :rows="2" :maxlength="500" placeholder="一句话简介（卡片下方展示）" />
+                </FormItem>
+                <FormItem label="头像">
+                    <Upload
+                        :action="uploadUrl() + '?siteId=' + store.siteId + '&scene=person'"
+                        with-credentials
+                        :show-upload-list="false"
+                        :format="['jpg', 'jpeg', 'png', 'webp']"
+                        :on-success="avatarUploaded"
+                    >
+                        <Button icon="ios-cloud-upload-outline">上传头像</Button>
+                    </Upload>
+                    <div v-if="form.avatar" class="avatar-preview-row">
+                        <img :src="form.avatar" class="avatar-preview" />
+                        <Button size="small" type="text" class="avatar-clear" @click="form.avatar = ''">清除</Button>
+                    </div>
+                    <p class="form-tip">建议正方形照片（如 300×300）；不上传时首页显示姓名首字圆形徽章</p>
+                </FormItem>
+                <FormItem label="所属栏目">
+                    <Select v-model="form.categoryId" clearable placeholder="不选 = 未分组（people 区块选栏目时不会出现）">
+                        <Option v-for="c in flat" :key="c.id" :value="c.id">
+                            <span :style="{ paddingLeft: c.depth * 16 + 'px' }">{{ c.name }}</span>
+                        </Option>
+                    </Select>
+                </FormItem>
+                <FormItem label="排序">
+                    <InputNumber v-model="form.sortNo" :min="0" />
+                </FormItem>
+                <FormItem label="状态">
+                    <RadioGroup v-model="form.status">
+                        <Radio :label="1">启用</Radio>
+                        <Radio :label="0">停用</Radio>
+                    </RadioGroup>
+                </FormItem>
+            </Form>
+            <template #footer>
+                <Button @click="modalVisible = false">取消</Button>
+                <Button type="primary" :loading="saving" @click="save">保存</Button>
+            </template>
+        </Modal>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.size-tip {
+    color: #999;
+    line-height: 40px;
+}
+.avatar-preview-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 8px;
+    .avatar-preview {
+        width: 56px;
+        height: 56px;
+        border-radius: 50%;
+        object-fit: cover;
+        border: 1px solid #e5e6eb;
+    }
+    .avatar-clear {
+        color: #999;
+        &:hover {
+            color: #ed4014;
+        }
+    }
+}
+.form-tip {
+    color: #999;
+    font-size: 12px;
+    line-height: 1.6;
+    margin-top: 4px;
+}
+</style>
@@ -8,13 +8,15 @@ import { adminPathOf, portalUrlOf } from "@/utils/sitePath";
 import { useCmsStore } from "@/store";
 import config from "@/assets/config/host.config";
 import { SiteVo, ThemeVo } from "@/types/cms";
+import SiteCard from "./components/SiteCard.vue";
+import SiteMainCard from "./components/SiteMainCard.vue";

 /**
- * 站点管理列表页（docs/16 主线A 收敛后）：列表只做表格——
- * 新建 → 站点设置中心创建模式（site/new）；行「编辑」→ 站点设置中心（site/setting/:id）。
- * 分区卡片/皮肤/首页布局等全部配置能力收敛到 SiteSetting.vue（原编辑弹窗与三步向导退役）。
+ * 站点工作台（docs/22 v3，原型 docs/21 屏1）：按学校分组 = 主站宽卡 + 院系子站网格，
+ * 站点父子层级用版式分区表达（不靠旧表格「所属主站」列文字）；卡片 ⇄ 表格切换 + 名称/编码搜索。
+ * 新建 → 站点设置中心创建模式（site/new）；卡/行「站点设置」→ site/setting/:id（docs/16 主线A 收敛不变）。
 * 学校化管理（docs/09 §3.3）：默认只显示当前学校站点；超管可经工作台「全部站点总览」（?scope=all）。
- * 行「进入管理」= 院系子站切换入口；跨校行先重建学校上下文；当前站点行带「当前」标记。
+ * 「进入管理」= 院系子站切换入口；跨校行先重建学校上下文；当前站带「当前」徽章且按钮禁用。
 */
 const store = useCmsStore();
 const route = useRoute();
@@ -39,37 +41,91 @@ const themeMeta = computed(() => {
    return map;
 });

+/** 视图模式（docs/22 Q2：保留表格，批量/密集场景） */
+const view = ref<"card" | "table">("card");
+/** 搜索关键字：按 站点名称 / 编码 即时过滤（站点多了找不到的痛点） */
+const keyword = ref("");
+
+/** 学校分组：每组 = 主站宽卡 + 该主站的院系子站网格。
+ *  单校视角只有 1 组；超管 ?scope=all 时按 schId 分组依次排列。 */
+interface SiteGroup {
+    schKey: string;
+    schName: string;
+    main: SiteVo | null;
+    subs: SiteVo[];
+    /** 子站总数（过滤前）：主站卡的「子站」统计要的是真实规模，不随搜索变化 */
+    rawSubs: number;
+}
+
+const groups = computed<SiteGroup[]>(() => {
+    const kw = keyword.value.trim().toLowerCase();
+    const match = (s: SiteVo) =>
+        !kw || s.name.toLowerCase().includes(kw) || String(s.code || "").toLowerCase().includes(kw);
+
+    const map = new Map<string, SiteGroup>();
+    rows.value.forEach(s => {
+        const key = String(s.schId ?? s.schName ?? "0");
+        let g = map.get(key);
+        if (!g) {
+            g = { schKey: key, schName: s.schName || "", main: null, subs: [], rawSubs: 0 };
+            map.set(key, g);
+        }
+        if (!s.parentSiteId) {
+            g.main = s;
+        } else {
+            g.rawSubs += 1;
+            // 子站按关键字过滤；但组的主站卡始终保留作层级锚点（不因主站名不匹配而掉链）
+            if (match(s)) g.subs.push(s);
+        }
+    });
+
+    // 搜索态：既无命中子站、主站自身也不匹配的组整组隐去
+    return [...map.values()].filter(g => !kw || g.subs.length > 0 || (g.main && match(g.main)));
+});
+
 const columns = [
-    { title: "站点编码", key: "code", width: 140 },
    {
        title: "站点名称",
        key: "name",
-        minWidth: 200,
+        minWidth: 220,
        tooltip: true,
        render: (h: any, p: any) =>
            h("span", { style: "display:inline-flex;align-items:center;gap:6px" }, [
+                // 层级徽章前置：主站/院系一眼可辨（取代原本只靠「所属主站」列文字）
+                h(
+                    "span",
+                    { class: p.row.parentSiteId ? "tier-bdg sub" : "tier-bdg main" },
+                    p.row.parentSiteId ? "院系" : "主站"
+                ),
                h("span", p.row.name),
-                // 当前操作站点标记：壳面包屑校名后缀同源（store.currentSite）
                p.row.id === store.siteId ? h(Tag, { color: "success" }, () => "当前") : null,
+                p.row.status !== 1 ? h(Tag, { color: "default" }, () => "停用") : null,
            ]),
    },
+    { title: "站点编码", key: "code", width: 120 },
    { title: "学校", key: "schName", width: 150, tooltip: true },
    {
        title: "所属主站",
        key: "parentSiteId",
-        width: 150,
+        width: 160,
        tooltip: true,
-        render: (h: any, p: any) => h("span", p.row.parentSiteId ? p.row.parentName || `ID ${p.row.parentSiteId}` : "顶层站点"),
+        render: (h: any, p: any) =>
+            h("span", p.row.parentSiteId ? p.row.parentName || `ID ${p.row.parentSiteId}` : "顶层站点"),
    },
    {
+        // 200px：让「缩略图 + 名称（包名）」单行放下，消除原 150px 下的 3 行竖排
        title: "皮肤包",
        key: "theme",
-        width: 150,
+        width: 200,
        render: (h: any, p: any) => {
            const t = themeMeta.value[p.row.theme || "default"];
-            return h("span", { style: "display:inline-flex;align-items:center;gap:6px" }, [
+            return h("span", { style: "display:inline-flex;align-items:center;gap:7px;white-space:nowrap" }, [
                t
-                    ? h("img", { src: assetUrl(t.screenshotUrl), style: "width:44px;height:28px;object-fit:cover;border-radius:3px;border:1px solid #eee", alt: "" })
+                    ? h("img", {
+                          src: assetUrl(t.screenshotUrl),
+                          style: "width:44px;height:28px;object-fit:cover;border-radius:3px;border:1px solid #eee",
+                          alt: "",
+                      })
                    : h("span", { style: "display:inline-block;width:44px;height:28px;background:#f0f2f5;border-radius:3px" }),
                h("span", t ? `${t.title}（${p.row.theme}）` : p.row.theme || "default"),
            ]);
@@ -82,19 +138,17 @@ const columns = [
        width: 90,
        align: "center",
        render: (h: any, p: any) =>
-            h(Tag, { color: p.row.status === 1 ? "success" : "default" }, () =>
-                p.row.status === 1 ? "启用" : "停用"
-            ),
+            h(Tag, { color: p.row.status === 1 ? "success" : "default" }, () => (p.row.status === 1 ? "启用" : "停用")),
    },
    {
        title: "操作",
        key: "action",
-        width: 150,
+        width: 200,
        fixed: "right",
        align: "center",
        render: (h: any, p: any) => [
-            Utils.operatingHandle(h, "进入管理", "icon-apps", () => enterManage(p.row), p.row.id === store.siteId),
-            Utils.operatingHandle(h, "编辑", "icon-edit", () => openSetting(p.row)),
+            Utils.operatingHandle(h, "进入管理", "icon-apps", () => enterManage(p.row), p.row.id === store.siteId || p.row.status !== 1),
+            Utils.operatingHandle(h, "站点设置", "icon-edit", () => openSetting(p.row)),
            Utils.operatingHandle(h, "门户", "icon-browse", () => openPortal(p.row)),
        ],
    },
@@ -187,19 +241,186 @@ watch(() => store.currentSchool?.schId, () => run());
 <template>
    <div class="page-wrapper">
        <div class="main-container">
-        <div class="fix" v-if="scopeAll">
-            <Alert type="info" show-icon style="width: 100%">
-                全局站点视图：显示全部学校的站点（含各校主站与院系子站）。
+            <!-- 超管全局视图（?scope=all）：按学校分组，每组 = 主站宽卡 + 子站网格 -->
+            <Alert v-if="scopeAll" type="info" show-icon style="width: 100%; margin-bottom: 12px">
+                全局站点视图：按学校分组显示全部站点（含各校主站与院系子站）。
                <a href="javascript:void(0);" @click="goBackWorkbench">返回学校工作台</a>
            </Alert>
-        </div>
-        <div class="fix mb-12" v-if="canCreateSite">
-            <Button class="fl" type="primary" size="large" @click="openCreate">
-                <Icon type="ios-add" />
-                {{ isSchoolAdmin ? "新建院系子站" : "新建站点" }}
-            </Button>
-        </div>
-        <Table class="link-table table-bottom-box" :columns="columns" :data="rows" :height="tableHeight" :loading="loading" no-data-text="暂无站点" />
+
+            <!-- 工具行：新建 + 卡片/表格切换 + 搜索 -->
+            <div class="wb-toolbar mb-12">
+                <Button v-if="canCreateSite" type="primary" @click="openCreate">
+                    <Icon type="ios-add" />
+                    {{ isSchoolAdmin ? "新建院系子站" : "新建站点" }}
+                </Button>
+                <div class="seg">
+                    <button type="button" :class="{ on: view === 'card' }" @click="view = 'card'">卡片</button>
+                    <button type="button" :class="{ on: view === 'table' }" @click="view = 'table'">表格</button>
+                </div>
+                <div class="seg-search">
+                    <Input v-model="keyword" placeholder="搜索站点名称 / 编码" clearable style="width: 220px" />
+                </div>
+            </div>
+
+            <Spin v-if="loading" size="large" fix />
+
+            <template v-else>
+                <!-- 卡片视图：主站宽卡 + 院系子站网格 -->
+                <div v-if="view === 'card'">
+                    <template v-if="groups.length">
+                        <section v-for="g in groups" :key="g.schKey" class="site-group">
+                            <h3 v-if="scopeAll && (g.schName || g.main?.name)" class="group-cap">
+                                {{ g.schName || g.main?.name }}
+                            </h3>
+
+                            <SiteMainCard
+                                v-if="g.main"
+                                :site="g.main"
+                                :is-current="g.main.id === store.siteId"
+                                :theme="themeMeta[g.main.theme || 'default']"
+                                :sub-count="g.rawSubs"
+                                @enter="enterManage"
+                                @setting="openSetting"
+                                @portal="openPortal"
+                            />
+
+                            <div class="zone-cap">
+                                <h3>院系子站</h3>
+                                <span class="cnt">{{ g.subs.length }} 个</span>
+                            </div>
+
+                            <div v-if="g.subs.length" class="card-grid">
+                                <SiteCard
+                                    v-for="s in g.subs"
+                                    :key="s.id"
+                                    :site="s"
+                                    :is-current="s.id === store.siteId"
+                                    :theme="themeMeta[s.theme || 'default']"
+                                    @enter="enterManage"
+                                    @setting="openSetting"
+                                    @portal="openPortal"
+                                />
+                            </div>
+                            <div v-else class="empty-state">
+                                <p v-if="keyword">没有匹配「{{ keyword }}」的院系子站。</p>
+                                <p v-else>本校暂无院系子站。</p>
+                                <Button v-if="canCreateSite && !keyword" type="primary" @click="openCreate">
+                                    <Icon type="ios-add" />
+                                    新建院系子站
+                                </Button>
+                            </div>
+                        </section>
+                    </template>
+                    <div v-else class="empty-state">
+                        <p v-if="keyword">没有匹配「{{ keyword }}」的站点。</p>
+                        <p v-else>暂无站点，请联系平台管理员在学校工作台添加。</p>
+                    </div>
+                </div>
+
+                <!-- 表格视图：保留批量速览（列已重排） -->
+                <Table
+                    v-else
+                    class="link-table table-bottom-box"
+                    :columns="columns"
+                    :data="rows"
+                    :height="tableHeight"
+                    :loading="loading"
+                    no-data-text="暂无站点"
+                />
+            </template>
        </div>
    </div>
 </template>
+
+<style scoped lang="scss">
+.wb-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+/* 卡片 ⇄ 表格 视图切换（原型同款分段控件） */
+.seg {
+    display: inline-flex;
+    border: 1px solid #dcdee2;
+    border-radius: 4px;
+    overflow: hidden;
+    background: #fff;
+    button {
+        border: none;
+        background: transparent;
+        padding: 6px 14px;
+        font-size: 13px;
+        line-height: 1.4;
+        cursor: pointer;
+        color: #515a6e;
+        font-family: inherit;
+        &.on {
+            background: #eff4ff;
+            color: #4465d4;
+            font-weight: bold;
+        }
+    }
+}
+.seg-search {
+    margin-left: auto;
+}
+.site-group + .site-group {
+    margin-top: 34px;
+    padding-top: 26px;
+    border-top: 1px solid #eef0f3;
+}
+.group-cap {
+    margin: 0 0 14px;
+    font-size: 15px;
+    color: #17233d;
+}
+.zone-cap {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 0 0 12px;
+    h3 {
+        margin: 0;
+        font-size: 16px;
+        color: #17233d;
+    }
+    .cnt {
+        font-size: 12px;
+        color: #808695;
+    }
+}
+.card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
+    gap: 16px;
+}
+.empty-state {
+    border: 1px dashed #dcdee2;
+    border-radius: 8px;
+    background: #fff;
+    padding: 44px 0;
+    text-align: center;
+    color: #808695;
+    p {
+        margin: 0 0 16px;
+        font-size: 13px;
+    }
+}
+/* 表格视图的层级徽章（render 出的 span，scoped 属性会下发到该节点） */
+:deep(.tier-bdg) {
+    display: inline-block;
+    flex-shrink: 0;
+    white-space: nowrap;
+    font-size: 10px;
+    line-height: 16px;
+    padding: 0 5px;
+    border-radius: 3px;
+    color: #fff;
+    &.main {
+        background: #577afb;
+    }
+    &.sub {
+        background: #ff9900;
+    }
+}
+</style>
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
+import { computed, nextTick, onMounted, reactive, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { Message } from "view-ui-plus";
 import { siteApi, themeApi } from "@/api/module/cms";
@@ -8,19 +8,19 @@ import { portalUrlOf, adminPathOf, previewPortalUrl } from "@/utils/sitePath";
 import { useCmsStore } from "@/store";
 import { SiteVo, ThemeVo } from "@/types/cms";
 import { resolveEditableTheme } from "@/utils/themeEdit";
+import { mergeConfigPatch } from "@/utils/siteConfigForm";
 import ThemePicker from "@/components/theme/ThemePicker.vue";
 import ThemePreviewFrame from "@/components/theme/ThemePreviewFrame.vue";
 import SiteConfigForm from "@/views/cms/components/SiteConfigForm.vue";
 import HomeLayoutEditor from "@/views/cms/homeLayout/HomeLayoutEditor.vue";

 /**
- * 站点设置中心（docs/16 主线A 整页化）：编辑/新增站点从模态框/三步向导 → 完整页面。
- * projman 模式：锚点导航 + 分区卡片（card-header/body/footer 三段式），每分区独立保存。
- * 单一 configJson 事实源（§3.5）：各分区编辑器只读写自己的键空间（SiteConfigForm 分区作用域
- * + HomeLayoutEditor 仅动 home_layout 键），「仅保存本分区」= 校验本分区 → 当前 configJson 全量提交；
- * 其他分区未保存的修改仍在内存里，下次任一分区保存会一并带上（卡片 footer 已注明）。
- * 创建模式（site/new，D5 向导退役）：仅①基本信息②皮肤与外观可编辑，③~⑦锁定置灰，
- * 创建成功原地 replace 到 site/setting/{id} 解锁全部分区。
+ * 站点设置中心（docs/16 主线A 整页化 → docs/20 F1 Tab 化 + 渐进式向导）：
+ * 编辑模式 = 顶部 7 Tab（基本信息/皮肤与外观/首页布局/基础展示/页脚信息/SEO 与域名/自定义样式），
+ * 每个 Tab 独立表单、独立 dirty 状态、独立保存——保存只合并本 Tab 的键空间进
+ * lastSavedConfigJson（服务端事实源），其他 Tab 的未保存修改既不丢失也不被连带提交。
+ * 新建模式 = 渐进式向导：第一步只填基本信息，创建成功自动进入第二步（选皮肤），
+ * 完成后提示并展开全部 Tab；不再有任何「创建站点后开放」灰态锁定。
 */
 const store = useCmsStore();
 const route = useRoute();
@@ -31,7 +31,6 @@ const isCreate = computed(() => siteIdParam.value == null);

 /** B1 建站权限拆分：校级（学校上下文内）可自助创建院系子站；超管行为不变 */
 const isSchoolAdmin = computed(() => !store.isSuperAdmin && !!store.currentSchool);
-const canCreateSite = computed(() => store.isSuperAdmin || isSchoolAdmin.value);
 /** 校级锁定在本校主站下建子站（原向导 lockParentId 语义） */
 const lockParentId = computed(() => (isCreate.value && isSchoolAdmin.value ? store.currentSchool?.mainSiteId : undefined));

@@ -41,23 +40,26 @@ const row = ref<SiteVo | null>(null);
 const sites = ref<SiteVo[]>([]);
 const themes = ref<ThemeVo[]>([]);

-/** 分区清单（锚点导航；locked = 创建模式锁定） */
-const sections = [
-    { key: "basic", title: "基本信息", desc: "编码 / 名称 / 归属 / 状态" },
-    { key: "theme", title: "皮肤与外观", desc: "选皮肤 / 自定义 CSS" },
-    { key: "layout", title: "首页布局", desc: "区块序列编排", locked: true },
-    { key: "display", title: "基础展示", desc: "品牌标识与图片" },
-    { key: "footer", title: "页脚信息", desc: "联系方式与社媒" },
-    { key: "seo", title: "SEO 与域名", desc: "收录与独立域名" },
-    { key: "extras", title: "扩展参数", desc: "预留键位", locked: true },
-];
-const activeSection = ref("basic");
-let observer: IntersectionObserver | null = null;
+// ===== 向导（F1）：1=填基本信息（创建模式）；2=选皮肤（创建成功后）；0=常规编辑 =====
+const wizardStep = ref(isCreate.value ? 1 : 0);

-/** 单一 configJson 事实源（§3.5） */
-const configJson = ref("");
+// ===== Tab 结构（F1：7 Tab；自定义样式独立成 Tab）=====
+const TABS = [
+    { key: "basic", title: "基本信息" },
+    { key: "theme", title: "皮肤与外观" },
+    { key: "layout", title: "首页布局" },
+    { key: "display", title: "基础展示" },
+    { key: "footer", title: "页脚信息" },
+    { key: "seo", title: "SEO 与域名" },
+    { key: "css", title: "自定义样式" },
+] as const;
+type TabKey = (typeof TABS)[number]["key"];
+const activeTab = ref<string>("basic");

-/** ① 基本信息分区 */
+/** 服务端事实源：最近一次保存成功（或载入）时的 configJson —— 各 Tab 保存以此为基础做增量合并 */
+const lastSavedConfigJson = ref("");
+
+/** ① 基本信息表单 */
 const basicRef = ref();
 const basic = reactive({
    id: undefined as number | undefined,
@@ -69,21 +71,36 @@ const basic = reactive({
    status: 1,
 });

-/** ② 皮肤与外观分区（工作项 T：参数微调已迁皮肤包管理，站点只负责选哪套包） */
+/** ② 皮肤与外观（工作项 T：参数微调已迁皮肤包管理，站点只负责选哪套包） */
 const theme = ref("default");
 const themeUnregistered = ref(false);
-const customCss = ref("");
 const previewVisible = ref(false);
 const editTheme = computed(() => themes.value.find(t => t.name === theme.value));

-/** ③~⑦ 分区表单 ref（分区独立校验） */
-const layoutEditorRef = ref();
-const displayFormRef = ref();
-const footerFormRef = ref();
-const seoFormRef = ref();
-const extrasFormRef = ref();
+/** ⑦ 自定义样式（F1：独立 Tab，config_json.custom_css，服务端黑名单强校验） */
+const customCss = ref("");

+/** ③~⑥ 分区表单：各持独立模型（seed 后不再互相同步，保存各自合并） */
+const layoutEditorRef = ref();
+const layoutModel = ref("");
+const displayFormRef = ref();
+const displayModel = ref("");
+const footerFormRef = ref();
+const footerModel = ref("");
+const seoFormRef = ref();
+const seoModel = ref("");
+
+/** 各 Tab 独立 dirty 状态（切 Tab 不丢；仅本 Tab 保存后清除） */
+const dirty = reactive<Record<string, boolean>>({
+    basic: false, theme: false, layout: false, display: false, footer: false, seo: false, css: false,
+});
 const saving = reactive<Record<string, boolean>>({});
+/** initFromRow / 保存回灌种子时挂起 dirty 标记 */
+let seeding = false;
+
+function tabLabel(tab: { key: string; title: string }): string {
+    return dirty[tab.key] ? `${tab.title} ●` : tab.title;
+}

 const schoolScopedSites = computed(() =>
    !store.currentSchool ? sites.value : sites.value.filter(s => s.schId === store.currentSchool!.schId)
@@ -103,6 +120,10 @@ const portalPreviewUrl = computed(() =>
            ? portalUrlOf(row.value)
            : ""
 );
+/** F2 实时预览 iframe 地址（编辑模式 = serviceHost + 正式门户首页） */
+const portalFrameUrl = computed(() =>
+    !isCreate.value && row.value ? `${config.serviceHost}${portalUrlOf(row.value)}` : undefined
+);

 const rules = {
    code: [
@@ -123,31 +144,6 @@ onMounted(async () => {
        basic.parentSiteId = lockParentId.value;
    }
    loading.value = false;
-    patchAncestorOverflow();
-    nextTick(setupAnchorObserver);
-});
-
-/**
- * 左侧锚点导航 sticky 的生效前提：布局遗留的 .main-container 带 overflow:hidden
- * （清浮动时代产物），sticky 会改为相对这个"自身不滚动的隐藏滚动盒"定位 → 表现为
- * 跟随内容滚走（2026-09-20 实测滚动 600px 导航 top=-387）。本页内容为 flex/常规流，
- * 不依赖该 overflow 裁剪浮动，故进入本页时运行时改写、离开时还原，零全局影响。
- */
-let patchedContainer: HTMLElement | null = null;
-function patchAncestorOverflow() {
-    const el = document.querySelector<HTMLElement>(".base-wrap-main .main-container");
-    if (el && getComputedStyle(el).overflow === "hidden") {
-        patchedContainer = el;
-        el.style.overflow = "visible";
-    }
-}
-
-onBeforeUnmount(() => {
-    observer?.disconnect();
-    if (patchedContainer) {
-        patchedContainer.style.overflow = "";
-        patchedContainer = null;
-    }
 });

 async function loadSites() {
@@ -162,12 +158,14 @@ async function loadThemes() {
    }
 }

-function initFromRow(id: number) {
+/** 载入站点 → 各 Tab 模型按 lastSavedConfigJson 种子（seeding 挂起 dirty 标记） */
+async function initFromRow(id: number) {
    const r = sites.value.find(s => s.id === id);
    if (!r) {
        loadError.value = "站点不存在或无权管理该站点";
        return;
    }
+    seeding = true;
    row.value = r;
    // 主题值保留原值（未注册时告警，由服务端校验拒绝），不再静默改写为 default
    const resolved = resolveEditableTheme(r.theme, themes.value.map(t => t.name));
@@ -182,8 +180,18 @@ function initFromRow(id: number) {
        status: r.status,
    });
    theme.value = resolved.theme;
-    configJson.value = r.configJson || "";
-    customCss.value = readCustomCss(configJson.value);
+    lastSavedConfigJson.value = r.configJson || "";
+    layoutModel.value = lastSavedConfigJson.value;
+    displayModel.value = lastSavedConfigJson.value;
+    footerModel.value = lastSavedConfigJson.value;
+    seoModel.value = lastSavedConfigJson.value;
+    customCss.value = readCustomCss(lastSavedConfigJson.value);
+    Object.keys(dirty).forEach(k => (dirty[k] = false));
+    // docs/20 返工 #2：seeding 是同步布尔位，而 Vue watcher 异步 flush——种值触发的 watcher 回调
+    // 落在下一个 flush 周期（此时同步代码早已把 seeding 置回 false），必须等它们在挂起窗口内
+    // 跑完再放行，否则冷加载即假脏
+    await nextTick();
+    seeding = false;
 }

 function readCustomCss(configJson: string): string {
@@ -195,24 +203,24 @@ function readCustomCss(configJson: string): string {
    }
 }

-/** 把面板值写入/移出 configJson（空值移除键；与 SiteConfigForm 的 preserved 往返兼容） */
-function withCustomCss(configJson: string, css: string): string {
-    let obj: Record<string, unknown>;
+/** HomeLayoutEditor 的整份 config 输出 → 仅取 home_layout 键的增量（无布局=删除键） */
+function layoutPatchOf(model: string): { home_layout?: unknown } {
    try {
-        obj = configJson && configJson.trim() ? JSON.parse(configJson) : {};
-        if (!obj || typeof obj !== "object" || Array.isArray(obj)) obj = {};
+        const parsed = model && model.trim() ? JSON.parse(model) : {};
+        if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+            return { home_layout: (parsed as Record<string, unknown>)["home_layout"] };
+        }
    } catch {
-        obj = {};
+        // 非法 JSON 视为无变更
    }
-    if (css.trim()) obj.custom_css = css;
-    else delete obj.custom_css;
-    return JSON.stringify(obj);
+    return {};
 }

 function pickTheme(name: string) {
    if (theme.value === name) return;
    theme.value = name;
    themeUnregistered.value = false;
+    dirty.theme = true;
 }

 function openPreview() {
@@ -220,13 +228,16 @@ function openPreview() {
 }

 /**
- * 统一提交（§3.5 分区独立保存模型）：payload = 页面当前事实源 + 基本信息快照；
- * patch.configJson 供分区保存前合并自己的键空间（如皮肤分区的 custom_css）。
- * 创建成功原地 replace 到 site/setting/{id} 并解锁全部分区。
+ * 统一提交（F1 Tab 独立保存）：site 字段 = 当前基本信息快照 + 当前皮肤；
+ * configJson = lastSavedConfigJson + 本 Tab 增量 patch（patch=null = 不动 config）。
+ * 成功后回写事实源并清本 Tab dirty；其他 Tab 的内存修改不受影响。
 */
-async function submitSection(key: string, patch: { configJson?: string }) {
-    saving[key] = true;
+async function persistTab(tab: TabKey, patch: Record<string, unknown> | null) {
+    saving[tab] = true;
    try {
+        const configJson = patch == null
+            ? lastSavedConfigJson.value || undefined
+            : mergeConfigPatch(lastSavedConfigJson.value, patch);
        const res = await siteApi
            .save({
                id: basic.id,
@@ -237,30 +248,42 @@ async function submitSection(key: string, patch: { configJson?: string }) {
                schName: isSchoolAdmin.value ? undefined : basic.schName || undefined,
                name: basic.name,
                theme: theme.value || undefined,
-                configJson: patch.configJson ?? configJson.value,
+                configJson,
                status: basic.status,
            })
            .send();
        if (isCreate.value && res && res.id) {
-            Message.success("站点创建成功！全部分区已开放");
+            // 向导第一步完成：原地 replace 解锁全部 Tab，自动进入第二步（选皮肤）
+            Message.success("站点创建成功！接下来为它挑选一套皮肤");
            await loadSites();
            const main = sites.value.find(s => s.id === (res.parentSiteId || 0));
            const schCode = main?.code || res.code;
            await router.replace(adminPathOf(schCode, res.parentSiteId ? res.code : null, `site/setting/${res.id}`));
            initFromRow(res.id);
-        } else {
-            Message.success("保存成功！");
-            if (res) {
-                row.value = res;
-                // 服务端归一后的 configJson 刷新事实源
-                if (typeof res.configJson === "string") {
-                    configJson.value = res.configJson;
-                    customCss.value = readCustomCss(configJson.value);
-                }
+            wizardStep.value = 2;
+            activeTab.value = "theme";
+            return;
+        }
+        Message.success("保存成功！");
+        if (res) {
+            row.value = res;
+            if (typeof res.configJson === "string") {
+                lastSavedConfigJson.value = res.configJson;
            }
        }
+        dirty[tab] = false;
+        // 保存回灌：本 Tab 模型与服务端事实源对齐（seeding 窗口须覆盖异步 flush 的 watcher，返工 #2 同 initFromRow）
+        seeding = true;
+        if (tab === "layout") {
+            layoutModel.value = lastSavedConfigJson.value;
+            layoutEditorRef.value?.refreshAfterSave?.();
+        } else if (tab === "css") {
+            customCss.value = readCustomCss(lastSavedConfigJson.value);
+        }
+        await nextTick();
+        seeding = false;
    } finally {
-        saving[key] = false;
+        saving[tab] = false;
    }
 }

@@ -270,43 +293,24 @@ async function saveBasic() {
        Message.warning("请填写红色星号内容！"); // bsch §4 统一提示
        return;
    }
-    await submitSection("basic", {});
+    await persistTab("basic", null);
 }

 async function saveTheme() {
-    await submitSection("theme", { configJson: withCustomCss(configJson.value, customCss.value) });
+    await persistTab("theme", null);
 }

-async function saveDisplay() {
-    if (!(await displayFormRef.value?.validate())) {
-        Message.warning("请填写红色星号内容！"); // bsch §4
-        return;
-    }
-    await submitSection("display", {});
+/** 向导第二步收口：保存皮肤 → 提示可继续配置首页布局，展开全部 Tab */
+async function finishWizard() {
+    await persistTab("theme", null);
+    wizardStep.value = 0;
+    Message.success("站点创建成功，可继续配置首页布局");
 }

-async function saveFooter() {
-    if (!(await footerFormRef.value?.validate())) {
-        Message.warning("请填写红色星号内容！"); // bsch §4
-        return;
-    }
-    await submitSection("footer", {});
-}
-
-async function saveSeo() {
-    if (!(await seoFormRef.value?.validate())) {
-        Message.warning("请填写红色星号内容！"); // bsch §4
-        return;
-    }
-    await submitSection("seo", {});
-}
-
-async function saveExtras() {
-    if (!(await extrasFormRef.value?.validate())) {
-        Message.warning("请填写红色星号内容！"); // bsch §4
-        return;
-    }
-    await submitSection("extras", {});
+/** 向导第二步跳过（皮肤先用当前选择/默认） */
+function skipWizard() {
+    wizardStep.value = 0;
+    Message.info("已跳过皮肤配置，全部设置已开放");
 }

 async function saveLayout() {
@@ -315,7 +319,31 @@ async function saveLayout() {
        Message.error(err);
        return;
    }
-    await submitSection("layout", {});
+    await persistTab("layout", layoutPatchOf(layoutModel.value));
+}
+
+/** 分区表单 ref 表（docs/20 返工 #4：模板实参里的 ref 会被 Vue 自动解包成组件实例，
+ * 旧代码按 `formRef.value?.validate()` 调用恒为 undefined → validate 恒 false；refs 必须在脚本侧取用） */
+const groupFormRefs: Record<"display" | "footer" | "seo", typeof displayFormRef> = {
+    display: displayFormRef,
+    footer: footerFormRef,
+    seo: seoFormRef,
+};
+
+async function saveGroupForm(tab: "display" | "footer" | "seo") {
+    const form = groupFormRefs[tab].value;
+    const firstError = await form?.validate();
+    if (firstError) {
+        // 精确到「字段名：原因」（内联红框 + 字段下方文案 + 滚动定位由 SiteConfigForm.validate 承担），
+        // 不再用「请填写红色星号内容」这类与实际校验机制不匹配的通用提示
+        Message.warning(firstError);
+        return;
+    }
+    await persistTab(tab, form?.ownFields?.() || {});
+}
+
+async function saveCss() {
+    await persistTab("css", { custom_css: customCss.value });
 }

 /** 门户预览（编辑模式）：新窗口打开真实门户 */
@@ -334,28 +362,25 @@ function backToList() {
    router.push(adminPathOf(schCode, row.value?.parentSiteId ? row.value.code : null, "site"));
 }

-function setupAnchorObserver() {
-    if (typeof IntersectionObserver === "undefined") return;
-    observer = new IntersectionObserver(
-        entries => {
-            entries.forEach(e => {
-                if (e.isIntersecting) {
-                    activeSection.value = (e.target as HTMLElement).dataset.section || activeSection.value;
-                }
-            });
-        },
-        { rootMargin: "-90px 0px -55% 0px", threshold: 0 },
-    );
-    sections.forEach(s => {
-        const el = document.getElementById(`sec-${s.key}`);
-        if (el) observer!.observe(el);
-    });
-}
-
-function scrollToSection(key: string) {
-    activeSection.value = key;
-    document.getElementById(`sec-${key}`)?.scrollIntoView({ behavior: "smooth", block: "start" });
-}
+// ===== dirty 追踪：各 Tab 模型变更即标脏（seeding 期间挂起）=====
+watch(basic, () => {
+    if (!seeding) dirty.basic = true;
+});
+watch(customCss, () => {
+    if (!seeding) dirty.css = true;
+});
+watch(layoutModel, () => {
+    if (!seeding) dirty.layout = true;
+});
+watch(displayModel, () => {
+    if (!seeding) dirty.display = true;
+});
+watch(footerModel, () => {
+    if (!seeding) dirty.footer = true;
+});
+watch(seoModel, () => {
+    if (!seeding) dirty.seo = true;
+});

 // 学校上下文切换即时重载（编辑中的站点归属变化防御）
 watch(() => store.currentSchool?.schId, () => loadSites());
@@ -381,28 +406,65 @@ watch(() => store.currentSchool?.schId, () => loadSites());
            <Alert v-if="loadError" type="error" show-icon style="margin-bottom: 12px">{{ loadError }}</Alert>
            <Spin v-if="loading" size="large" fix />

-            <div class="ss-layout">
-                <!-- 锚点导航 -->
-                <aside class="ss-nav">
-                    <div
-                        v-for="s in sections"
-                        :key="s.key"
-                        class="ss-nav-item"
-                        :class="{ active: activeSection === s.key }"
-                        @click="scrollToSection(s.key)"
-                    >
-                        <span class="ss-nav-title">
-                            {{ s.title }}
-                            <Icon v-if="isCreate && s.locked" type="md-lock" class="ss-nav-lock" />
-                        </span>
-                        <span class="ss-nav-desc">{{ s.desc }}</span>
-                    </div>
-                </aside>
+            <!-- 渐进式向导进度（F1）：仅创建流程期间展示 -->
+            <Steps v-if="wizardStep > 0" :current="wizardStep" class="ss-steps">
+                <Step title="基本信息" content="编码 / 名称 / 归属"></Step>
+                <Step title="皮肤与外观" content="挑一套门户皮肤"></Step>
+                <Step title="完整设置" content="首页布局等全部配置开放"></Step>
+            </Steps>

-                <!-- 分区卡片流 -->
-                <div class="ss-cards">
-                    <!-- ① 基本信息 -->
-                    <div id="sec-basic" class="card setting-card" data-section="basic">
+            <!-- ===== 向导第一步（创建模式）：仅基本信息表单 ===== -->
+            <div v-if="wizardStep === 1" class="card setting-card">
+                <div class="card-header">
+                    <span class="card-title">基本信息</span>
+                    <span class="card-subtitle">站点编码 / 名称 / 归属与状态</span>
+                </div>
+                <div class="card-body">
+                    <Form ref="basicRef" :model="basic" :rules="rules" :label-width="110">
+                        <FormItem label="站点编码" prop="code">
+                            <Input v-model="basic.code" placeholder="URL 路径用，如 demo" style="max-width: 320px" />
+                        </FormItem>
+                        <FormItem label="站点名称" prop="name">
+                            <Input v-model="basic.name" :maxlength="128" placeholder="如 XX学校门户网站" style="max-width: 320px" />
+                        </FormItem>
+                        <FormItem label="上级站点">
+                            <Select v-model="basic.parentSiteId" :clearable="!lockParentId" :disabled="!!lockParentId" placeholder="空=顶层校站点；选主站则为院系子站" style="width: 320px">
+                                <Option v-for="s in parentOptions" :key="s.id" :value="s.id">{{ s.name }}（{{ s.code }}）</Option>
+                            </Select>
+                            <p class="form-hint">
+                                院系子站挂在主站下，门户 header 右上出现"专业院系"下拉；层级固定两层。
+                                {{ isSchoolAdmin ? "校级角色仅可在本校主站之间改挂。" : "" }}
+                            </p>
+                        </FormItem>
+                        <FormItem v-if="store.isSuperAdmin" label="学校ID" prop="schId" :rules="schIdRequired ? schIdRules : []">
+                            <InputNumber v-model="basic.schId" :min="1" placeholder="UserBase sys_group.id" style="width: 200px" />
+                            <div v-if="schIdRequired" class="form-hint">顶层站点必填（否则校级角色不可管理）；院系子站可留空自动继承主站</div>
+                        </FormItem>
+                        <FormItem v-if="store.isSuperAdmin" label="学校名称">
+                            <Input v-model="basic.schName" :maxlength="128" style="max-width: 320px" />
+                        </FormItem>
+                        <FormItem label="门户地址预览">
+                            <span class="ss-portal-url">{{ portalPreviewUrl || "输入编码后自动生成" }}</span>
+                            <div class="form-hint">子站地址 = 上级地址 / 编码；创建后经站点管理「门户路径」列直达</div>
+                        </FormItem>
+                        <FormItem label="状态">
+                            <RadioGroup v-model="basic.status">
+                                <Radio :label="1">启用</Radio>
+                                <Radio :label="0">停用</Radio>
+                            </RadioGroup>
+                        </FormItem>
+                    </Form>
+                </div>
+                <div class="card-footer">
+                    <Button type="primary" :loading="saving.basic" @click="saveBasic">创建站点，下一步</Button>
+                    <span class="card-hint">创建后自动进入第二步挑选皮肤，其余配置随即全部开放</span>
+                </div>
+            </div>
+
+            <!-- ===== 常规编辑（含向导第二步起）：顶部 Tab，7 个分区各持独立表单与保存 ===== -->
+            <Tabs v-else v-model="activeTab" class="ss-tabs" :animated="false">
+                <TabPane :label="tabLabel(TABS[0])" name="basic">
+                    <div class="card setting-card">
                        <div class="card-header">
                            <span class="card-title">基本信息</span>
                            <span class="card-subtitle">站点编码 / 名称 / 归属与状态</span>
@@ -432,9 +494,8 @@ watch(() => store.currentSchool?.schId, () => loadSites());
                                <FormItem v-if="store.isSuperAdmin" label="学校名称">
                                    <Input v-model="basic.schName" :maxlength="128" style="max-width: 320px" />
                                </FormItem>
-                                <FormItem label="门户地址预览">
-                                    <span class="ss-portal-url">{{ portalPreviewUrl || "输入编码后自动生成" }}</span>
-                                    <div class="form-hint">子站地址 = 上级地址 / 编码；创建后经站点管理「门户路径」列直达</div>
+                                <FormItem label="门户地址">
+                                    <span class="ss-portal-url">{{ portalPreviewUrl || "-" }}</span>
                                </FormItem>
                                <FormItem label="状态">
                                    <RadioGroup v-model="basic.status">
@@ -445,18 +506,17 @@ watch(() => store.currentSchool?.schId, () => loadSites());
                            </Form>
                        </div>
                        <div class="card-footer">
-                            <Button type="primary" :loading="saving.basic" @click="saveBasic">
-                                {{ isCreate ? "创建站点" : "仅保存基本信息" }}
-                            </Button>
-                            <span class="card-hint">仅保存本分区；其他分区未保存的修改仍在页面上，下次任一分区保存会一并带上</span>
+                            <Button type="primary" :loading="saving.basic" @click="saveBasic">保存基本信息</Button>
+                            <span class="card-hint">仅保存本 Tab；其他 Tab 未保存的修改保留在各自表单里，不会连带提交</span>
                        </div>
                    </div>
+                </TabPane>

-                    <!-- ② 皮肤与外观 -->
-                    <div id="sec-theme" class="card setting-card" data-section="theme">
+                <TabPane :label="tabLabel(TABS[1])" name="theme">
+                    <div class="card setting-card">
                        <div class="card-header">
                            <span class="card-title">皮肤与外观</span>
-                            <span class="card-subtitle">风格选择 / 站点级 CSS 覆盖（微调请去「皮肤包管理」）</span>
+                            <span class="card-subtitle">风格选择（皮肤参数的调整入口在「皮肤包管理」；自定义 CSS 已独立为专属 Tab）</span>
                        </div>
                        <div class="card-body">
                            <div class="field-block">
@@ -470,123 +530,130 @@ watch(() => store.currentSchool?.schId, () => loadSites());
                                <ThemePicker :themes="themes" :model-value="theme" @update:model-value="pickTheme" />
                                <Button size="small" class="preview-btn" :disabled="!editTheme" @click="openPreview">预览本皮肤</Button>
                            </div>
-                            <!-- B3 自定义样式（config_json.custom_css，服务端黑名单强校验） -->
-                            <Collapse class="css-collapse">
-                                <Panel name="css" header="自定义样式（站点级 CSS 覆盖）">
-                                    <Input
-                                        v-model="customCss"
-                                        type="textarea"
-                                        :rows="6"
-                                        :maxlength="10240"
-                                        placeholder="如：--primary:#59aeeb;  或  .site-header{height:80px}"
-                                        class="css-editor"
-                                    />
-                                    <div class="css-meta">
-                                        <span>{{ customCss.length }}/10240 字符</span>
-                                        <span>保存后门户立即生效（缓存自动失效）；服务端将拒绝 &lt;/style、&lt;script、@import、expression( 等危险内容</span>
-                                    </div>
-                                </Panel>
-                            </Collapse>
                        </div>
                        <div class="card-footer">
-                            <Button type="primary" :loading="saving.theme" @click="saveTheme">仅保存皮肤与外观</Button>
-                            <span class="card-hint">换肤/改参数保存后门户立即生效（缓存已自动失效）；其他分区未保存的修改仍在页面上，下次任一分区保存会一并带上</span>
+                            <template v-if="wizardStep === 2">
+                                <Button type="primary" :loading="saving.theme" @click="finishWizard">保存并完成</Button>
+                                <Button @click="skipWizard">跳过，稍后配置</Button>
+                                <span class="card-hint">第二步（选皮肤）完成后全部设置开放</span>
+                            </template>
+                            <template v-else>
+                                <Button type="primary" :loading="saving.theme" @click="saveTheme">保存皮肤与外观</Button>
+                                <span class="card-hint">换肤保存后门户立即生效（缓存已自动失效）</span>
+                            </template>
                        </div>
                    </div>
+                </TabPane>

-                    <!-- ③ 首页布局 -->
-                    <div id="sec-layout" class="card setting-card" :class="{ locked: isCreate }" data-section="layout">
+                <TabPane :label="tabLabel(TABS[2])" name="layout">
+                    <div class="card setting-card">
                        <div class="card-header">
                            <span class="card-title">首页布局</span>
                            <span class="card-subtitle">首页 = 可编排的区块序列（要闻/栏目文章/画廊/链接组）</span>
                        </div>
-                        <Alert v-if="isCreate" type="info" show-icon class="ss-lock-tip">创建站点后开放</Alert>
                        <div class="card-body">
-                            <HomeLayoutEditor v-model="configJson" :site-id="basic.id" ref="layoutEditorRef" @save="saveLayout" />
+                            <HomeLayoutEditor
+                                v-model="layoutModel"
+                                :site-id="basic.id"
+                                :portal-url="portalFrameUrl"
+                                ref="layoutEditorRef"
+                                @save="saveLayout"
+                            />
                        </div>
                        <div class="card-footer">
-                            <Button type="primary" :loading="saving.layout" :disabled="isCreate" @click="saveLayout">仅保存首页布局</Button>
+                            <Button type="primary" :loading="saving.layout" @click="saveLayout">保存首页布局</Button>
                            <span class="card-hint">保存后门户立即生效（缓存自动失效）；未编排布局时门户按「全部栏目自动渲染」默认形态展示</span>
                        </div>
                    </div>
+                </TabPane>

-                    <!-- ④ 基础展示 -->
-                    <div id="sec-display" class="card setting-card" :class="{ locked: isCreate }" data-section="display">
+                <TabPane :label="tabLabel(TABS[3])" name="display">
+                    <div class="card setting-card">
                        <div class="card-header">
                            <span class="card-title">基础展示</span>
                            <span class="card-subtitle">Logo / favicon / 标语 / 院系文案（图片支持直接上传）</span>
                        </div>
-                        <Alert v-if="isCreate" type="info" show-icon class="ss-lock-tip">创建站点后开放</Alert>
                        <div class="card-body">
-                            <SiteConfigForm ref="displayFormRef" v-model="configJson" :groups="['display']" :site-id="basic.id" />
+                            <SiteConfigForm ref="displayFormRef" v-model="displayModel" :groups="['display']" :site-id="basic.id" />
                        </div>
                        <div class="card-footer">
-                            <Button type="primary" :loading="saving.display" :disabled="isCreate" @click="saveDisplay">仅保存基础展示</Button>
-                            <span class="card-hint">仅保存本分区；其他分区未保存的修改仍在页面上，下次任一分区保存会一并带上</span>
+                            <Button type="primary" :loading="saving.display" @click="saveGroupForm('display')">保存基础展示</Button>
+                            <span class="card-hint">仅保存本 Tab 的字段</span>
                        </div>
                    </div>
+                </TabPane>

-                    <!-- ⑤ 页脚信息 -->
-                    <div id="sec-footer" class="card setting-card" :class="{ locked: isCreate }" data-section="footer">
+                <TabPane :label="tabLabel(TABS[4])" name="footer">
+                    <div class="card setting-card">
                        <div class="card-header">
                            <span class="card-title">页脚信息</span>
                            <span class="card-subtitle">联系方式 / 多校区地址 / 二维码 / 社媒 / 版权备案</span>
                        </div>
-                        <Alert v-if="isCreate" type="info" show-icon class="ss-lock-tip">创建站点后开放</Alert>
                        <div class="card-body">
-                            <SiteConfigForm ref="footerFormRef" v-model="configJson" :groups="['footer']" :site-id="basic.id" />
+                            <SiteConfigForm ref="footerFormRef" v-model="footerModel" :groups="['footer']" :site-id="basic.id" />
                        </div>
                        <div class="card-footer">
-                            <Button type="primary" :loading="saving.footer" :disabled="isCreate" @click="saveFooter">仅保存页脚信息</Button>
-                            <span class="card-hint">仅保存本分区；其他分区未保存的修改仍在页面上，下次任一分区保存会一并带上</span>
+                            <Button type="primary" :loading="saving.footer" @click="saveGroupForm('footer')">保存页脚信息</Button>
+                            <span class="card-hint">仅保存本 Tab 的字段</span>
                        </div>
                    </div>
+                </TabPane>

-                    <!-- ⑥ SEO 与域名 -->
-                    <div id="sec-seo" class="card setting-card" :class="{ locked: isCreate }" data-section="seo">
+                <TabPane :label="tabLabel(TABS[5])" name="seo">
+                    <div class="card setting-card">
                        <div class="card-header">
                            <span class="card-title">SEO 与域名</span>
                            <span class="card-subtitle">搜索引擎摘要 / 独立域名台账与对外基地址</span>
                        </div>
-                        <Alert v-if="isCreate" type="info" show-icon class="ss-lock-tip">创建站点后开放</Alert>
                        <div class="card-body">
-                            <SiteConfigForm ref="seoFormRef" v-model="configJson" :groups="['seo', 'domain']" :site-id="basic.id" />
+                            <SiteConfigForm ref="seoFormRef" v-model="seoModel" :groups="['seo', 'domain']" :site-id="basic.id" />
                        </div>
                        <div class="card-footer">
-                            <Button type="primary" :loading="saving.seo" :disabled="isCreate" @click="saveSeo">仅保存 SEO 与域名</Button>
-                            <span class="card-hint">仅保存本分区；其他分区未保存的修改仍在页面上，下次任一分区保存会一并带上</span>
+                            <Button type="primary" :loading="saving.seo" @click="saveGroupForm('seo')">保存 SEO 与域名</Button>
+                            <span class="card-hint">仅保存本 Tab 的字段</span>
                        </div>
                    </div>
+                </TabPane>

-                    <!-- ⑦ 扩展参数 -->
-                    <div id="sec-extras" class="card setting-card" :class="{ locked: isCreate }" data-section="extras">
+                <TabPane :label="tabLabel(TABS[6])" name="css">
+                    <div class="card setting-card">
                        <div class="card-header">
-                            <span class="card-title">扩展参数</span>
-                            <span class="card-subtitle">面向后续扩展的预留配置键</span>
+                            <span class="card-title">自定义样式</span>
+                            <span class="card-subtitle">站点级 CSS 覆盖（面向需要微调的高级用户）</span>
                        </div>
-                        <Alert v-if="isCreate" type="info" show-icon class="ss-lock-tip">创建站点后开放</Alert>
                        <div class="card-body">
-                            <SiteConfigForm ref="extrasFormRef" v-model="configJson" show-extras />
+                            <Input
+                                v-model="customCss"
+                                type="textarea"
+                                :rows="14"
+                                :maxlength="10240"
+                                placeholder="如：--primary:#59aeeb;  或  .site-header{height:80px}"
+                                class="css-editor"
+                            />
+                            <div class="css-meta">
+                                <span>{{ customCss.length }}/10240 字符</span>
+                                <span>保存后门户立即生效（缓存自动失效）；服务端将拒绝 &lt;/style、&lt;script、@import、expression( 等危险内容</span>
+                            </div>
                        </div>
                        <div class="card-footer">
-                            <Button type="primary" :loading="saving.extras" :disabled="isCreate" @click="saveExtras">仅保存扩展参数</Button>
-                            <span class="card-hint">仅保存本分区；其他分区未保存的修改仍在页面上，下次任一分区保存会一并带上</span>
+                            <Button type="primary" :loading="saving.css" @click="saveCss">保存自定义样式</Button>
+                            <span class="card-hint">仅保存本 Tab 的字段</span>
                        </div>
                    </div>
-                </div>
-            </div>
+                </TabPane>
+            </Tabs>
        </div>
-
-        <!-- 皮肤预览弹窗（iframe 加载 /api/theme/preview，no-store） -->
-        <Modal v-model="previewVisible" title="皮肤预览" :mask-closable="true" width="980px" footer-hide>
-            <ThemePreviewFrame
-                v-if="previewVisible && editTheme && row"
-                :site-path="row.path || row.code"
-                :theme="theme"
-                :theme-params="editTheme?.paramValues || {}"
-            />
-        </Modal>
    </div>
+
+    <!-- 皮肤预览弹窗（iframe 加载 /api/theme/preview，no-store） -->
+    <Modal v-model="previewVisible" title="皮肤预览" :mask-closable="true" width="980px" footer-hide>
+        <ThemePreviewFrame
+            v-if="previewVisible && editTheme && row"
+            :site-path="row.path || row.code"
+            :theme="theme"
+            :theme-params="editTheme?.paramValues || {}"
+        />
+    </Modal>
 </template>

 <style scoped lang="scss">
@@ -607,108 +674,28 @@ watch(() => store.currentSchool?.schId, () => loadSites());
            }
        }
    }
-    .ss-layout {
-        display: flex;
-        gap: 16px;
-        align-items: flex-start;
-    }
-    .ss-nav {
-        width: 184px;
-        flex: none;
-        position: sticky;
-        top: 72px;
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-        padding: 6px;
+    .ss-steps {
+        margin-bottom: 18px;
+        background: #fff;
        border: 1px solid #e9edf5;
        border-radius: 10px;
+        padding: 14px 24px 4px;
+    }
+    .ss-tabs {
        background: #fff;
-        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 30px -22px rgba(16, 24, 40, 0.4);
-        .ss-nav-item {
-            position: relative;
-            padding: 8px 10px 8px 14px;
-            border-radius: 7px;
-            cursor: pointer;
-            transition: background 0.2s;
-            &:hover {
-                background: #f0f4ff;
-            }
-            &.active {
-                background: #eef2ff;
-                &::before {
-                    content: "";
-                    position: absolute;
-                    left: 4px;
-                    top: 10px;
-                    bottom: 10px;
-                    width: 3px;
-                    border-radius: 2px;
-                    background: #577afb;
-                }
-                .ss-nav-title {
-                    color: #4264e4;
-                }
-            }
-            .ss-nav-title {
-                display: block;
-                font-size: 13px;
-                font-weight: 600;
-                color: #1e2635;
-            }
-            .ss-nav-lock {
-                color: #c5c8ce;
-                font-size: 12px;
-            }
-            .ss-nav-desc {
-                display: block;
-                color: #8a93a6;
-                font-size: 12px;
-                margin-top: 2px;
-            }
+        border: 1px solid #e9edf5;
+        border-radius: 10px;
+        padding: 4px 16px 16px;
+        :deep(.ivu-tabs-nav) {
+            margin-bottom: 12px;
        }
    }
-    @media (max-width: 1080px) {
-        .ss-layout {
-            flex-direction: column;
-        }
-        .ss-nav {
-            position: static;
-            width: 100%;
-            flex-direction: row;
-            flex-wrap: wrap;
-            gap: 4px;
-            .ss-nav-item {
-                flex: none;
-                .ss-nav-desc {
-                    display: none;
-                }
-                &.active::before {
-                    display: none;
-                }
-            }
-        }
-    }
-    .ss-cards {
-        flex: 1;
-        min-width: 0;
-        display: flex;
-        flex-direction: column;
-        gap: 14px;
-    }
    .setting-card {
-        border: 1px solid #e9edf5;
+        border: 1px solid #f0f2f5;
        border-radius: 10px;
        background: #fff;
        padding: 18px 20px;
-        scroll-margin-top: 84px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
-        &.locked {
-            .card-body {
-                opacity: 0.55;
-                pointer-events: none;
-            }
-        }
        .card-header {
            display: flex;
            align-items: baseline;
@@ -753,9 +740,6 @@ watch(() => store.currentSchool?.schId, () => loadSites());
                line-height: 1.6;
            }
        }
-        .ss-lock-tip {
-            margin-bottom: 12px;
-        }
    }
    .form-hint {
        color: #999;
@@ -781,21 +765,19 @@ watch(() => store.currentSchool?.schId, () => loadSites());
    .preview-btn {
        margin: 8px 0 0;
    }
-    .css-collapse {
-        margin: 4px 0 12px;
-        .css-editor :deep(textarea) {
-            font-family: Consolas, Monaco, monospace;
-            font-size: 12px;
-        }
-        .css-meta {
-            display: flex;
-            justify-content: space-between;
-            gap: 12px;
-            margin-top: 6px;
-            color: #999;
-            font-size: 12px;
-            line-height: 1.6;
-        }
+    .css-editor :deep(textarea) {
+        font-family: Consolas, Monaco, monospace;
+        font-size: 12px;
+        line-height: 1.7;
+    }
+    .css-meta {
+        display: flex;
+        justify-content: space-between;
+        gap: 12px;
+        margin-top: 6px;
+        color: #999;
+        font-size: 12px;
+        line-height: 1.6;
    }
 }
 </style>
@@ -0,0 +1,261 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { assetUrl } from "@/api/module/cms";
+import { portalUrlOf } from "@/utils/sitePath";
+import { SiteVo, ThemeVo } from "@/types/cms";
+
+/**
+ * 院系子站卡（docs/22）：站点工作台网格单元。
+ * 信息按「身份 → 规模 → 皮肤 → 地址 → 动作」纵向分层，不再与表格争列宽。
+ * 当前站 = 蓝描边 + 「当前」绿徽章；停用 = 降透明 + 灰图标 + 「进入管理」禁用。
+ */
+const props = defineProps<{
+    site: SiteVo;
+    isCurrent: boolean;
+    theme?: ThemeVo;
+}>();
+
+const emit = defineEmits<{
+    (e: "enter", site: SiteVo): void;
+    (e: "setting", site: SiteVo): void;
+    (e: "portal", site: SiteVo): void;
+}>();
+
+const disabled = computed(() => props.site.status !== 1);
+/** 当前站无需「进入管理」（已在站内），与停用同视为不可达 */
+const enterDisabled = computed(() => disabled.value || props.isCurrent);
+
+/**
+ * 规模统计：SiteVo 暂未提供聚合字段（docs/22 Q1），故当前渲染为空、该行自动隐藏；
+ * 后端在 /api/site/list 补齐 categoryCount / articleCount / updateTime 后自动出现，模板不动。
+ */
+const stats = computed(() => {
+    const s = props.site as any;
+    const list: { num: string | number; lbl: string }[] = [];
+    if (s.categoryCount != null) list.push({ num: s.categoryCount, lbl: "栏目" });
+    if (s.articleCount != null) list.push({ num: s.articleCount, lbl: "文章" });
+    if (s.updateTime) list.push({ num: String(s.updateTime).slice(5, 10), lbl: "更新" });
+    return list;
+});
+
+/** 皮肤缩略图（走 assetUrl 补资源前缀，与表格视图同源） */
+const themeThumb = computed(() => (props.theme?.screenshotUrl ? assetUrl(props.theme.screenshotUrl) : ""));
+const themeTitle = computed(() => props.theme?.title || props.site.theme || "default");
+</script>
+
+<template>
+    <div class="site-card" :class="{ 'is-cur': isCurrent, disabled }">
+        <div class="sc-head">
+            <span class="sc-ico" :class="disabled ? 'off' : 'sub'">
+                <Icon type="ios-cog" />
+            </span>
+            <div class="sc-id">
+                <div class="sc-name">
+                    <h4 :title="site.name">{{ site.name }}</h4>
+                    <span class="sc-badge sub">院系子站</span>
+                    <span v-if="isCurrent" class="sc-badge cur">当前</span>
+                    <span v-else-if="disabled" class="sc-badge off">停用</span>
+                </div>
+                <p class="sc-code">{{ site.path || site.code }}</p>
+            </div>
+        </div>
+
+        <div v-if="stats.length" class="sc-meta">
+            <span v-for="st in stats" :key="st.lbl">{{ st.lbl }} <b>{{ st.num }}</b></span>
+        </div>
+
+        <div class="sc-theme">
+            <span class="thumb" :style="themeThumb ? { backgroundImage: `url(${themeThumb})` } : null"></span>
+            <span class="tname" :title="themeTitle">
+                {{ themeTitle }}
+                <span v-if="site.theme" class="tspec">{{ site.theme }}</span>
+            </span>
+        </div>
+
+        <p class="sc-domain">
+            <Icon type="ios-globe-outline" />
+            <code :title="portalUrlOf(site)">{{ portalUrlOf(site) }}</code>
+        </p>
+
+        <div class="sc-actions">
+            <Button type="primary" size="small" :disabled="enterDisabled" @click="emit('enter', site)">
+                进入管理
+            </Button>
+            <Button size="small" @click="emit('setting', site)">站点设置</Button>
+            <Button size="small" @click="emit('portal', site)">门户</Button>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+/* 与超管 SchoolWorkbench 的卡片语法同构：白底 8px 圆角 + 1px 边 + hover 抬升 2px */
+.site-card {
+    position: relative;
+    overflow: hidden;
+    background: #fff;
+    border: 1px solid #e8eaec;
+    border-radius: 8px;
+    padding: 16px;
+    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
+
+    &:hover {
+        box-shadow: 0 4px 16px rgba(31, 42, 58, 0.12);
+        transform: translateY(-2px);
+        border-color: #c9d6fb;
+    }
+    /* 当前操作站点：4px 左色带 + 蓝描边 + 淡蓝光环。
+       与 SiteMainCard 同一套语义 —— 全页同时只有一张卡带「选中」，不再出现第二处蓝色标识。 */
+    &.is-cur {
+        border-color: #9db4f7;
+        box-shadow: 0 0 0 2px rgba(87, 122, 251, 0.12);
+    }
+    &.is-cur::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 4px;
+        background: #577afb;
+    }
+    &.disabled {
+        opacity: 0.62;
+        background: #fafbfc;
+        &:hover {
+            transform: none;
+            box-shadow: 0 1px 2px rgba(31, 42, 58, 0.06);
+        }
+    }
+}
+.sc-head {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+}
+/* 身份色：主站 #577afb / 子站 #ff9900（与 SiteSwitcher 定稿身份色一致） */
+.sc-ico {
+    flex-shrink: 0;
+    width: 34px;
+    height: 34px;
+    border-radius: 7px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    color: #fff;
+    background: #577afb;
+    &.sub {
+        background: #ff9900;
+    }
+    &.off {
+        background: #c0c4cc;
+    }
+}
+.sc-id {
+    min-width: 0;
+    flex: 1;
+}
+.sc-name {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    h4 {
+        margin: 0;
+        font-size: 15px;
+        color: #17233d;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+.sc-badge {
+    flex-shrink: 0;
+    font-size: 10px;
+    line-height: 16px;
+    padding: 0 5px;
+    border-radius: 3px;
+    color: #fff;
+    &.sub {
+        background: #ff9900;
+    }
+    &.cur {
+        background: #2ba471;
+    }
+    &.off {
+        background: #c0c4cc;
+    }
+}
+.sc-code {
+    margin: 3px 0 0;
+    font-size: 12px;
+    color: #808695;
+    font-family: Consolas, Monaco, monospace;
+}
+.sc-meta {
+    display: flex;
+    gap: 14px;
+    margin: 11px 0 0;
+    font-size: 12px;
+    color: #515a6e;
+    b {
+        color: #17233d;
+    }
+}
+.sc-theme {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 10px 0 0;
+    padding-top: 10px;
+    border-top: 1px dashed #eceff3;
+    font-size: 12px;
+    color: #656667;
+    .thumb {
+        width: 52px;
+        height: 32px;
+        border-radius: 4px;
+        border: 1px solid #e8eaec;
+        flex-shrink: 0;
+        background: #f0f2f5 center/cover no-repeat;
+    }
+    .tname {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .tspec {
+        color: #a0a6b0;
+        font-family: Consolas, Monaco, monospace;
+        font-size: 11px;
+    }
+}
+.sc-domain {
+    margin: 8px 0 0;
+    font-size: 12px;
+    color: #808695;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    code {
+        font-family: Consolas, Monaco, monospace;
+        color: #656667;
+        background: #f5f7fa;
+        border-radius: 3px;
+        padding: 1px 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+.sc-actions {
+    display: flex;
+    gap: 8px;
+    margin: 14px 0 0;
+    /* 三个动作等宽铺满（iview Button 是子组件根节点，scoped 属性会下发到根 DOM） */
+    .ivu-btn {
+        flex: 1;
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+</style>
@@ -1,35 +1,29 @@
 <script setup lang="ts">
-import { reactive, ref, watch } from "vue";
-import { Message } from "view-ui-plus";
+import { nextTick, reactive, ref, watch } from "vue";
 import {
    SITE_CONFIG_FIELD_DEFS,
    SITE_CONFIG_GROUPS,
-    SiteConfigExtraRow,
    SiteConfigFieldDef,
    SiteConfigFormModel,
    SiteConfigGroup,
-    extraRowError,
-    firstExtraError,
    parseSiteConfig,
    serializeSiteConfig,
    validateFieldValue,
 } from "@/utils/siteConfigForm";
 import ImageAssetField from "@/components/ImageAssetField.vue";
+import FooterPreview from "@/components/FooterPreview.vue";

 /**
- * 站点配置结构化表单（docs/09 §3.1；docs/16 §3.3 分区作用域扩展）：
+ * 站点配置结构化表单（docs/09 §3.1；docs/16 §3.3 分区作用域；docs/20 F6 扩展参数区退役）：
 * v-model 绑定整页共享的 configJson 字符串（单一事实源）。
- * props.groups 声明本分区渲染的分组；props.showExtras 控制扩展参数编辑区（每页仅一处）。
- * 模型仍完整解析全部键（fields/extras/preserved 三通道），仅渲染限定分组——
- * 序列化时未渲染分区的值原样回写，保证多分区实例绑定同一 configJson 互不踩踏。
- * 保存前由父级调用 validate()（含扩展行兜底校验）。
+ * props.groups 声明本分区渲染的分组。模型仍完整解析全部键（fields/preserved 双通道），
+ * 仅渲染限定分组——序列化时未渲染分区的值原样回写，保证多分区实例绑定同一 configJson 互不踩踏。
+ * 保存前由父级调用 validate()。
 */
 const props = defineProps<{
    modelValue: string;
    /** 渲染的配置分组（缺省=全部分组，兼容旧整表单用法） */
    groups?: SiteConfigGroup[];
-    /** 是否渲染扩展参数编辑区（docs/16：仅「扩展参数」分区开启） */
-    showExtras?: boolean;
    /** 图片类字段上传归属站点（附件场景引用） */
    siteId?: number;
 }>();
@@ -40,9 +34,10 @@ const groupSet = (() => new Set(props.groups || SITE_CONFIG_GROUPS.map(g => g.na
 const visibleGroups = SITE_CONFIG_GROUPS.filter(g => groupSet.has(g.name));

 const formRef = ref();
-const formModel = reactive<{ fields: Record<string, string>; extras: SiteConfigExtraRow[] }>({
+/** 组件根元素（校验失败时定位滚动用） */
+const rootEl = ref<HTMLElement | null>(null);
+const formModel = reactive<{ fields: Record<string, string> }>({
    fields: {},
-    extras: [],
 });
 let preserved: Record<string, unknown> = {};
 let lastEmitted: string | null = null;
@@ -51,7 +46,6 @@ function parseIn(v: string) {
    const m: SiteConfigFormModel = parseSiteConfig(v);
    Object.keys(formModel.fields).forEach(k => delete formModel.fields[k]);
    Object.assign(formModel.fields, m.fields);
-    formModel.extras.splice(0, formModel.extras.length, ...m.extras.map(r => ({ ...r })));
    preserved = m.preserved;
 }

@@ -65,38 +59,65 @@ watch(
 );

 function emitUp() {
-    lastEmitted = serializeSiteConfig({
+    const next = serializeSiteConfig({
        fields: { ...formModel.fields },
-        extras: formModel.extras.map(r => ({ ...r })),
        preserved,
    });
-    emit("update:modelValue", lastEmitted);
-}
-
-function addExtra() {
-    formModel.extras.push({ key: "", value: "" });
-}
-
-function removeExtra(i: number) {
-    formModel.extras.splice(i, 1);
-    emitUp();
-}
-
-/** 保存前校验：内置字段 Form 规则 + 扩展行兜底（仅渲染扩展区的实例校验，避免越区拦截）；通过返回 true */
-async function validate(): Promise<boolean> {
-    const valid = await formRef.value?.validate();
-    if (!valid) return false;
-    if (props.showExtras) {
-        const extraMsg = firstExtraError(formModel.extras);
-        if (extraMsg) {
-            Message.error(`扩展参数有误：${extraMsg}`);
-            return false;
-        }
+    // docs/20 返工 #2 no-op 守卫：本次序列化结果与当前传入 modelValue 经同一解析/序列化管线归一后
+    // 语义等价则不回写——挂载规范化、编辑后撤销往返不再触发父级假脏（保存路径读 ownFields() 取
+    // 实时表单模型，此处跳发不会造成取值滞后）。
+    if (next === serializeSiteConfig(parseSiteConfig(props.modelValue))) {
+        return;
    }
-    return true;
+    lastEmitted = next;
+    emit("update:modelValue", next);
 }

-defineExpose({ validate });
+/**
+ * 保存前校验（docs/20 返工 #4，契约由 boolean 改为 string | null）：
+ * 返回 null = 通过；失败返回首个错误的原因文案（「字段名：原因」）。
+ * 本分区无必填字段（空值恒通过），只拦「填了但格式非法」的值；iView 内联红框 + 字段下方
+ * 错误文案由 Form.validate 标注，此处负责把首个出错字段滚动到可视区。
+ */
+async function validate(): Promise<string | null> {
+    const form = formRef.value;
+    if (!form) {
+        // REWORK-DECISION: Form 未挂载视为无可校验内容（全字段可选，空值恒通过），不拦保存
+        return null;
+    }
+    const ok = await form.validate();
+    if (ok) {
+        return null;
+    }
+    await nextTick();
+    const firstErrorItem = rootEl.value?.querySelector<HTMLElement>(".ivu-form-item-error") || null;
+    firstErrorItem?.scrollIntoView?.({ block: "center", behavior: "smooth" });
+    const label = firstErrorItem?.querySelector(".ivu-form-item-label")?.textContent?.trim() || "";
+    const tip = firstErrorItem?.querySelector(".ivu-form-item-error-tip")?.textContent?.trim() || "";
+    if (label && tip) {
+        return `${label}：${tip}`;
+    }
+    return tip || "存在填写不合法的字段，请检查表单中标红项";
+}
+
+/**
+ * F1（docs/20）Tab 独立保存：仅导出本实例渲染分组的字段值（空值剔除）。
+ * 父级把返回值合并进服务端事实源 configJson 后提交——其他 Tab 的未保存修改不会被连带提交。
+ */
+function ownFields(): Record<string, string> {
+    const out: Record<string, string> = {};
+    visibleGroups.forEach(g => {
+        defsOf(g.name).forEach(d => {
+            const v = (formModel.fields[d.key] || "").trim();
+            if (v) {
+                out[d.key] = v;
+            }
+        });
+    });
+    return out;
+}
+
+defineExpose({ validate, ownFields });

 function rulesFor(def: SiteConfigFieldDef) {
    return [
@@ -115,7 +136,7 @@ function defsOf(group: string): SiteConfigFieldDef[] {
 }</script>

 <template>
-    <div class="site-config-form">
+    <div ref="rootEl" class="site-config-form">
        <Form ref="formRef" :model="formModel" :label-width="130">
            <template v-for="g in visibleGroups" :key="g.name">
                <div class="group-title">{{ g.title }}</div>
@@ -131,6 +152,7 @@ function defsOf(group: string): SiteConfigFieldDef[] {
                        v-model="formModel.fields[def.key]"
                        :site-id="siteId"
                        :placeholder="def.placeholder"
+                        :aspect="def.aspect"
                        @update:model-value="emitUp"
                    />
                    <Input
@@ -149,22 +171,22 @@ function defsOf(group: string): SiteConfigFieldDef[] {
                    />
                    <p v-if="def.tip" class="cfg-tip">{{ def.tip }}</p>
                </FormItem>
-            </template>
-
-            <template v-if="showExtras">
-                <div class="group-title">扩展参数</div>
-                <div v-for="(row, i) in formModel.extras" :key="i" class="extra-row">
-                    <Input v-model="row.key" placeholder="参数名" style="width: 200px" @on-change="emitUp" />
-                    <Input v-model="row.value" placeholder="参数值" style="flex: 1" @on-change="emitUp" />
-                    <Button type="text" class="extra-del" icon="md-trash" @click="removeExtra(i)" />
-                    <p v-if="extraRowError(formModel.extras, i)" class="cfg-error">
-                        {{ extraRowError(formModel.extras, i) }}
-                    </p>
-                </div>
-                <Button type="dashed" long icon="md-add" class="extra-add" @click="addExtra">新增参数</Button>
-                <p class="cfg-tip">
-                    面向后续扩展的预留配置项（键名仅字母/数字/下划线）；系统托管参数（如 theme_params）不在此显示，保存时自动保留。
-                </p>
+                <!-- F5（docs/20）：页脚分组底部固定结构示意图（字段↔视觉位置一一对应，实时回显） -->
+                <FooterPreview
+                    v-if="g.name === 'footer'"
+                    :contact="formModel.fields.contact"
+                    :footer-addresses="formModel.fields.footer_addresses"
+                    :qr-wechat="formModel.fields.qr_wechat"
+                    :qr-weibo="formModel.fields.qr_weibo"
+                    :socials="[
+                        { label: '微信', value: formModel.fields.social_wechat },
+                        { label: '微博', value: formModel.fields.social_weibo },
+                        { label: '抖音', value: formModel.fields.social_douyin },
+                        { label: 'B站', value: formModel.fields.social_bilibili },
+                    ]"
+                    :copyright="formModel.fields.copyright"
+                    :beian="formModel.fields.beian"
+                />
            </template>
        </Form>
    </div>
@@ -190,27 +212,5 @@ function defsOf(group: string): SiteConfigFieldDef[] {
        line-height: 1.6;
        margin-top: 4px;
    }
-    .cfg-error {
-        color: #ed4014;
-        font-size: 12px;
-        line-height: 1.6;
-        margin-top: 4px;
-    }
-    .extra-row {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        margin-bottom: 8px;
-        flex-wrap: wrap;
-        .extra-del {
-            color: #999;
-            &:hover {
-                color: #ed4014;
-            }
-        }
-    }
-    .extra-add {
-        margin: 4px 0 8px;
-    }
 }
 </style>
@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { assetUrl } from "@/api/module/cms";
+import { portalUrlOf } from "@/utils/sitePath";
+import { SiteVo, ThemeVo } from "@/types/cms";
+
+/**
+ * 学校主站宽卡（docs/22）：站点工作台的层级锚点。
+ * 主站唯一、子站都挂在它下面 —— 横向宽卡独占一行（左侧 4px 主色带），
+ * 与子站网格在版式上分区；层级不靠「所属主站」列的文字表达（那是旧表格的做法）。
+ */
+const props = defineProps<{
+    site: SiteVo;
+    isCurrent: boolean;
+    theme?: ThemeVo;
+    /** 本校院系子站总数（由父级按全量行统计，搜索态下不随过滤变化） */
+    subCount: number;
+}>();
+
+const emit = defineEmits<{
+    (e: "enter", site: SiteVo): void;
+    (e: "setting", site: SiteVo): void;
+    (e: "portal", site: SiteVo): void;
+}>();
+
+const disabled = computed(() => props.site.status !== 1);
+const enterDisabled = computed(() => disabled.value || props.isCurrent);
+
+/** 统计：子站数本地可算（必显）；栏目/文章同 SiteCard —— 后端补齐字段后自动出现 */
+const stats = computed(() => {
+    const s = props.site as any;
+    const list: { num: string | number; lbl: string }[] = [];
+    if (s.categoryCount != null) list.push({ num: s.categoryCount, lbl: "栏目" });
+    if (s.articleCount != null) list.push({ num: s.articleCount, lbl: "文章" });
+    list.push({ num: props.subCount, lbl: "子站" });
+    return list;
+});
+
+const themeThumb = computed(() => (props.theme?.screenshotUrl ? assetUrl(props.theme.screenshotUrl) : ""));
+const themeTitle = computed(() => props.theme?.title || props.site.theme || "default");
+</script>
+
+<template>
+    <div class="main-card" :class="{ 'is-cur': isCurrent, disabled }">
+        <div class="mc-body">
+            <div class="mc-left">
+                <span class="sc-ico" :class="disabled ? 'off' : ''">
+                    <Icon type="ios-school" />
+                </span>
+                <div class="sc-id">
+                    <div class="sc-name">
+                        <h4 :title="site.name">{{ site.name }}</h4>
+                        <span class="sc-badge main">主站</span>
+                        <span v-if="isCurrent" class="sc-badge cur">当前</span>
+                        <span v-else-if="disabled" class="sc-badge off">停用</span>
+                    </div>
+                    <p class="sc-code">{{ site.code }} · {{ portalUrlOf(site) }}</p>
+                    <div class="sc-theme">
+                        <span class="thumb" :style="themeThumb ? { backgroundImage: `url(${themeThumb})` } : null"></span>
+                        <span class="tname" :title="themeTitle">
+                            {{ themeTitle }}
+                            <span v-if="site.theme" class="tspec">{{ site.theme }}</span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="mc-stats">
+                <div class="st" v-for="st in stats" :key="st.lbl">
+                    <div class="num">{{ st.num }}</div>
+                    <div class="lbl">{{ st.lbl }}</div>
+                </div>
+            </div>
+
+            <div class="mc-actions">
+                <Button type="primary" :disabled="enterDisabled" @click="emit('enter', site)">进入管理</Button>
+                <Button @click="emit('setting', site)">站点设置</Button>
+                <Button @click="emit('portal', site)">门户预览</Button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+/* 主站宽卡：与子站卡共用同一套「当前站」语义 —— 4px 左色带 + 蓝描边 + 淡蓝光环，
+   全页同时只有一张卡带选中样式（原色带常驻表达「根节点」，会被误读成选中态）。
+   层级改由版式表达：宽卡独占一行 + 「主站」徽章 + 「N 子站」统计。
+   色带走 ::before 绝对定位而非 border-left —— 用边框会在切换态时把内容挤偏 3px。 */
+.main-card {
+    position: relative;
+    overflow: hidden;
+    background: #fff;
+    border: 1px solid #e8eaec;
+    border-radius: 8px;
+    margin-bottom: 26px;
+    &.is-cur {
+        border-color: #9db4f7;
+        box-shadow: 0 0 0 2px rgba(87, 122, 251, 0.12);
+    }
+    &.is-cur::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 4px;
+        background: #577afb;
+    }
+    &.disabled {
+        opacity: 0.62;
+        background: #fafbfc;
+    }
+}
+.mc-body {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    padding: 18px 20px;
+}
+.mc-left {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    min-width: 0;
+    flex: 1;
+}
+.sc-ico {
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    border-radius: 7px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 19px;
+    color: #fff;
+    background: #577afb;
+    &.off {
+        background: #c0c4cc;
+    }
+}
+.sc-id {
+    min-width: 0;
+    flex: 1;
+}
+.sc-name {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    h4 {
+        margin: 0;
+        font-size: 17px;
+        color: #17233d;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+.sc-badge {
+    flex-shrink: 0;
+    font-size: 10px;
+    line-height: 16px;
+    padding: 0 5px;
+    border-radius: 3px;
+    color: #fff;
+    &.main {
+        background: #577afb;
+    }
+    &.cur {
+        background: #2ba471;
+    }
+    &.off {
+        background: #c0c4cc;
+    }
+}
+.sc-code {
+    margin: 3px 0 0;
+    font-size: 12px;
+    color: #808695;
+    font-family: Consolas, Monaco, monospace;
+}
+.sc-theme {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 6px 0 0;
+    font-size: 12px;
+    color: #656667;
+    .thumb {
+        width: 52px;
+        height: 32px;
+        border-radius: 4px;
+        border: 1px solid #e8eaec;
+        flex-shrink: 0;
+        background: #f0f2f5 center/cover no-repeat;
+    }
+    .tname {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .tspec {
+        color: #a0a6b0;
+        font-family: Consolas, Monaco, monospace;
+        font-size: 11px;
+    }
+}
+.mc-stats {
+    display: flex;
+    flex-shrink: 0;
+    .st {
+        padding: 0 18px;
+        border-left: 1px solid #eef0f3;
+        text-align: center;
+        &:first-child {
+            border-left: none;
+        }
+    }
+    .num {
+        font-size: 19px;
+        font-weight: bold;
+        color: #17233d;
+        line-height: 1.2;
+    }
+    .lbl {
+        font-size: 11px;
+        color: #a0a6b0;
+        margin-top: 2px;
+    }
+}
+.mc-actions {
+    display: flex;
+    gap: 8px;
+    flex-shrink: 0;
+}
+</style>
@@ -1,14 +1,23 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { categoryApi } from "@/api/module/cms";
 import { CategoryTreeNode } from "@/types/cms";
 import MyConfirm from "@/components/MyConfirm";
+import BlockTypeThumb from "@/components/BlockTypeThumb.vue";
+import IconGrid from "@/components/IconGrid.vue";
+import { iconLabelOf } from "./icons";
 import {
+    BadgeItem,
    BlockType,
    HOME_LAYOUT_VERSION,
    LayoutBlock,
    LINK_NAME_MAX,
    QUICK_LINK_MAX,
+    STATS_MAX,
+    StatItem,
+    TOPICS_MAX,
+    TopicItem,
+    BADGES_MAX,
    flattenListCategories,
    genBlockId,
    genFromCategories,
@@ -19,16 +28,19 @@ import {
 import { BLOCK_TYPES, blockDefOf, blockSummary } from "./blockTypes";

 /**
- * 首页布局编辑器（docs/16 主线B §4.3）：嵌入站点设置「首页布局」分区。
- * v-model 绑定整页共享的 configJson（仅读写 home_layout 键，其余键无损回写）。
- * 左侧区块序列（上移/下移/隐藏/删除）+ 右侧属性面板（注册表 schema 驱动）；
- * 添加抽屉列组件库类型卡；「从当前栏目一键生成」复刻现状渲染为初始序列（首用救生索）。
- * 保存由父分区发起（emit("save")），校验经 defineExpose.validate()。
+ * 首页布局编辑器（docs/16 主线B → docs/20 F2 三栏升级）：
+ * 左=区块序列（类型小图标 + 高度示意骨架）· 中=实时预览 iframe（加载正式门户，
+ * 编排变更 debounce 500ms postMessage 注入近似模拟，含手动刷新兜底，D-3 方案 B）· 右=属性面板（schema 驱动）。
+ * 添加抽屉类型卡与「展示形态」RadioCard 均配 SVG 缩略示意图（R-40）。
+ * 首用自动编排（D-4）：无 home_layout 键且站点有列表型栏目时进入即自动生成初始序列；
+ * 显式空布局（blocks=[]) 是用户选择，不再自动生成。v-model 仍只读写 home_layout 键。
 */
 const props = defineProps<{
    modelValue: string;
    /** 布局数据源栏目树归属站点（编辑模式必传） */
    siteId?: number;
+    /** 实时预览 iframe 的正式门户地址（编辑模式传入；创建模式无站点则隐藏预览栏） */
+    portalUrl?: string;
 }>();
 const emit = defineEmits<{
    (e: "update:modelValue", v: string): void;
@@ -62,8 +74,16 @@ function emitUp() {
        : current
            ? { version: HOME_LAYOUT_VERSION, blocks: [] }
            : null;
-    lastEmitted = serializeHomeLayout(props.modelValue, layout);
-    emit("update:modelValue", lastEmitted);
+    const next = serializeHomeLayout(props.modelValue, layout);
+    // docs/20 返工 #2 no-op 守卫：与当前 modelValue 严格相等则不回写（等价操作往返后父级不重标脏）。
+    // 此处必须用严格相等而非语义比较：保存路径 layoutPatchOf 读的是父级 layoutModel，跳发一个
+    // 「语义等价但字符串不同」的值会让父级停留在旧序列化形态，保存时落库旧状态。
+    if (next === props.modelValue) {
+        return;
+    }
+    lastEmitted = next;
+    emit("update:modelValue", next);
+    schedulePreview();
 }

 watch(
@@ -79,19 +99,108 @@ watch(
    { immediate: true },
 );

+/** 已完成树加载的站点 id（幂等标记；null=未加载或上次失败可重试） */
+let loadedTreeSiteId: number | null = null;
+
 async function loadTree() {
    if (!props.siteId) return;
+    // REWORK-DECISION: 幂等保护（返工清单 #1-3）——同一 siteId 已加载过不重复请求，避免 onMounted + watch 双触发；
+    // 请求失败则清标记允许后续重试
+    if (loadedTreeSiteId === props.siteId) return;
+    loadedTreeSiteId = props.siteId;
    treeLoading.value = true;
    try {
        tree.value = (await categoryApi.tree(props.siteId).send()) || [];
    } catch {
        tree.value = [];
+        loadedTreeSiteId = null;
    } finally {
        treeLoading.value = false;
    }
 }

-onMounted(loadTree);
+/**
+ * 站点上下文就绪后的数据初始化（docs/20 返工 #1）：
+ * ① 只要 siteId 有值就无条件加载栏目树（「数据栏目/人物分组」数据源），与「是否首用自动编排」解耦；
+ * ② 首用自动编排（D-4）复用已加载的树，不再独立承担加载职责。
+ * siteId 由父级异步种入（晚于本组件挂载）时由 watch 补跑。
+ */
+async function initSiteData() {
+    if (!props.siteId) return;
+    await loadTree();
+    if (parseHomeLayout(props.modelValue)) return;
+    if (!blocks.value.length && flat.value.length) {
+        blocks.value = genFromCategories(tree.value, props.modelValue).blocks;
+        selectedId.value = null;
+        emitUp();
+    }
+}
+
+onMounted(initSiteData);
+watch(
+    () => props.siteId,
+    id => {
+        if (id) initSiteData();
+    },
+);
+
+// ===== 中栏：实时预览（iframe + 视口切换 + postMessage 近似模拟 + 手动刷新兜底）=====
+
+const VIEWPORTS = [
+    { value: 1200, label: "桌面 1200" },
+    { value: 768, label: "平板 768" },
+    { value: 390, label: "手机 390" },
+] as const;
+const viewport = ref<number>(1200);
+/** iframe 重载键（key 变更 = 重新挂载 = 重新加载正式门户） */
+const frameKey = ref(0);
+const frameWrap = ref<HTMLElement | null>(null);
+/** 预览容器宽 → 缩放比（视口宽超出容器时等比缩小，保证整页可见） */
+const frameScale = computed(() => {
+    const w = frameWrap.value?.clientWidth || 0;
+    return w && viewport.value > w ? w / viewport.value : 1;
+});
+const frameHeight = computed(() => Math.round(560 * (1 / frameScale.value)));
+/** 预览就绪/模拟状态提示（注入成功置"已同步"，未保存新区块走手动刷新） */
+const previewState = ref("");
+
+let previewTimer: ReturnType<typeof setTimeout> | null = null;
+
+/** 编排变更 → debounce 500ms → postMessage 注入（R-41） */
+function schedulePreview() {
+    if (!props.portalUrl) return;
+    if (previewTimer) clearTimeout(previewTimer);
+    previewTimer = setTimeout(sendPreview, 500);
+}
+
+function sendPreview() {
+    const frame = document.querySelector<HTMLIFrameElement>(".hle-preview-frame iframe");
+    const win = frame?.contentWindow;
+    if (!win) return;
+    const order = blocks.value.filter(b => b.visible).map(b => b.id);
+    try {
+        win.postMessage({ type: "cms-layout-preview", order }, "*");
+        previewState.value = "已同步未保存的顺序/显隐（新区块保存后可见）";
+    } catch {
+        previewState.value = "预览注入不可用，请点「刷新预览」";
+    }
+}
+
+function reloadPreview() {
+    frameKey.value++;
+    previewState.value = "";
+}
+
+onBeforeUnmount(() => {
+    if (previewTimer) clearTimeout(previewTimer);
+});
+
+/** 保存成功后由父级调用：重载 iframe 呈现真实效果（验收 5「保存即可见」闭环） */
+function refreshAfterSave() {
+    reloadPreview();
+}
+
+// ===== 序列操作 =====

 function addBlock(type: string) {
    const def = blockDefOf(type);
@@ -138,6 +247,7 @@ function clearLayout() {
            selectedId.value = null;
            lastEmitted = serializeHomeLayout(props.modelValue, null);
            emit("update:modelValue", lastEmitted);
+            reloadPreview();
        },
    });
 }
@@ -179,9 +289,51 @@ function onFieldChange() {
 }

 /** quick_links 入口行：编辑期内存允许留空行，提交时由 cleanBlock 剔除 */
-type LinkItems = { name: string; url: string }[];
+type LinkItems = { name: string; url: string; icon?: string }[];
 function itemsOf(block: LayoutBlock): LinkItems {
-    return block.items || (block.items = []);
+    return (block.items as LinkItems) || (block.items = [] as unknown as LayoutBlock["items"]);
+}
+
+/** D-1 统计项行（编辑期允许空行，提交时 cleanBlock 剔除） */
+function statsOf(block: LayoutBlock): StatItem[] {
+    return block.stats || (block.stats = []);
+}
+function addStat(block: LayoutBlock) {
+    if (statsOf(block).length >= STATS_MAX) return;
+    statsOf(block).push({ label: "", value: "", unit: "" });
+    emitUp();
+}
+function removeStat(block: LayoutBlock, index: number) {
+    statsOf(block).splice(index, 1);
+    emitUp();
+}
+
+/** D-3 专题卡行（编辑器模型 topicItems，cleanBlock 序列化为契约键 items） */
+function topicsOf(block: LayoutBlock): TopicItem[] {
+    return block.topicItems || (block.topicItems = []);
+}
+function addTopic(block: LayoutBlock) {
+    if (topicsOf(block).length >= TOPICS_MAX) return;
+    topicsOf(block).push({ title: "", image: "" });
+    emitUp();
+}
+function removeTopic(block: LayoutBlock, index: number) {
+    topicsOf(block).splice(index, 1);
+    emitUp();
+}
+
+/** D-9 徽章行 */
+function badgesOf(block: LayoutBlock): BadgeItem[] {
+    return block.badgeItems || (block.badgeItems = []);
+}
+function addBadge(block: LayoutBlock) {
+    if (badgesOf(block).length >= BADGES_MAX) return;
+    badgesOf(block).push({ label: "", image: "" });
+    emitUp();
+}
+function removeBadge(block: LayoutBlock, index: number) {
+    badgesOf(block).splice(index, 1);
+    emitUp();
 }

 function addLink(block: LayoutBlock) {
@@ -202,7 +354,7 @@ function validate(): string | null {
    return errors.length ? errors.join("；") : null;
 }

-defineExpose({ validate });
+defineExpose({ validate, refreshAfterSave });
 </script>

 <template>
@@ -222,8 +374,9 @@ defineExpose({ validate });
            <p class="hle-empty-sub">点「从当前栏目一键生成」得到与现状等价的初始序列，再删改微调；或从空白开始添加区块。</p>
        </div>

-        <!-- 序列 + 属性面板 -->
+        <!-- 三栏：序列 + 实时预览 + 属性面板 -->
        <div v-else class="hle-body">
+            <!-- 左：区块序列（图标 + 高度示意骨架 + 摘要） -->
            <div class="hle-sequence">
                <div
                    v-for="(b, i) in blocks"
@@ -232,6 +385,10 @@ defineExpose({ validate });
                    :class="{ active: b.id === selectedId, hidden: !b.visible }"
                    @click="selectedId = b.id"
                >
+                    <!-- 返工 #3：序号徽标按数组位置编号（含隐藏区块，不重排），与 validateHomeLayout
+                         的「第 ${i+1} 个区块」报错口径一一对应 -->
+                    <span class="hle-row-no">{{ i + 1 }}</span>
+                    <span class="hle-row-vis" :class="`vis-${b.type}${b.type === 'article_list' ? '-' + (b.style || 'card') : ''}`"></span>
                    <span class="hle-row-main">
                        <Icon :type="blockDefOf(b.type)?.icon || 'md-square'" class="hle-row-icon" />
                        <span class="hle-row-title">{{ b.title || blockDefOf(b.type)?.title || b.type }}</span>
@@ -247,6 +404,30 @@ defineExpose({ validate });
                </div>
            </div>

+            <!-- 中：实时预览（正式门户 iframe，方案 B 近似模拟） -->
+            <div class="hle-preview">
+                <div class="hle-preview-bar">
+                    <RadioGroup v-model="viewport" size="small" @on-change="schedulePreview">
+                        <Radio v-for="v in VIEWPORTS" :key="v.value" :label="v.value">{{ v.label }}</Radio>
+                    </RadioGroup>
+                    <Button size="small" icon="md-refresh" @click="reloadPreview">刷新预览</Button>
+                </div>
+                <div ref="frameWrap" class="hle-preview-frame">
+                    <iframe
+                        :key="frameKey"
+                        :src="portalUrl"
+                        :style="{ width: viewport + 'px', height: frameHeight + 'px', transform: `scale(${frameScale})` }"
+                        title="门户首页实时预览"
+                        loading="lazy"
+                        @load="previewState = ''"
+                    ></iframe>
+                </div>
+                <p class="hle-preview-tip">
+                    {{ previewState || "预览为未保存编排的近似模拟（顺序/显隐即时注入；新增或改属性区块保存后点「刷新预览」可见）" }}
+                </p>
+            </div>
+
+            <!-- 右：属性面板 -->
            <div class="hle-props">
                <template v-if="selected && selectedDef">
                    <div class="hle-props-head">
@@ -256,8 +437,21 @@ defineExpose({ validate });
                    </div>
                    <div v-for="f in visibleFields" :key="f.key" class="hle-field">
                        <label class="hle-field-label">{{ f.label }}</label>
+                        <!-- F2/R-40：展示形态 = RadioCard 可视化选择（缩略图 + 文字），不盲选下拉 -->
+                        <div v-if="f.kind === 'select' && f.card" class="hle-style-cards">
+                            <label
+                                v-for="o in f.options"
+                                :key="o.value"
+                                class="hle-style-card"
+                                :class="{ active: (selected[f.key] || 'card') === o.value }"
+                                @click.prevent="selected![f.key] = o.value; onFieldChange()"
+                            >
+                                <BlockTypeThumb type="article_list" :variant="o.value" />
+                                <span class="hle-style-name">{{ o.label }}</span>
+                            </label>
+                        </div>
                        <Input
-                            v-if="f.kind === 'text'"
+                            v-else-if="f.kind === 'text'"
                            v-model="selected[f.key]"
                            :maxlength="f.maxlength || 100"
                            :placeholder="f.placeholder"
@@ -307,6 +501,14 @@ defineExpose({ validate });
                                    @on-change="onFieldChange"
                                />
                                <Input v-model="l.url" placeholder="https://… 或 / 站内路径" @on-change="onFieldChange" />
+                                <Poptip placement="bottom" width="300" transfer>
+                                    <Button size="small" class="hle-link-icon-btn">
+                                        {{ l.icon ? iconLabelOf(l.icon) : "图标" }}
+                                    </Button>
+                                    <template #content>
+                                        <IconGrid v-model="l.icon" @update:model-value="onFieldChange" />
+                                    </template>
+                                </Poptip>
                                <Button
                                    size="small"
                                    type="text"
@@ -326,6 +528,62 @@ defineExpose({ validate });
                                添加入口
                            </Button>
                        </div>
+                        <!-- D-1 统计项编辑器 -->
+                        <div v-else-if="f.kind === 'stats'" class="hle-rows-editor">
+                            <div v-for="(st, si) in statsOf(selected!)" :key="si" class="hle-stat-row">
+                                <Input v-model="st.label" class="hle-stat-label" maxlength="20" placeholder="名称（如 在校生）" @on-change="onFieldChange" />
+                                <Input v-model="st.value" class="hle-stat-value" maxlength="10" placeholder="数值（如 3.2）" @on-change="onFieldChange" />
+                                <Input v-model="st.unit" class="hle-stat-unit" maxlength="10" placeholder="单位（如 万）" @on-change="onFieldChange" />
+                                <Button size="small" type="text" icon="md-trash" class="hle-link-del" @click="removeStat(selected!, si)" />
+                            </div>
+                            <p v-if="!statsOf(selected!).length" class="hle-links-empty">还没有统计项，点下方按钮添加</p>
+                            <Button class="hle-link-add" long icon="md-add" :disabled="statsOf(selected!).length >= STATS_MAX" @click="addStat(selected!)">
+                                添加统计项
+                            </Button>
+                        </div>
+                        <!-- D-3 专题卡编辑器 -->
+                        <div v-else-if="f.kind === 'topics'" class="hle-rows-editor">
+                            <div v-for="(t, ti) in topicsOf(selected!)" :key="ti" class="hle-topic-card">
+                                <div class="hle-topic-head">
+                                    <span>专题 {{ ti + 1 }}</span>
+                                    <Button size="small" type="text" icon="md-trash" class="hle-link-del" @click="removeTopic(selected!, ti)" />
+                                </div>
+                                <Input v-model="t.title" maxlength="50" placeholder="专题标题（如 2026 招生专题）" @on-change="onFieldChange" />
+                                <Input v-model="t.image" maxlength="500" placeholder="图片路径 /yschcms/upload/…（附件管理上传后复制）" @on-change="onFieldChange" />
+                                <Input v-model="t.description" maxlength="200" placeholder="一句话描述（可选）" @on-change="onFieldChange" />
+                                <div class="hle-topic-cta">
+                                    <Input v-model="t.ctaText" maxlength="20" placeholder="按钮文字（如 进入专题）" @on-change="onFieldChange" />
+                                    <Input v-model="t.ctaUrl" maxlength="500" placeholder="按钮地址 https://… 或 / 路径" @on-change="onFieldChange" />
+                                </div>
+                            </div>
+                            <p v-if="!topicsOf(selected!).length" class="hle-links-empty">还没有专题卡，点下方按钮添加</p>
+                            <Button class="hle-link-add" long icon="md-add" :disabled="topicsOf(selected!).length >= TOPICS_MAX" @click="addTopic(selected!)">
+                                添加专题卡
+                            </Button>
+                        </div>
+                        <!-- D-9 徽章编辑器 -->
+                        <div v-else-if="f.kind === 'badges'" class="hle-rows-editor">
+                            <div v-for="(bd, bi) in badgesOf(selected!)" :key="bi" class="hle-badge-row">
+                                <Input v-model="bd.label" class="hle-stat-label" maxlength="20" placeholder="名称（如 软科排名）" @on-change="onFieldChange" />
+                                <Input v-model="bd.image" maxlength="500" placeholder="徽章图路径 /yschcms/upload/…" @on-change="onFieldChange" />
+                                <Input v-model="bd.desc" class="hle-stat-unit" maxlength="50" placeholder="说明（如 前100强）" @on-change="onFieldChange" />
+                                <Button size="small" type="text" icon="md-trash" class="hle-link-del" @click="removeBadge(selected!, bi)" />
+                            </div>
+                            <p v-if="!badgesOf(selected!).length" class="hle-links-empty">还没有徽章，点下方按钮添加</p>
+                            <Button class="hle-link-add" long icon="md-add" :disabled="badgesOf(selected!).length >= BADGES_MAX" @click="addBadge(selected!)">
+                                添加徽章
+                            </Button>
+                        </div>
+                        <!-- D-7 人物分组栏目（单选下拉） -->
+                        <Select
+                            v-else-if="f.kind === 'category'"
+                            :model-value="selected.categoryId"
+                            clearable
+                            placeholder="不选 = 全部人物"
+                            @on-change="(v: any) => { selected!.categoryId = v || undefined; onFieldChange(); }"
+                        >
+                            <Option v-for="c in flat" :key="c.id" :value="c.id">{{ c.name }}</Option>
+                        </Select>
                        <p v-if="f.tip" class="hle-field-tip">{{ f.tip }}</p>
                    </div>
                </template>
@@ -333,17 +591,19 @@ defineExpose({ validate });
            </div>
        </div>

-        <!-- 添加区块抽屉 -->
-        <Drawer v-model="addOpen" title="添加区块" width="420" class="hle-drawer">
+        <!-- 添加区块抽屉（R-40：每类型配缩略示意图） -->
+        <Drawer v-model="addOpen" title="添加区块" width="440" class="hle-drawer">
            <div
                v-for="def in BLOCK_TYPES"
                :key="def.type"
                class="hle-type-card"
                @click="addBlock(def.type)"
            >
-                <Icon :type="def.icon" class="hle-type-icon" />
+                <div class="hle-type-thumb">
+                    <BlockTypeThumb :type="def.type" />
+                </div>
                <span class="hle-type-body">
-                    <span class="hle-type-title">{{ def.title }}</span>
+                    <span class="hle-type-title"><Icon :type="def.icon" /> {{ def.title }}</span>
                    <span class="hle-type-desc">{{ def.description }}</span>
                </span>
                <Icon type="ios-arrow-forward" class="hle-type-go" />
@@ -360,10 +620,6 @@ defineExpose({ validate });
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
-        .hle-gen,
-        .hle-clear {
-            margin-left: 0;
-        }
        .hle-clear {
            color: #999;
            &:hover {
@@ -392,20 +648,25 @@ defineExpose({ validate });
    }
    .hle-body {
        display: flex;
-        gap: 14px;
-        align-items: flex-start;
+        gap: 12px;
+        align-items: stretch;
    }
    .hle-sequence {
-        flex: 1;
-        min-width: 0;
+        width: 262px;
+        flex: none;
        display: flex;
        flex-direction: column;
        gap: 8px;
+        max-height: 640px;
+        overflow: auto;
+        // 首行序号徽标悬浮在行框上沿（-7px），留出顶部空间防裁剪
+        padding-top: 8px;
    }
    .hle-row {
+        position: relative;
        border: 1px solid #dcdee2;
        border-radius: 6px;
-        padding: 8px 12px;
+        padding: 8px 12px 8px 16px;
        cursor: pointer;
        transition: border-color 0.2s, box-shadow 0.2s;
        &.active {
@@ -415,6 +676,50 @@ defineExpose({ validate });
        &.hidden {
            opacity: 0.55;
        }
+        // 返工 #3：右上角序号徽标（悬浮于行框上沿，不与 ops 按钮带重叠）
+        .hle-row-no {
+            position: absolute;
+            top: -7px;
+            right: 6px;
+            min-width: 16px;
+            height: 15px;
+            line-height: 13px;
+            padding: 0 4px;
+            border-radius: 8px;
+            background: #e8f3ff;
+            border: 1px solid #9cc7f5;
+            color: #2d8cf0;
+            font-size: 11px;
+            font-weight: 600;
+            text-align: center;
+        }
+        &.hidden .hle-row-no {
+            background: #f5f5f5;
+            border-color: #dcdfe6;
+            color: #a8abb2;
+        }
+        .hle-row-vis {
+            position: absolute;
+            left: 5px;
+            top: 10px;
+            bottom: 10px;
+            width: 4px;
+            border-radius: 2px;
+            background: linear-gradient(180deg, #7fb2f0 0%, #4a7fd0 100%);
+            opacity: 0.75;
+        }
+        .hle-row-vis.vis-ticker,
+        .hle-row-vis.vis-notice_bar {
+            top: 45%;
+            background: #2d8cf0;
+        }
+        .hle-row-vis.vis-links,
+        .hle-row-vis.vis-quick_links {
+            top: 20%;
+        }
+        .hle-row-vis.vis-gallery {
+            top: 15%;
+        }
        .hle-row-main {
            display: flex;
            align-items: center;
@@ -446,13 +751,53 @@ defineExpose({ validate });
            }
        }
    }
+    .hle-preview {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        border: 1px solid #e8eaec;
+        border-radius: 6px;
+        background: #f6f8fb;
+        padding: 8px;
+        .hle-preview-bar {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 8px;
+            margin-bottom: 8px;
+            flex-wrap: wrap;
+        }
+        .hle-preview-frame {
+            position: relative;
+            flex: 1;
+            min-height: 480px;
+            overflow: hidden;
+            border: 1px solid #e2e8f2;
+            border-radius: 4px;
+            background: #fff;
+            iframe {
+                border: 0;
+                transform-origin: top left;
+                display: block;
+            }
+        }
+        .hle-preview-tip {
+            margin: 6px 2px 0;
+            color: #999;
+            font-size: 12px;
+            line-height: 1.5;
+        }
+    }
    .hle-props {
-        width: 320px;
+        width: 300px;
        flex: none;
        border: 1px solid #e8eaec;
        border-radius: 6px;
        padding: 12px;
        background: #fafbfc;
+        max-height: 640px;
+        overflow: auto;
        .hle-props-head {
            display: flex;
            align-items: center;
@@ -491,6 +836,37 @@ defineExpose({ validate });
                margin-top: 3px;
            }
        }
+        .hle-style-cards {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 8px;
+            .hle-style-card {
+                border: 1px solid #dcdee2;
+                border-radius: 6px;
+                padding: 6px;
+                cursor: pointer;
+                background: #fff;
+                transition: border-color 0.2s, box-shadow 0.2s;
+                &:hover {
+                    border-color: #5cadff;
+                }
+                &.active {
+                    border-color: #2d8cf0;
+                    box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.12);
+                    .hle-style-name {
+                        color: #2d8cf0;
+                        font-weight: 600;
+                    }
+                }
+                .hle-style-name {
+                    display: block;
+                    margin-top: 4px;
+                    font-size: 12px;
+                    color: #515a6e;
+                    text-align: center;
+                }
+            }
+        }
        .hle-cats {
            max-height: 220px;
            overflow: auto;
@@ -533,6 +909,51 @@ defineExpose({ validate });
                border-style: dashed;
            }
        }
+        .hle-rows-editor {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            .hle-stat-row,
+            .hle-badge-row {
+                display: flex;
+                align-items: center;
+                gap: 6px;
+                .hle-stat-label {
+                    flex: 2;
+                    min-width: 0;
+                }
+                .hle-stat-value {
+                    flex: 1;
+                    min-width: 0;
+                }
+                .hle-stat-unit {
+                    flex: 1;
+                    min-width: 0;
+                }
+            }
+            .hle-topic-card {
+                border: 1px solid #e2e8f2;
+                border-radius: 6px;
+                padding: 8px;
+                display: flex;
+                flex-direction: column;
+                gap: 6px;
+                .hle-topic-head {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    font-size: 12px;
+                    color: #8a93a6;
+                }
+                .hle-topic-cta {
+                    display: flex;
+                    gap: 6px;
+                }
+            }
+        }
+        .hle-link-icon-btn {
+            flex: none;
+        }
    }
    .hle-type-card {
        display: flex;
@@ -540,7 +961,7 @@ defineExpose({ validate });
        gap: 10px;
        border: 1px solid #dcdee2;
        border-radius: 6px;
-        padding: 12px;
+        padding: 10px;
        margin-bottom: 10px;
        cursor: pointer;
        transition: border-color 0.2s, box-shadow 0.2s;
@@ -548,9 +969,12 @@ defineExpose({ validate });
            border-color: #2d8cf0;
            box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.1);
        }
-        .hle-type-icon {
-            font-size: 22px;
-            color: #2d8cf0;
+        .hle-type-thumb {
+            width: 116px;
+            flex: none;
+            border: 1px solid #edf1f7;
+            border-radius: 4px;
+            overflow: hidden;
        }
        .hle-type-body {
            flex: 1;
@@ -559,6 +983,10 @@ defineExpose({ validate });
                display: block;
                font-weight: 600;
                font-size: 13px;
+                .ivu-icon {
+                    color: #2d8cf0;
+                    margin-right: 4px;
+                }
            }
            .hle-type-desc {
                display: block;
@@ -9,7 +9,8 @@ import { LayoutBlock, LINK_NAME_MAX, LIST_STYLES, NOTICE_TEXT_MAX, QUICK_LINK_MA
 export interface BlockPropField {
    key: string;
    label: string;
-    kind: "text" | "number" | "select" | "switch" | "categories" | "links";
+    kind: "text" | "number" | "select" | "switch" | "categories" | "links"
+        | "stats" | "topics" | "badges" | "category" | "video";
    options?: { value: string; label: string }[];
    min?: number;
    max?: number;
@@ -19,6 +20,8 @@ export interface BlockPropField {
    tip?: string;
    /** 条件显示（返回 false 时隐藏且不校验） */
    showIf?: (block: LayoutBlock) => boolean;
+    /** select 的可视化选项卡渲染（RadioCard + 缩略图，F2/R-40：形态选择不盲选） */
+    card?: boolean;
 }

 export interface BlockTypeDef {
@@ -40,11 +43,12 @@ export const BLOCK_TYPES: BlockTypeDef[] = [
        defaultProps: () => ({ style: "card", size: 8, categoryIds: [] }),
        propFields: [
            { key: "title", label: "区块标题", kind: "text", placeholder: "留空显示第一个栏目名" },
+            { key: "subtitle", label: "英文副题", kind: "text", placeholder: "可选，如 Campus News（主题开双语后显示）" },
            {
                key: "categoryIds", label: "数据栏目", kind: "categories",
                tip: "可多选；渲染时聚合所选栏目的全部子孙栏目文章（文章通常挂叶子栏目）",
            },
-            { key: "style", label: "展示形态", kind: "select", options: LIST_STYLES },
+            { key: "style", label: "展示形态", kind: "select", options: LIST_STYLES, card: true, tip: "卡片缩略图为该形态的典型渲染示意，最终视觉以皮肤包实现为准" },
            {
                key: "size", label: "文章条数", kind: "number", min: 1, max: 20,
                showIf: b => b.style !== "image_wall",
@@ -64,6 +68,7 @@ export const BLOCK_TYPES: BlockTypeDef[] = [
        defaultProps: () => ({ source: "top", size: 6 }),
        propFields: [
            { key: "title", label: "区块标题", kind: "text", placeholder: "默认「要闻速递」" },
+            { key: "subtitle", label: "英文副题", kind: "text", placeholder: "可选，如 Latest News（主题开双语后显示）" },
            {
                key: "source", label: "数据来源", kind: "select",
                options: [
@@ -87,6 +92,14 @@ export const BLOCK_TYPES: BlockTypeDef[] = [
        propFields: [
            { key: "title", label: "区块标题", kind: "text", placeholder: "默认「线上展厅」" },
            { key: "subtitle", label: "英文副题", kind: "text", placeholder: "默认 Online Exhibition Hall" },
+            {
+                key: "layout", label: "布局形态", kind: "select",
+                options: [
+                    { value: "grid", label: "规整网格" },
+                    { value: "masonry", label: "瀑布流（campus_wall）" },
+                ],
+                tip: "瀑布流 = 不等高错落排布，hover 放大；适合校园风光多图",
+            },
        ],
    },
    {
@@ -97,6 +110,7 @@ export const BLOCK_TYPES: BlockTypeDef[] = [
        defaultProps: () => ({}),
        propFields: [
            { key: "title", label: "区块标题", kind: "text", placeholder: "默认「友情链接」" },
+            { key: "subtitle", label: "英文副题", kind: "text", placeholder: "可选，如 Friendly Links（主题开双语后显示）" },
            { key: "group", label: "链接分组", kind: "text", placeholder: "留空显示全部分组" },
        ],
    },
@@ -108,9 +122,10 @@ export const BLOCK_TYPES: BlockTypeDef[] = [
        defaultProps: () => ({ items: [{ name: "", url: "" }] }),
        propFields: [
            { key: "title", label: "区块标题", kind: "text", placeholder: "默认「快捷通道」" },
+            { key: "subtitle", label: "英文副题", kind: "text", placeholder: "可选，如 Quick Links（主题开双语后显示）" },
            {
                key: "items", label: "入口列表", kind: "links",
-                tip: `每个入口 = 名称（${LINK_NAME_MAX} 字内）+ 地址（http(s):// 或站内 / 路径），最多 ${QUICK_LINK_MAX} 个`,
+                tip: `每个入口 = 名称（${LINK_NAME_MAX} 字内）+ 地址 + 可选图标，最多 ${QUICK_LINK_MAX} 个；未选图标显示首字徽章`,
            },
        ],
    },
@@ -122,6 +137,7 @@ export const BLOCK_TYPES: BlockTypeDef[] = [
        defaultProps: () => ({ text: "", level: "info" }),
        propFields: [
            { key: "title", label: "区块标题", kind: "text", placeholder: "默认「公告」，显示为左侧标签" },
+            { key: "subtitle", label: "英文副题", kind: "text", placeholder: "可选（主题开双语后显示）" },
            {
                key: "text", label: "公告正文", kind: "text", maxlength: NOTICE_TEXT_MAX,
                placeholder: "如：国庆放假安排通知如下……", tip: `通栏一行展示，建议一句话（${NOTICE_TEXT_MAX} 字内）`,
@@ -136,6 +152,97 @@ export const BLOCK_TYPES: BlockTypeDef[] = [
            },
        ],
    },
+    // ===== docs/20 D-1~D-9 新组件（骨架兜底渲染，所有主题可用） =====
+    {
+        type: "stats_band",
+        title: "数字计数带",
+        icon: "md-stats",
+        description: "在校生/教职工/占地/院士等大数字横排，滚动可见时自动计数动画",
+        defaultProps: () => ({ stats: [{ label: "", value: "", unit: "" }] }),
+        propFields: [
+            { key: "title", label: "区块标题", kind: "text", placeholder: "默认「数说学校」" },
+            { key: "subtitle", label: "英文副题", kind: "text", placeholder: "可选，如 Facts & Figures" },
+            {
+                key: "stats", label: "统计项", kind: "stats",
+                tip: "数值支持小数与「万/千」单位（如 3.2 + 万）；滚动到可视区时数字从 0 滚动到目标值",
+            },
+        ],
+    },
+    {
+        type: "featured_topics",
+        title: "专题大卡",
+        icon: "md-photos",
+        description: "招生/校庆/双一流等专题：大图 + 标题 + 描述 + 按钮，2~3 张并排",
+        defaultProps: () => ({ topicItems: [{ title: "", image: "" }] }),
+        propFields: [
+            { key: "title", label: "区块标题", kind: "text", placeholder: "默认「专题推荐」" },
+            { key: "subtitle", label: "英文副题", kind: "text", placeholder: "可选，如 Featured Topics" },
+            {
+                key: "items", label: "专题卡", kind: "topics",
+                tip: "图片先在「附件管理」上传后复制路径填入（/ 开头），建议尺寸 800×500",
+            },
+        ],
+    },
+    {
+        type: "video_tour",
+        title: "视频/VR 校园",
+        icon: "md-play-circle",
+        description: "校园宣传片/VR 导览：封面大图 + 播放按钮，点击跳转视频地址",
+        defaultProps: () => ({ cover: "", url: "" }),
+        propFields: [
+            { key: "title", label: "区块标题", kind: "text", placeholder: "默认「云端校园」" },
+            { key: "subtitle", label: "英文副题", kind: "text", placeholder: "可选，如 Virtual Tour" },
+            {
+                key: "cover", label: "封面图地址", kind: "text", maxlength: 500,
+                placeholder: "/yschcms/upload/… 或 https://…（附件管理上传后复制路径）",
+            },
+            {
+                key: "url", label: "视频/VR 地址", kind: "text", maxlength: 500,
+                placeholder: "https://… 或站内 / 路径，点击封面跳转",
+            },
+        ],
+    },
+    {
+        type: "events",
+        title: "学术日历",
+        icon: "md-calendar",
+        description: "学术报告/活动：大日期块 + 活动名 + 地点；数据在「轮播管理 → 学术活动」维护",
+        defaultProps: () => ({}),
+        propFields: [
+            { key: "title", label: "区块标题", kind: "text", placeholder: "默认「学术活动」" },
+            { key: "subtitle", label: "英文副题", kind: "text", placeholder: "可选，如 Academic Events" },
+        ],
+    },
+    {
+        type: "people",
+        title: "名师风采",
+        icon: "md-contacts",
+        description: "圆头像 + 姓名 + 头衔 + 一句话简介卡片；人物数据在「人物管理」维护",
+        defaultProps: () => ({}),
+        propFields: [
+            { key: "title", label: "区块标题", kind: "text", placeholder: "默认「名师风采」" },
+            { key: "subtitle", label: "英文副题", kind: "text", placeholder: "可选，如 Our Faculty" },
+            {
+                key: "categoryId", label: "人物分组栏目", kind: "category",
+                tip: "可选；选择后仅展示挂在该栏目下的人物（人物编辑时指定所属栏目），不选 = 全部人物。人物的新增/编辑在「人物管理」页（/person）维护",
+            },
+        ],
+    },
+    {
+        type: "badges",
+        title: "排名/学科徽章带",
+        icon: "md-ribbon",
+        description: "软科排名 / 学科评估 A+ / ESI 前 1% 等徽章图片 + 文字横排",
+        defaultProps: () => ({ badgeItems: [{ label: "", image: "" }] }),
+        propFields: [
+            { key: "title", label: "区块标题", kind: "text", placeholder: "默认「实力声誉」" },
+            { key: "subtitle", label: "英文副题", kind: "text", placeholder: "可选，如 Rankings" },
+            {
+                key: "badgeItems", label: "徽章列表", kind: "badges",
+                tip: "徽章图片建议透明底 PNG（附件管理上传后复制路径，/ 开头）",
+            },
+        ],
+    },
 ];

 export function blockDefOf(type: string): BlockTypeDef | undefined {
@@ -154,7 +261,7 @@ export function blockSummary(block: LayoutBlock, namesOf: (id: number) => string
        parts.push(block.source === "category" ? "指定栏目最新" : "全站置顶");
        parts.push(`${block.size ?? 6}条`);
    } else if (block.type === "gallery") {
-        parts.push("线上展厅图集");
+        parts.push(block.layout === "masonry" ? "线上展厅 · 瀑布流" : "线上展厅图集");
    } else if (block.type === "links") {
        parts.push(block.group ? `分组：${block.group}` : "全部分组");
    } else if (block.type === "quick_links") {
@@ -166,6 +273,21 @@ export function blockSummary(block: LayoutBlock, namesOf: (id: number) => string
        if (text) {
            parts.push(text.length > 18 ? `${text.slice(0, 18)}…` : text);
        }
+    } else if (block.type === "stats_band") {
+        const filled = (block.stats || []).filter(st => (st.label || "").trim() || (st.value || "").trim());
+        parts.push(`${filled.length} 项数字`);
+    } else if (block.type === "featured_topics") {
+        const filled = (block.topicItems || []).filter(t => (t.title || "").trim());
+        parts.push(`${filled.length} 张专题卡`);
+    } else if (block.type === "video_tour") {
+        parts.push("封面 + 播放跳转");
+    } else if (block.type === "events") {
+        parts.push("学术活动（轮播管理维护）");
+    } else if (block.type === "people") {
+        parts.push(block.categoryId ? "按分组栏目过滤" : "全部人物");
+    } else if (block.type === "badges") {
+        const filled = (block.badgeItems || []).filter(b => (b.label || "").trim());
+        parts.push(`${filled.length} 个徽章`);
    }
    const ids = block.categoryIds || [];
    if (ids.length) {
@@ -49,7 +49,7 @@ describe("parseHomeLayout：容错解析（无键/非法→null 回落）", () =
        expect(layout.blocks.length).toBe(3);
        expect(layout.blocks[0]).toMatchObject({ id: "b1", type: "article_list", title: "校园时讯", categoryIds: [12, 15], style: "news_grid", size: 16, background: true, visible: true });
        expect(layout.blocks[2].id).toMatch(/^b_/);
-        expect(layout.blocks.some(b => b.type === "richtext")).toBe(false);
+        expect(layout.blocks.some((b: LayoutBlock) => (b as { type: string }).type === "richtext")).toBe(false);
    });

    it("visible:false 保留（保序下线），非字符串数字容错", () => {
@@ -247,3 +247,74 @@ describe("flattenListCategories：扁平化仅列表型（选择器数据源）"
        ]);
    });
 });
+
+/* ===== docs/20 D 组件库：新类型解析/序列化/校验 ===== */
+describe("homeLayout - D 组件（docs/20）", () => {
+    const D_LAYOUT = JSON.stringify({
+        home_layout: {
+            version: 1,
+            blocks: [
+                { id: "s1", type: "stats_band", title: "数说学校", stats: [
+                    { label: "在校生", value: "3.2", unit: "万", icon: "xiaoli" },
+                    { label: "教职工", value: "2800" },
+                ] },
+                { id: "t1", type: "featured_topics", items: [
+                    { title: "2026 招生专题", image: "/cms/upload/topic1.jpg", description: "欢迎报考", ctaText: "进入专题", ctaUrl: "https://zs.example.edu.cn" },
+                ] },
+                { id: "v1", type: "video_tour", cover: "/cms/upload/vr.jpg", url: "https://vr.example.edu.cn" },
+                { id: "e1", type: "events" },
+                { id: "p1", type: "people", categoryId: 12 },
+                { id: "b1", type: "badges", badgeItems: [{ label: "软科排名", desc: "前100强", image: "/cms/upload/badge.png" }] },
+                { id: "g1", type: "gallery", layout: "masonry" },
+                { id: "q1", type: "quick_links", items: [{ name: "办事大厅", url: "/service", icon: "banshi" }] },
+            ],
+        },
+    });
+
+    it("parse：D 新类型全量解析（stats/topicItems→items 契约/video/people.categoryId/gallery.layout/icon）", () => {
+        const layout = parseHomeLayout(D_LAYOUT)!;
+        expect(layout.blocks).toHaveLength(8);
+        const s1 = layout.blocks.find(b => b.id === "s1")!;
+        expect(s1.stats?.[0]).toMatchObject({ label: "在校生", value: "3.2", unit: "万", icon: "xiaoli" });
+        const t1 = layout.blocks.find(b => b.id === "t1")!;
+        expect(t1.topicItems?.[0].ctaUrl).toBe("https://zs.example.edu.cn");
+        const v1 = layout.blocks.find(b => b.id === "v1")!;
+        expect(v1.cover).toBe("/cms/upload/vr.jpg");
+        const p1 = layout.blocks.find(b => b.id === "p1")!;
+        expect(p1.categoryId).toBe(12);
+        const g1 = layout.blocks.find(b => b.id === "g1")!;
+        expect(g1.layout).toBe("masonry");
+        const q1 = layout.blocks.find(b => b.id === "q1")!;
+        expect(q1.items?.[0].icon).toBe("banshi");
+    });
+
+    it("roundtrip：D 类型 serialize→parse 无损（topicItems 序列化为契约键 items；空行剔除）", () => {
+        const once = parseHomeLayout(D_LAYOUT)!;
+        const twice = parseHomeLayout(serializeHomeLayout("{}", once))!;
+        const t1 = twice.blocks.find(b => b.id === "t1")!;
+        expect(JSON.stringify(t1.topicItems)).toBe(JSON.stringify(once.blocks.find(b => b.id === "t1")!.topicItems));
+        const b1 = twice.blocks.find(b => b.id === "b1")!;
+        expect(b1.badgeItems?.[0].label).toBe("软科排名");
+        // quick_links icon 随行序列化
+        const q1 = twice.blocks.find(b => b.id === "q1")!;
+        expect(q1.items?.[0].icon).toBe("banshi");
+        // gallery masonry 序列化
+        const g1 = twice.blocks.find(b => b.id === "g1")!;
+        expect(g1.layout).toBe("masonry");
+    });
+
+    it("validate：D 各类缺失/超限/非法值给出可读错误", () => {
+        const mk = (blocks: unknown[]) =>
+            ({ version: 1, blocks: blocks as never[] });
+        expect(validateHomeLayout(mk([{ id: "x", type: "stats_band", visible: true }]))[0]).toContain("统计项");
+        expect(validateHomeLayout(mk([{ id: "x", type: "stats_band", visible: true, stats: [{ label: "在校生", value: "12345678901" }] }]))[0]).toContain("数值");
+        expect(validateHomeLayout(mk([{ id: "x", type: "featured_topics", visible: true }]))[0]).toContain("专题卡");
+        expect(validateHomeLayout(mk([{ id: "x", type: "featured_topics", visible: true, topicItems: [{ title: "专题", image: "javascript:alert(1)" }] }]))[0]).toContain("图片");
+        expect(validateHomeLayout(mk([{ id: "x", type: "video_tour", visible: true }]))[0]).toContain("封面");
+        expect(validateHomeLayout(mk([{ id: "x", type: "video_tour", visible: true, cover: "/cms/upload/a.jpg" }]))[0]).toContain("视频");
+        expect(validateHomeLayout(mk([{ id: "x", type: "badges", visible: true }]))[0]).toContain("徽章");
+        expect(validateHomeLayout(mk([{ id: "x", type: "gallery", visible: true, layout: "zigzag" }]))[0]).toContain("布局");
+        // 合法布局零错误
+        expect(validateHomeLayout(mk([{ id: "x", type: "gallery", visible: true, layout: "masonry" }]))).toEqual([]);
+    });
+});
@@ -9,13 +9,41 @@
 */
 import { CategoryTreeNode } from "@/types/cms";

-/** 区块类型白名单（与后端 SiteService HOME_LAYOUT_BLOCK_TYPES 一致） */
-export type BlockType = "article_list" | "ticker" | "gallery" | "links" | "quick_links" | "notice_bar";
+/** 区块类型白名单（与后端 SiteService HOME_LAYOUT_BLOCK_TYPES 一致；docs/20 D 新增后 12 种） */
+export type BlockType =
+    | "article_list" | "ticker" | "gallery" | "links" | "quick_links" | "notice_bar"
+    // docs/20 D-1~D-9
+    | "stats_band" | "featured_topics" | "video_tour" | "events" | "people" | "badges";

-/** quick_links 单个入口（v2 手册 §2.8） */
+/** quick_links 单个入口（v2 手册 §2.8；D-2 加可选 icon 内置图标标识符） */
 export interface QuickLinkItem {
    name: string;
    url: string;
+    icon?: string;
+}
+
+/** stats_band 单个统计项（D-1：数字计数带） */
+export interface StatItem {
+    label: string;
+    value: string;
+    unit?: string;
+    icon?: string;
+}
+
+/** featured_topics 单张专题卡（D-3） */
+export interface TopicItem {
+    title: string;
+    description?: string;
+    image: string;
+    ctaText?: string;
+    ctaUrl?: string;
+}
+
+/** badges 单个徽章（D-9） */
+export interface BadgeItem {
+    label: string;
+    desc?: string;
+    image: string;
 }

 /** article_list 展示形态（与后端渲染端 style 分支及主题 fragment 对应） */
@@ -60,6 +88,20 @@ export interface LayoutBlock {
    url?: string;
    /** notice_bar 提示级别：info=一般（缺省）| warn=醒目 */
    level?: string;
+    // ===== docs/20 D 组件库新增字段 =====
+    /** gallery 布局（D-8）：grid 规整网格（缺省）| masonry 瀑布流 */
+    layout?: string;
+    /** quick_links 统一图标形状随主题参数，不落区块 */
+    /** stats_band 统计项（D-1，1~8 项） */
+    stats?: StatItem[];
+    /** featured_topics 专题卡（D-3，编辑器模型；序列化键为 items，与后端契约对齐） */
+    topicItems?: TopicItem[];
+    /** video_tour（D-5） */
+    cover?: string;
+    /** people 数据栏目（D-7，可空 = 全部人物） */
+    categoryId?: number;
+    /** badges 徽章（D-9，1~8 项） */
+    badgeItems?: BadgeItem[];
 }

 export interface HomeLayout {
@@ -69,9 +111,10 @@ export interface HomeLayout {

 export const HOME_LAYOUT_VERSION = 1;

-/** 服务端同款约束（SiteService §4.6 + v2 手册 §2.8） */
+/** 服务端同款约束（SiteService §4.6 + v2 手册 §2.8 + docs/20 D） */
 export const BLOCK_TYPES_ALLOWED: BlockType[] = [
    "article_list", "ticker", "gallery", "links", "quick_links", "notice_bar",
+    "stats_band", "featured_topics", "video_tour", "events", "people", "badges",
 ];
 export const SIZE_MIN = 1;
 export const SIZE_MAX = 20;
@@ -81,6 +124,14 @@ export const QUICK_LINK_MAX = 12;
 export const LINK_NAME_MAX = 20;
 export const NOTICE_TEXT_MAX = 200;
 export const NOTICE_LEVELS = ["info", "warn"];
+// ===== docs/20 D 组件库约束（与后端 SiteService 同契约） =====
+export const STATS_MAX = 8;
+export const TOPICS_MAX = 6;
+export const BADGES_MAX = 8;
+export const GALLERY_LAYOUTS = ["grid", "masonry"];
+/** 内置图标标识符（D-2：与门户骨架 icon fragment 同 key 集） */
+export const ICON_KEY_PATTERN = /^[a-z0-9-]{1,30}$/;
+export const ASSET_URL_PATTERN = /^(\/.+|https?:\/\/\S+)$/;
 /** 入口/跳转地址：http(s):// 绝对地址或站内 / 路径（与后端 HOME_LAYOUT_LINK_PATTERN 同语义） */
 const LINK_URL_PATTERN = /^(https?:\/\/\S+|\/.+)$/;

@@ -146,7 +197,62 @@ function toLinkItems(v: unknown): QuickLinkItem[] | undefined {
        if (name === null || url === null) {
            continue;
        }
-        items.push({ name, url });
+        const item: QuickLinkItem = { name, url };
+        if (typeof obj?.["icon"] === "string" && ICON_KEY_PATTERN.test(obj["icon"] as string)) {
+            item.icon = obj["icon"] as string;
+        }
+        items.push(item);
+    }
+    return items.length ? items : undefined;
+}
+
+/** stats_band 统计项容错还原（D-1） */
+function toStatItems(v: unknown): StatItem[] | undefined {
+    if (!Array.isArray(v)) return undefined;
+    const items: StatItem[] = [];
+    for (const raw of v as unknown[]) {
+        const obj = asObject(raw);
+        const label = typeof obj?.["label"] === "string" ? (obj["label"] as string).trim() : "";
+        const value = typeof obj?.["value"] === "string" ? (obj["value"] as string).trim() : "";
+        if (!label || !value) continue;
+        const item: StatItem = { label, value };
+        if (typeof obj?.["unit"] === "string" && (obj["unit"] as string).trim()) item.unit = (obj["unit"] as string).trim();
+        if (typeof obj?.["icon"] === "string" && ICON_KEY_PATTERN.test(obj["icon"] as string)) item.icon = obj["icon"] as string;
+        items.push(item);
+    }
+    return items.length ? items : undefined;
+}
+
+/** featured_topics 专题卡容错还原（D-3） */
+function toTopicItems(v: unknown): TopicItem[] | undefined {
+    if (!Array.isArray(v)) return undefined;
+    const items: TopicItem[] = [];
+    for (const raw of v as unknown[]) {
+        const obj = asObject(raw);
+        const title = typeof obj?.["title"] === "string" ? (obj["title"] as string).trim() : "";
+        const image = typeof obj?.["image"] === "string" ? (obj["image"] as string).trim() : "";
+        if (!title || !image) continue;
+        const item: TopicItem = { title, image };
+        if (typeof obj?.["description"] === "string" && (obj["description"] as string).trim()) item.description = (obj["description"] as string).trim();
+        if (typeof obj?.["ctaText"] === "string" && (obj["ctaText"] as string).trim()) item.ctaText = (obj["ctaText"] as string).trim();
+        if (typeof obj?.["ctaUrl"] === "string" && (obj["ctaUrl"] as string).trim()) item.ctaUrl = (obj["ctaUrl"] as string).trim();
+        items.push(item);
+    }
+    return items.length ? items : undefined;
+}
+
+/** badges 徽章容错还原（D-9，序列化键 badgeItems 防与 featured_topics.items 语义混淆） */
+function toBadgeItems(v: unknown): BadgeItem[] | undefined {
+    if (!Array.isArray(v)) return undefined;
+    const items: BadgeItem[] = [];
+    for (const raw of v as unknown[]) {
+        const obj = asObject(raw);
+        const label = typeof obj?.["label"] === "string" ? (obj["label"] as string).trim() : "";
+        const image = typeof obj?.["image"] === "string" ? (obj["image"] as string).trim() : "";
+        if (!label || !image) continue;
+        const item: BadgeItem = { label, image };
+        if (typeof obj?.["desc"] === "string" && (obj["desc"] as string).trim()) item.desc = (obj["desc"] as string).trim();
+        items.push(item);
    }
    return items.length ? items : undefined;
 }
@@ -174,6 +280,24 @@ function normalizeBlock(obj: Record<string, unknown>, type: BlockType): LayoutBl
        if (typeof obj["url"] === "string") block.url = obj["url"];
        if (typeof obj["level"] === "string") block.level = obj["level"];
    }
+    // ===== docs/20 D =====
+    if (typeof obj["layout"] === "string") block.layout = obj["layout"];
+    if (typeof obj["cover"] === "string") block.cover = obj["cover"];
+    if (typeof obj["categoryId"] === "number" && Number.isFinite(obj["categoryId"]) && (obj["categoryId"] as number) > 0) {
+        block.categoryId = obj["categoryId"] as number;
+    }
+    if (type === "stats_band") {
+        const stats = toStatItems(obj["stats"]);
+        if (stats) block.stats = stats;
+    }
+    if (type === "featured_topics") {
+        const items = toTopicItems(obj["items"]);
+        if (items) block.topicItems = items;
+    }
+    if (type === "badges") {
+        const items = toBadgeItems(obj["badgeItems"]);
+        if (items) block.badgeItems = items;
+    }
    const ids = toIdList(obj["categoryIds"]);
    if (ids) block.categoryIds = ids;
    return block;
@@ -217,16 +341,25 @@ export function cleanBlock(block: LayoutBlock): Record<string, unknown> {
        if (subtitle) {
            out["subtitle"] = subtitle;
        }
+        if (block.layout === "masonry") {
+            out["layout"] = "masonry";
+        }
    } else if (block.type === "links") {
        const group = (block.group || "").trim();
        if (group) {
            out["group"] = group;
        }
    } else if (block.type === "quick_links") {
-        // 编辑期允许存在未填写的空行，提交前整行剔除（后端要求 name/url 齐备）
+        // 编辑期允许存在未填写的空行，提交前整行剔除（后端要求 name/url 齐备）；icon 可选随行
        const items = (block.items || [])
-            .map(i => ({ name: (i.name || "").trim(), url: (i.url || "").trim() }))
-            .filter(i => i.name || i.url);
+            .map(i => {
+                const row: Record<string, string> = { name: (i.name || "").trim(), url: (i.url || "").trim() };
+                if (i.icon && ICON_KEY_PATTERN.test(i.icon)) {
+                    row["icon"] = i.icon;
+                }
+                return row;
+            })
+            .filter(i => i["name"] || i["url"]);
        if (items.length) {
            out["items"] = items;
        }
@@ -242,6 +375,30 @@ export function cleanBlock(block: LayoutBlock): Record<string, unknown> {
        if (block.level === "warn") {
            out["level"] = "warn";
        }
+    } else if (block.type === "stats_band") {
+        const stats = (block.stats || []).filter(st => st.label.trim() && st.value.trim());
+        if (stats.length) {
+            out["stats"] = stats;
+        }
+    } else if (block.type === "featured_topics") {
+        const items = (block.topicItems || []).filter(t => t.title.trim() && t.image.trim());
+        if (items.length) {
+            out["items"] = items;
+        }
+    } else if (block.type === "video_tour") {
+        const cover = (block.cover || "").trim();
+        const url = (block.url || "").trim();
+        if (cover) out["cover"] = cover;
+        if (url) out["url"] = url;
+    } else if (block.type === "people") {
+        if (block.categoryId) {
+            out["categoryId"] = block.categoryId;
+        }
+    } else if (block.type === "badges") {
+        const items = (block.badgeItems || []).filter(b => b.label.trim() && b.image.trim());
+        if (items.length) {
+            out["badgeItems"] = items;
+        }
    }
    return out;
 }
@@ -334,6 +491,109 @@ export function validateHomeLayout(layout: HomeLayout | null): string[] {
                errors.push(`${no}：提示级别只能是 info 或 warn`);
            }
        }
+        // ===== docs/20 D 组件校验（与后端 SiteService 同语义） =====
+        if (b.type === "gallery" && b.layout != null && !GALLERY_LAYOUTS.includes(b.layout)) {
+            errors.push(`${no}：画廊布局只能是 grid 或 masonry`);
+        }
+        if (b.type === "stats_band") {
+            const stats = b.stats || [];
+            if (!stats.length) {
+                errors.push(`${no}：请至少填写 1 个统计项`);
+            } else if (stats.length > STATS_MAX) {
+                errors.push(`${no}：统计项不能超过 ${STATS_MAX} 个`);
+            }
+            stats.forEach(st => {
+                const label = (st.label || "").trim();
+                const value = (st.value || "").trim();
+                if (!label) {
+                    errors.push(`${no}：统计项名称不能为空`);
+                } else if (label.length > 20) {
+                    errors.push(`${no}：统计项名称不能超过 20 字`);
+                }
+                if (!value) {
+                    errors.push(`${no}：统计项数值不能为空`);
+                } else if (value.length > 10) {
+                    errors.push(`${no}：统计项数值不能超过 10 字`);
+                }
+                if ((st.unit || "").length > 10) {
+                    errors.push(`${no}：统计项单位不能超过 10 字`);
+                }
+                if (st.icon && !ICON_KEY_PATTERN.test(st.icon)) {
+                    errors.push(`${no}：统计项图标标识不合法`);
+                }
+            });
+        }
+        if (b.type === "featured_topics") {
+            const items = b.topicItems || [];
+            if (!items.length) {
+                errors.push(`${no}：请至少填写 1 张专题卡`);
+            } else if (items.length > TOPICS_MAX) {
+                errors.push(`${no}：专题卡不能超过 ${TOPICS_MAX} 张`);
+            }
+            items.forEach(t => {
+                const title = (t.title || "").trim();
+                const image = (t.image || "").trim();
+                if (!title) {
+                    errors.push(`${no}：专题卡标题不能为空`);
+                } else if (title.length > 50) {
+                    errors.push(`${no}：专题卡标题不能超过 50 字`);
+                }
+                if ((t.description || "").length > 200) {
+                    errors.push(`${no}：专题卡描述不能超过 200 字`);
+                }
+                if (!image) {
+                    errors.push(`${no}：专题卡必须上传图片`);
+                } else if (!ASSET_URL_PATTERN.test(image)) {
+                    errors.push(`${no}：专题卡图片须为上传路径（/ 开头）或 http(s) 地址`);
+                }
+                if ((t.ctaText || "").length > 20) {
+                    errors.push(`${no}：按钮文字不能超过 20 字`);
+                }
+                const ctaUrl = (t.ctaUrl || "").trim();
+                if (ctaUrl && !LINK_URL_PATTERN.test(ctaUrl)) {
+                    errors.push(`${no}：按钮地址须为 http(s):// 开头或站内路径（/ 开头）`);
+                }
+            });
+        }
+        if (b.type === "video_tour") {
+            const cover = (b.cover || "").trim();
+            const url = (b.url || "").trim();
+            if (!cover) {
+                errors.push(`${no}：请上传视频封面图`);
+            } else if (!ASSET_URL_PATTERN.test(cover)) {
+                errors.push(`${no}：封面图须为上传路径（/ 开头）或 http(s) 地址`);
+            }
+            if (!url) {
+                errors.push(`${no}：请填写视频/VR 页面地址`);
+            } else if (!LINK_URL_PATTERN.test(url)) {
+                errors.push(`${no}：视频地址须为 http(s):// 开头或站内路径（/ 开头）`);
+            }
+        }
+        if (b.type === "badges") {
+            const items = b.badgeItems || [];
+            if (!items.length) {
+                errors.push(`${no}：请至少填写 1 个徽章`);
+            } else if (items.length > BADGES_MAX) {
+                errors.push(`${no}：徽章不能超过 ${BADGES_MAX} 个`);
+            }
+            items.forEach(bd => {
+                const label = (bd.label || "").trim();
+                const image = (bd.image || "").trim();
+                if (!label) {
+                    errors.push(`${no}：徽章名称不能为空`);
+                } else if (label.length > 20) {
+                    errors.push(`${no}：徽章名称不能超过 20 字`);
+                }
+                if ((bd.desc || "").length > 50) {
+                    errors.push(`${no}：徽章说明不能超过 50 字`);
+                }
+                if (!image) {
+                    errors.push(`${no}：徽章必须上传图片`);
+                } else if (!ASSET_URL_PATTERN.test(image)) {
+                    errors.push(`${no}：徽章图片须为上传路径（/ 开头）或 http(s) 地址`);
+                }
+            });
+        }
    });
    return errors;
 }
@@ -0,0 +1,41 @@
+/**
+ * D-2（docs/20）内置通用 SVG 图标集（管理端选择器用）。
+ * 与门户骨架 themes/common/fragments/home-blocks.html :: icon(name) 同 key 同 path——
+ * 两端各持一份（Thymeleaf fragment / Vue 组件无法共享渲染层），改图标须两侧同步。
+ * 24x24 线条风格：stroke=currentColor，fill=none。
+ */
+export interface IconDef {
+    key: string;
+    label: string;
+    /** path d 列表（含 circle 用 path 近似或直接多 path） */
+    paths: string[];
+}
+
+export const ICON_DEFS: IconDef[] = [
+    { key: "zhaosheng", label: "招生", paths: ["M3 9.5 12 4.5 21 9.5 12 14.5 3 9.5z", "M7 12v4.5c0 1 2.2 2 5 2s5-1 5-2V12", "M21 9.5V15"] },
+    { key: "jiuye", label: "就业", paths: ["M3.5 8h17a1.5 1.5 0 0 1 1.5 1.5v8.5a2 2 0 0 1-2 2H4a.5.5 0 0 1-.5-.5z", "M9 8V6.2C9 5.5 9.6 5 10.3 5h3.4c.7 0 1.3.5 1.3 1.2V8", "M3.5 12.5h17"] },
+    { key: "tushuguan", label: "图书馆", paths: ["M4 19.5 4.9 6.5 11 5v15", "M11 20h9V8l-7.9-1.5", "M4 19.5h7", "M14.5 11.5h3M14.5 15h3"] },
+    { key: "banshi", label: "办事大厅", paths: ["M4 5.5h16v10H9.5L5 19.2V15.5H4z"] },
+    { key: "xinxi", label: "信息公开", paths: ["M2.5 12C5 7.5 8.3 5.5 12 5.5S19 7.5 21.5 12C19 16.5 15.7 18.5 12 18.5S5 16.5 2.5 12z", "M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"] },
+    { key: "xiaoyou", label: "校友", paths: ["M6 8.5a3 3 0 1 0 6 0 3 3 0 0 0-6 0z", "M3.5 19c0-3 2.5-5 5.5-5s5.5 2 5.5 5", "M14.8 9.5a2.2 2.2 0 1 0 4.4 0 2.2 2.2 0 0 0-4.4 0z", "M16 14.2c2.6.3 4.5 2.1 4.5 4.8"] },
+    { key: "youjian", label: "邮箱", paths: ["M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z", "m3.5 7 8.5 6 8.5-6"] },
+    { key: "dianhua", label: "电话", paths: ["M5 4h3.5l1.7 4.3-2.3 1.8a12.5 12.5 0 0 0 5.9 5.9l1.8-2.3L20 15.4V19a1.5 1.5 0 0 1-1.6 1.5C10 20 4 14 3.5 5.6A1.5 1.5 0 0 1 5 4z"] },
+    { key: "ditu", label: "地图/定位", paths: ["M12 21.5c4.2-5 6.8-8 6.8-11.5a6.8 6.8 0 1 0-13.6 0c0 3.5 2.6 6.5 6.8 11.5z", "M9.6 9.7a2.4 2.4 0 1 0 4.8 0 2.4 2.4 0 0 0-4.8 0z"] },
+    { key: "xinwen", label: "新闻", paths: ["M4.5 5h15a1.5 1.5 0 0 1 1.5 1.5v11A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5v-11A1.5 1.5 0 0 1 4.5 5z", "M6.5 9h6M6.5 12.5h6M6.5 16h6", "M15.5 9h3v7.5h-3z"] },
+    { key: "rili", label: "日历", paths: ["M5.5 5h13a2 2 0 0 1 2 2v11.5a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z", "M3.5 10h17", "M8 3v4M16 3v4"] },
+    { key: "shipin", label: "视频", paths: ["M3.5 12a8.5 8.5 0 1 0 17 0 8.5 8.5 0 0 0-17 0z", "M10 8.5 16 12l-6 3.5z"] },
+    { key: "weixin", label: "微信", paths: ["M9.5 5.5C6 5.5 3 7.8 3 10.7c0 1.6.9 3 2.3 4L5 17l2.6-1.3c.6.2 1.3.3 1.9.3", "M21.5 14.8c0-2.4-2.3-4.3-5.1-4.3s-5.1 1.9-5.1 4.3 2.3 4.3 5.1 4.3c.6 0 1.2-.1 1.7-.3L20.5 20l-.5-1.7c.9-.8 1.5-2.1 1.5-3.5z"] },
+    { key: "weibo", label: "微博", paths: ["M10.5 19.5c-3.5 0-6.5-2-6.5-4.7 0-2.9 3.3-5.6 6.8-5.6 3 0 6.5 1.6 6.5 4.2 0 2.3-1.9 4.3-4.4 4.3-1.8 0-3.6-.8-3.6-2 0-.8.7-1.5 1.7-1.5.9 0 1.5.5 1.5 1.1 0 .4-.3.7-.7.8", "M15.5 4.5c2.9 0 5 1.8 5.2 4.3", "M15.8 7.2c1.5 0 2.7.9 2.8 2.3"] },
+    { key: "douyin", label: "抖音", paths: ["M5 17.5a3 3 0 1 0 6 0 3 3 0 0 0-6 0z", "M11 17.5V4.5l7 2v3.2l-4.6-1.3"] },
+    { key: "bilibili", label: "B站", paths: ["M6 6.5h12a3 3 0 0 1 3 3v6.5a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-6.5a3 3 0 0 1 3-3z", "M7 4l2.2 2.4M17 4l-2.2 2.4", "M9.2 10.5v4M14.8 10.5v4"] },
+    { key: "lianjie", label: "链接", paths: ["m9.5 14.5 5-5", "m8 12-3 3a4 4 0 0 0 5.7 5.7l3-3", "m16 12 3-3a4 4 0 0 0-5.7-5.7l-3 3"] },
+    { key: "dangan", label: "档案", paths: ["M6 3.5h8.5L18 7v13.5H6z", "M14 3.5V7h4", "M9 11h6M9 14.5h6M9 18h3.5"] },
+    { key: "xiaoli", label: "校历/校史", paths: ["M4 21V10l8-6.2L20 10v11", "M10 21v-6h4v6", "M4 21h16", "M9.5 10.5h5"] },
+    { key: "tiyu", label: "体育", paths: ["M8 4.5h8v5a4 4 0 0 1-8 0z", "M8 5.5H5v1.6A3.4 3.4 0 0 0 8.4 10M16 5.5h3v1.6A3.4 3.4 0 0 1 15.6 10", "M12 13.5v3M8.5 20h7M9.8 20c0-1.7.9-3.5 2.2-3.5s2.2 1.8 2.2 3.5"] },
+    { key: "yishu", label: "艺术", paths: ["M12 3a9 9 0 0 0 0 18c1.4 0 2-.8 2-1.7 0-1.5-1.6-1.9-1.6-3.1 0-1 .8-1.7 2-1.7h1.8A4.8 4.8 0 0 0 21 9.7C21 5.9 17 3 12 3z", "M6.9 10.5a.9.9 0 1 0 1.8 0 .9.9 0 0 0-1.8 0z", "M11.1 7.6a.9.9 0 1 0 1.8 0 .9.9 0 0 0-1.8 0z", "M15.3 10a.9.9 0 1 0 1.8 0 .9.9 0 0 0-1.8 0z"] },
+    { key: "shiyan", label: "实验", paths: ["M10 3.5h4M11 3.5v6l-4.6 8.2A2 2 0 0 0 8.2 20.5h7.6a2 2 0 0 0 1.8-2.8L13 9.5v-6", "M8.5 14.5h7"] },
+];
+
+export function iconLabelOf(key: string | undefined | null): string {
+    return ICON_DEFS.find(i => i.key === key)?.label || "";
+}
Author	SHA1	Message	Date
ops	b9719009b3	fix(ci): 构建容器名唯一化 + npm 走国内镜像源（避免并发互踩 exit 137）	2026-10-21 06:24:32 +00:00
ops	02bb3ac96a	ci: apk 源统一走 aliyun（规避 dl-cdn 时段性被拦卡 60s）	2026-10-21 01:37:04 +00:00
chenxing	fe75784d13	[CMS-REWORK] #4 保存恒被拦(模板实参ref被解包致validate恒false): refs改脚本侧取用+validate返回首错精确文案 build / build (push) Successful in 2m40s Details	2026-09-29 11:03:47 +08:00
chenxing	01d91ddd4b	[CMS-REWORK] #3 区块序列右上角序号徽标(含隐藏不重排,与校验报错第N个对齐)	2026-09-29 10:54:39 +08:00
chenxing	39dfc645ff	[CMS-REWORK] #2 Tab假脏: seeding窗口覆盖异步flush的watcher + 子组件emitUp no-op守卫	2026-09-29 10:53:03 +08:00
chenxing	4208f8ca89	[CMS-REWORK] #1 首页布局编辑器数据栏目为空: 栏目树加载与首用自动编排解耦(挂载+siteId watch双通道幂等加载)	2026-09-29 10:49:49 +08:00
chenxing	cff4325947	[CMS-VISUAL] 站点管理改版: 表格→站点工作台（主站宽卡+院系子站卡片网格）+ 页头承载站点身份 + v3.1 视觉修订（182 测试绿） build / build (push) Successful in 2m20s Details - SiteManage.vue: 8 列表格改为站点工作台，按 schId 分组「主站宽卡 + 院系子站网格」，保留卡片⇄表格视图切换与搜索过滤；scope=all 全局视图支持多校分组，搜索时主站卡始终保留（层级锚点） - 新增 views/cms/components/SiteCard.vue、SiteMainCard.vue - 删除 components/SiteContextCard.vue: 站点身份改由页头「学校名.站点名」承担（SchoolLayout），侧栏不再铺第二份站点列表，切站入口从 3 处收敛到 2 处（面包屑 + 站点工作台） - v3.1 视觉修订: 色带语义统一为「当前站」（全页同时只有一张卡带选中态，不再一页两处蓝）；删除面包屑 band-sub 橙色接缝条（身份已收回页头）；返回按钮 ios-undo 18×18 → ios-arrow-back 26×26 可点方块；删除 SiteManage .zone-tip 设计说明文字（误当 UI 渲染） - 测试: siteLayer.spec.ts 站点卡 4 用例重写为页头反向/正向断言，siteManage.spec.ts 补卡片视图断言；182 用例绿 - 方案: docs/22-站点管理修订方案.md（含 §9 v3.1 视觉修订与像素对照表）	2026-09-28 18:32:13 +08:00
chenxing	b6b022e4ca	[CMS-VISUAL] E 前端配套: 编辑下架主题站点时按别名表呈现归一主题（与后端 DEPRECATED_ALIASES 同构，不误报未注册，181 测试绿） build / build (push) Successful in 2m20s Details	2026-09-28 15:04:02 +08:00
chenxing	6334b24d34	[CMS-VISUAL] F5: 页脚结构示意图（六处位置标注+实时回显）+ favicon 1:1/二维码 4:3 占位框与比例预览（180 测试绿）	2026-09-28 14:59:05 +08:00
chenxing	49678a6568	[CMS-VISUAL] D1-D10: 组件库全量——布局模型扩 6 新类型（stats_band/featured_topics/video_tour/events/people/badges）+ 编辑器新属性面板（统计项/专题卡/徽章数组编辑器、图标选择器）+ gallery 瀑布流 + banner 4 Tab（topic/event 位）+ 人物管理 CRUD 页 + 全类型英文副题（176 测试绿）	2026-09-28 13:48:51 +08:00
chenxing	1a913490ef	[CMS-VISUAL] F2: 布局编辑器三栏化——中间 iframe 实时预览（500ms debounce 注入+手动刷新兜底+三档视口）、类型卡 SVG 缩略图（R-40）、展示形态 RadioCard、首用自动编排、序列高度示意（171 测试绿）	2026-09-28 12:52:57 +08:00
chenxing	af451703e7	[CMS-VISUAL] F1: 站点设置 Tab 化（7 Tab 独立表单/dirty/保存，增量合并互不连带）+ 新建渐进式向导（两步后全开放，无灰态）+ 自定义样式独立 Tab + 页脚/基础展示字段视觉位置说明（165 测试绿）	2026-09-28 12:39:21 +08:00
chenxing	010fb39e85	[CMS-VISUAL] F4: Banner 管理改「首页轮播/线上展厅」双 Tab，各 Tab 独立新增/尺寸提示，弹窗归属锚定打开时 Tab	2026-09-28 12:33:39 +08:00
chenxing	3a0f1e0cc9	[CMS-VISUAL] F6: 站点设置「扩展参数」分区退役（7→6 分区），未知配置键改静默保留不丢失（vitest 164 绿）	2026-09-28 12:33:23 +08:00
chenxing	649a08629b	[CMS-VISUAL] F3: 栏目管理移除「首页展示形态」下拉，形态统一归首页布局编辑器配置	2026-09-28 12:32:58 +08:00
chenxing	31cbec152a	feat(category): S9 内容管理 IA 切分——栏目页降级为内容概览 + 首页形态误导文案修正 build / build (push) Successful in 2m20s Details - 新建 components/category/CategoryContentSummary.vue(194)：列表型栏目右侧不再挂文章表格，改「共 N 篇 + 最近 5 行 + 查看全部」概览；计数口径=直属+子孙（与门户 collectListDescendantIds 同语义）、全状态计入，一次 page 请求同时拿 total 与 5 行（零新接口、零后端改动） - CategoryManage.vue 列表分支换组件 + 头注更新；编辑弹窗「首页展示形态」提示改为「展示形态由当前皮肤包的主题化实现决定，未实现的形态回落通用骨架渲染」（v2 §七验收第 8 条点名项） - ArticleListPanel.vue +7：setup 读 route.query.categoryId 作为初始筛选（深链回显） - types/cms.ts 1 行：ArticlePageQuery.categoryIds 放宽为 number\|string（逗号串），手册未点名、已在 audit-D §六披露为偏差 - categoryWorkbench.spec.ts 15→17 例：T-D-01 按裁决改写旧断言（概览而非表格，并机器证明无操作列）、 T-D-02 深链回显、T-D-03 查看全部跳转；夹具上提 + beforeEach 复位，默认值与旧硬编码行为逐字一致 - 未动 router/routes.ts 的 meta.subOf（护栏 siteRouter.spec 8 / siteLayer.spec 16 绿） - 遗留立案：R-43 fixedCategory/extraHeight 无生产调用方（按纪律未删）/ R-44 概览含子孙而深链只筛直属需产品定口径 / R-45 菜单名来自平台模块表 / R-46 ?categoryId 仅读一次 - 前端 166/166 绿 + build:base exit=0；S10 复跑同绿	2026-09-22 21:55:23 +08:00
chenxing	5d048abdae	feat(site-layer): S8 站点上下文卡 + 子站身份染色（方案 A，零后端改动） - 新建 components/SiteContextCard.vue(194)：数据源 store.schoolSites（含 SiteVo.theme），展示学校›站点层级与当前站皮肤包名；切站沿用既有纯 URL 通道 adminPathOf，不新增状态机 - SchoolLayout.vue 挂载卡片到原空 .menu-top-box 槽 + 子站态身份染色（侧栏淡底 #fff7ec、卡区顶 3px 橙条、页头胶囊转橙）；主站态不染色 - 硬约束：未动 utils/sitePath.ts 的 stripSiteSeg/withSiteSeg（剥段高亮全靠它）、未动 router/routes.ts - siteLayer.spec.ts +4 例（纯加，SITES 夹具补 theme 字段）；护栏 siteRouter.spec(8)/sitePath.spec(14)/ menuRoute.spec(5) 原样绿 - 遗留立案：R-39 isAlone 档不可见 / R-40 门户地址未展示 / R-41 面包屑是否退役 SiteSwitcher 待裁决 / R-42 显示包 code 而非中文名 - 前端 164/164 绿 + build:base exit=0	2026-09-22 21:54:58 +08:00