From fc566eed8b013024fbbdbf3d6208c64ac516698c Mon Sep 17 00:00:00 2001
From: chenxing <chenxing@bestsch.com>
Date: Mon, 7 Sep 2026 20:30:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(B5):=20=E6=A0=8F=E7=9B=AE=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E5=8F=B0-=E6=A0=91+=E7=B1=BB=E5=9E=8B=E5=8C=96?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E9=9D=A2=E6=9D=BF,ArticleList=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=8C=96=E8=96=84=E5=A3=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新建 ArticleListPanel(props categoryId/fixedCategory):无props=全局检索行为不变(薄壳红线);
  固定栏目模式隐藏栏目下拉,watch categoryId 联动 reload(拖拽排序不触发,红线)
- CategoryManage 右侧:列表型=本栏目文章面板+新建文章(query.categoryId 预选)+预览;
  单页型=摘要+编辑内容+预览;外链型=URL+打开链接;空态引导;工具栏增树折叠(窄屏)
- ArticleEdit 支持 query.categoryId 新建态预选栏目
- 后端零改动(红线);vitest 32/32 绿(新增 categoryWorkbench.spec 7 例,手写挂载+vi.mock 桩)
---
 src/__tests__/categoryWorkbench.spec.ts     | 209 ++++++++++++++
 src/components/article/ArticleListPanel.vue | 293 ++++++++++++++++++++
 src/views/cms/ArticleEdit.vue               |   9 +-
 src/views/cms/ArticleList.vue               | 266 +-----------------
 src/views/cms/CategoryManage.vue            | 220 ++++++++++++++-
 5 files changed, 723 insertions(+), 274 deletions(-)
 create mode 100644 src/__tests__/categoryWorkbench.spec.ts
 create mode 100644 src/components/article/ArticleListPanel.vue

diff --git a/src/__tests__/categoryWorkbench.spec.ts b/src/__tests__/categoryWorkbench.spec.ts
new file mode 100644
index 0000000..4817a63
--- /dev/null
+++ b/src/__tests__/categoryWorkbench.spec.ts
@@ -0,0 +1,209 @@
+// @vitest-environment jsdom
+/**
+ * B5 栏目工作台组件行为（方案 P1-2）：
+ * ① 列表型栏目 → 右侧 ArticleListPanel 且 categoryId 正确传递；
+ * ② 切换树节点 → 面板 watch categoryId 联动 reload；
+ * ③ 单页型 → 摘要面板（含"编辑内容"入口）不渲染文章列表；
+ * ④ 外链型 → linkUrl + 打开链接；
+ * ⑤ 新建文章按钮 → 路由跳转带 categoryId query。
+ *
+ * 无 @vue/test-utils 依赖：createApp 手写挂载 + vi.mock 桩（树面板/排序弹窗/图标/确认框/api/router）。
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick, reactive } from "vue";
+import { createPinia } from "pinia";
+import ViewUIPlus from "view-ui-plus";
+
+const { pageMock, routerPush, openMock } = vi.hoisted(() => ({
+    pageMock: vi.fn(),
+    routerPush: vi.fn(),
+    openMock: vi.fn(),
+}));
+
+vi.mock("@/api/module/cms", () => ({
+    articleApi: {
+        page: (query: any) => {
+            pageMock(query);
+            return { send: () => Promise.resolve({ list: [], total: 0 }) };
+        },
+        publish: () => ({ send: () => Promise.resolve({}) }),
+        offline: () => ({ send: () => Promise.resolve({}) }),
+        topmost: () => ({ send: () => Promise.resolve({}) }),
+        delete: () => ({ send: () => Promise.resolve({}) }),
+    },
+    categoryApi: {
+        tree: () => ({ send: () => Promise.resolve([]) }),
+        save: () => ({ send: () => Promise.resolve({}) }),
+        delete: () => ({ send: () => Promise.resolve({}) }),
+    },
+    uploadUrl: () => "/api/attachment/upload",
+    portalBase: (code: string) => `/portal/${code}`,
+}));
+
+vi.mock("vue-router", () => ({
+    useRouter: () => ({ push: routerPush, replace: vi.fn() }),
+    useRoute: () => ({ params: {}, query: {} }),
+}));
+
+/** 树面板桩：把 emit 挂到全局，测试用它模拟"选中节点" */
+vi.mock("@/components/CategoryTreePanel.vue", () => ({
+    default: defineComponent({
+        props: ["curTreeNode", "treeApi", "defaultSearchVisible", "showCloseButton"],
+        emits: ["update:curTreeNode", "on-change", "on-tree-data"],
+        setup(_, { emit }) {
+            (globalThis as any).__treeEmit = (node: any) => {
+                emit("update:curTreeNode", node);
+                emit("on-change", node);
+            };
+            return () => h("div", { class: "tree-stub" }, "tree-stub");
+        },
+    }),
+}));
+
+vi.mock("@/components/CategorySortModal.vue", () => ({
+    default: defineComponent({ props: ["visible", "parentId", "parentName", "children"], emits: ["saved"], render: () => null }),
+}));
+
+vi.mock("@/components/SvgIcon.vue", () => ({
+    default: defineComponent({ props: ["name"], render: () => h("span", "icon") }),
+}));
+
+vi.mock("@/components/MyConfirm", () => ({ default: vi.fn() }));
+
+import ArticleListPanel from "@/components/article/ArticleListPanel.vue";
+import CategoryManage from "@/views/cms/CategoryManage.vue";
+import { useCmsStore } from "@/store";
+
+let cleanups: (() => void)[] = [];
+
+/** 挂载：真实 pinia（预置学校/站点上下文）+ 全局 view-ui-plus */
+function mountApp(root: Component) {
+    const pinia = createPinia();
+    const store = useCmsStore(pinia);
+    store.user = { superAdmin: true, sites: [] } as any;
+    store.currentSchool = { schId: 1, schName: "演示学校", mainSiteId: 1, mainSiteCode: "demo1", mainSiteName: "演示主站" } as any;
+    store.currentSite = { id: 1, code: "demo1", name: "演示站" } as any;
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    const app = createApp(root as any);
+    app.use(pinia);
+    app.use(ViewUIPlus);
+    app.mount(el);
+    cleanups.push(() => {
+        app.unmount();
+        el.remove();
+    });
+    return el;
+}
+
+async function flush(frames = 5) {
+    for (let i = 0; i < frames; i++) {
+        await nextTick();
+    }
+    await new Promise(r => setTimeout(r, 0));
+}
+
+beforeEach(() => {
+    vi.clearAllMocks();
+    (globalThis as any).__treeEmit = undefined;
+    window.open = openMock as any;
+});
+
+afterEach(() => {
+    cleanups.forEach(fn => fn());
+    cleanups = [];
+});
+
+describe("categoryWorkbench - ArticleListPanel（列表型右侧面板）", () => {
+    it("① 固定栏目模式：categoryId 正确传给查询且隐藏栏目下拉（仅剩状态筛选）", async () => {
+        const state = reactive({ cid: 5, fixed: true });
+        const host = defineComponent({
+            setup: () => () => h(ArticleListPanel, { categoryId: state.cid, fixedCategory: state.fixed }),
+        });
+        const el = mountApp(host);
+        await flush();
+
+        expect(pageMock).toHaveBeenCalled();
+        expect(pageMock.mock.calls[0][0]).toMatchObject({ siteId: 1, categoryId: 5 });
+        // 栏目下拉隐藏（剩余 .ivu-select 为状态筛选与分页 sizer，占位文本不含"全部栏目"）
+        expect(el.textContent).not.toContain("全部栏目");
+        expect([...el.querySelectorAll(".ivu-select-placeholder")].every(p => !p.textContent?.includes("全部栏目"))).toBe(true);
+    });
+
+    it("② 切换树节点：categoryId 变化触发面板 reload（watch 联动）", async () => {
+        const state = reactive({ cid: 5, fixed: true });
+        const host = defineComponent({
+            setup: () => () => h(ArticleListPanel, { categoryId: state.cid, fixedCategory: state.fixed }),
+        });
+        mountApp(host);
+        await flush();
+        expect(pageMock).toHaveBeenCalledTimes(1);
+
+        state.cid = 7;
+        await flush();
+
+        expect(pageMock).toHaveBeenCalledTimes(2);
+        expect(pageMock.mock.calls[1][0]).toMatchObject({ categoryId: 7 });
+    });
+
+    it("⑤ 面板新建文章：路由跳转带 categoryId query", async () => {
+        const state = reactive({ cid: 5, fixed: true });
+        const host = defineComponent({
+            setup: () => () => h(ArticleListPanel, { categoryId: state.cid, fixedCategory: state.fixed }),
+        });
+        const el = mountApp(host);
+        await flush();
+
+        const btn = [...el.querySelectorAll("button")].find(b => b.textContent?.includes("新建文章"));
+        expect(btn).toBeTruthy();
+        btn!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        await flush();
+
+        expect(routerPush).toHaveBeenCalledWith("/sch/demo1/article/edit?categoryId=5");
+    });
+});
+
+describe("categoryWorkbench - CategoryManage 右侧类型化面板", () => {
+    it("③ 单页型栏目：显示摘要面板（含编辑内容入口），不渲染文章列表", async () => {
+        const el = mountApp(defineComponent({ render: () => h(CategoryManage) }));
+        await flush();
+        (globalThis as any).__treeEmit({ id: 2, parentId: 0, name: "学校简介", type: 2, content: "<p>云海第一中学始建于 1958 年。</p>", sortNo: 0, status: 1 });
+        await flush();
+
+        expect(el.textContent).toContain("学校简介");
+        expect(el.textContent).toContain("云海第一中学始建于 1958 年");
+        expect(el.textContent).toContain("编辑内容");
+        expect(el.querySelector(".article-list-panel")).toBeNull();
+    });
+
+    it("④ 外链型栏目：显示 linkUrl 与「打开链接」，点击新窗口打开", async () => {
+        const el = mountApp(defineComponent({ render: () => h(CategoryManage) }));
+        await flush();
+        (globalThis as any).__treeEmit({ id: 3, parentId: 0, name: "教育部链接", type: 3, linkUrl: "https://www.moe.gov.cn", sortNo: 0, status: 1 });
+        await flush();
+
+        expect(el.textContent).toContain("https://www.moe.gov.cn");
+        const openBtn = [...el.querySelectorAll("button, a")].find(b => b.textContent?.includes("打开链接"));
+        expect(openBtn).toBeTruthy();
+        openBtn!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        await flush();
+        expect(openMock).toHaveBeenCalledWith("https://www.moe.gov.cn", "_blank");
+    });
+
+    it("列表型栏目：右侧渲染 ArticleListPanel（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({ categoryId: 5 });
+    });
+
+    it("未选中节点：右侧显示空态引导", async () => {
+        const el = mountApp(defineComponent({ render: () => h(CategoryManage) }));
+        await flush();
+        expect(el.textContent).toContain("选择左侧栏目");
+    });
+});
diff --git a/src/components/article/ArticleListPanel.vue b/src/components/article/ArticleListPanel.vue
new file mode 100644
index 0000000..2c2b849
--- /dev/null
+++ b/src/components/article/ArticleListPanel.vue
@@ -0,0 +1,293 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, watch } from "vue";
+import { useRouter } from "vue-router";
+import { Message, Tag } from "view-ui-plus";
+import Utils from "@/utils/index";
+import MyConfirm from "@/components/MyConfirm";
+import { articleApi, categoryApi } from "@/api/module/cms";
+import { useCmsStore } from "@/store";
+import { ArticlePageItem, CategoryTreeNode } from "@/types/cms";
+
+/**
+ * 文章列表面板（B5 栏目工作台组件化，自 ArticleList.vue 原样抽出）：
+ * - 无 props = 全局检索行为（ArticleList.vue 薄壳引用，路由/搜索参数兼容）；
+ * - fixedCategory + categoryId = 固定栏目模式：隐藏栏目下拉、查询强制带 categoryId，
+ *   categoryId 变化 watch 联动 reload（树节点切换；拖拽排序不改变 id 不触发）。
+ */
+const props = defineProps<{
+    categoryId?: number;
+    fixedCategory?: boolean;
+}>();
+
+const router = useRouter();
+const store = useCmsStore();
+
+const rows = ref<ArticlePageItem[]>([]);
+const total = ref(0);
+const loading = ref(false);
+const pageNum = ref(1);
+const pageSize = ref(parseInt(localStorage.getItem("customPageCount") || "10"));
+
+const search = reactive({
+    categoryId: undefined as number | undefined,
+    status: undefined as number | undefined,
+    keyword: "",
+});
+
+/** 栏目下拉（树拍平缩进展示；固定栏目模式不加载不显示） */
+const categoryOptions = ref<{ id: number; label: string }[]>([]);
+
+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";
+
+const tableHeight = Utils.useTableHeight({ isSearch: true, isOperat: true, isPage: true });
+
+const columns = [
+    {
+        title: "标题",
+        key: "title",
+        minWidth: 260,
+        tooltip: true,
+        render: (h: any, p: any) =>
+            h("span", null, [
+                h(
+                    "a",
+                    {
+                        style: { color: "#2d8cf0", cursor: "pointer", marginRight: "6px" },
+                        onClick: () => goEdit(p.row.id),
+                    },
+                    p.row.title
+                ),
+                p.row.topmost === 1 ? h(Tag, { color: "error" }, () => "置顶") : null,
+            ]),
+    },
+    { title: "栏目", key: "categoryName", width: 140, tooltip: true },
+    {
+        title: "状态",
+        key: "status",
+        width: 100,
+        align: "center",
+        render: (h: any, p: any) =>
+            h(Tag, { color: statusColor(p.row.status) }, () => statusText(p.row.status)),
+    },
+    {
+        title: "发布时间",
+        key: "publishTime",
+        width: 170,
+        render: (h: any, p: any) => h("span", p.row.publishTime || "-"),
+    },
+    { title: "浏览量", key: "viewCount", width: 90, align: "center" },
+    { title: "创建时间", key: "createTime", width: 170 },
+    {
+        title: "操作",
+        key: "action",
+        width: 190,
+        fixed: "right",
+        align: "center",
+        render: (h: any, p: any) => {
+            const ops: any[] = [
+                Utils.operatingHandle(h, "编辑", "icon-edit", () => goEdit(p.row.id)),
+            ];
+            if (p.row.status !== 1) {
+                ops.push(Utils.operatingHandle(h, "发布", "icon-apps", () => doPublish(p.row)));
+            }
+            if (p.row.status === 1) {
+                ops.push(Utils.operatingHandle(h, "下架", "icon-stop", () => doOffline(p.row)));
+            }
+            ops.push(
+                Utils.operatingHandle(
+                    h,
+                    p.row.topmost === 1 ? "取消置顶" : "置顶",
+                    "icon-saoba",
+                    () => doTopmost(p.row)
+                ),
+                Utils.operatingHandle(h, "删除", "icon-ashbin", () => doDelete(p.row))
+            );
+            return ops;
+        },
+    },
+];
+
+function flattenCategories(tree: CategoryTreeNode[], depth = 0) {
+    const list: { id: number; label: string }[] = [];
+    tree.forEach(node => {
+        list.push({ id: node.id!, label: `${"　".repeat(depth)}${node.name}` });
+        if (node.children?.length) {
+            list.push(...flattenCategories(node.children, depth + 1));
+        }
+    });
+    return list;
+}
+
+async function loadCategories() {
+    if (!store.siteId || props.fixedCategory) return;
+    const tree = await categoryApi.tree(store.siteId).send();
+    categoryOptions.value = flattenCategories(tree || []);
+}
+
+async function run() {
+    if (!store.siteId) return;
+    loading.value = true;
+    try {
+        const page = await articleApi
+            .page({
+                siteId: store.siteId,
+                categoryId: props.fixedCategory ? props.categoryId : search.categoryId,
+                status: search.status,
+                keyword: search.keyword || undefined,
+                page: pageNum.value,
+                pageSize: pageSize.value,
+            })
+            .send();
+        rows.value = page?.list || [];
+        total.value = page?.total || 0;
+    } finally {
+        loading.value = false;
+    }
+}
+
+function pageSizeUpdate(size: number) {
+    pageSize.value = size;
+    localStorage.setItem("customPageCount", String(size));
+    pageNum.value = 1;
+    run();
+}
+
+/** 固定栏目模式下新建文章带 categoryId 预选（ArticleEdit onMounted 回填） */
+function goEdit(id?: number) {
+    const code = store.schoolCode;
+    if (!code) {
+        router.push("/workbench");
+        return;
+    }
+    const query = props.fixedCategory && props.categoryId ? `?categoryId=${props.categoryId}` : "";
+    router.push(id ? `/sch/${code}/article/edit/${id}${query}` : `/sch/${code}/article/edit${query}`);
+}
+
+async function doPublish(row: ArticlePageItem) {
+    await articleApi.publish(store.siteId!, row.id).send();
+    Message.success("发布成功！");
+    run();
+}
+
+async function doOffline(row: ArticlePageItem) {
+    await articleApi.offline(store.siteId!, row.id).send();
+    Message.success("已下架");
+    run();
+}
+
+async function doTopmost(row: ArticlePageItem) {
+    await articleApi.topmost(store.siteId!, row.id, row.topmost !== 1).send();
+    Message.success(row.topmost === 1 ? "已取消置顶" : "已置顶");
+    run();
+}
+
+function doDelete(row: ArticlePageItem) {
+    MyConfirm({
+        title: "删除文章",
+        msg: `确定删除「${row.title}」吗？`,
+        info: "删除后正文图片将转为未使用附件，可在附件管理中清理",
+        async onOk() {
+            await articleApi.delete({ id: row.id, siteId: store.siteId! }).send();
+            Message.success("操作成功！");
+            if (rows.value.length <= 1 && pageNum.value > 1) pageNum.value -= 1;
+            run();
+        },
+    });
+}
+
+onMounted(async () => {
+    await loadCategories();
+    await run();
+});
+
+// 树节点切换联动（B5 红线：仅 watch categoryId，拖拽排序不经过此通道）
+watch(() => props.categoryId, async () => {
+    pageNum.value = 1;
+    await run();
+});
+
+// 站点/学校上下文切换即时重载（docs/09 §3.3，修复切换不刷新缺陷）
+watch(() => store.siteId, async () => {
+    await loadCategories();
+    pageNum.value = 1;
+    await run();
+});
+</script>
+
+<template>
+    <div class="article-list-panel">
+        <div class="fix mb-12">
+            <Button class="fl" type="primary" size="large" @click="goEdit()">
+                <Icon type="ios-add" />
+                新建文章
+            </Button>
+        </div>
+        <div class="search-wrap fix">
+            <Select
+                v-if="!fixedCategory"
+                v-model="search.categoryId"
+                class="search-wrap_sel"
+                clearable
+                placeholder="全部栏目"
+                @on-change="pageNum = 1; run()"
+            >
+                <Option v-for="opt in categoryOptions" :key="opt.id" :value="opt.id">
+                    {{ opt.label }}
+                </Option>
+            </Select>
+            <Select
+                v-model="search.status"
+                class="search-wrap_sel"
+                :class="{ 'ml-12': !fixedCategory }"
+                clearable
+                placeholder="全部状态"
+                @on-change="pageNum = 1; run()"
+            >
+                <Option v-for="s in statusDict" :key="s.value" :value="s.value">{{ s.label }}</Option>
+            </Select>
+            <Input
+                search
+                enter-button
+                class="fr"
+                placeholder="标题关键字"
+                style="width: 220px"
+                v-model="search.keyword"
+                @on-search="pageNum = 1; run()"
+                @on-clear="pageNum = 1; run()"
+            />
+        </div>
+        <Table
+            :columns="columns"
+            :data="rows"
+            :height="tableHeight"
+            :loading="loading"
+            no-data-text="暂无文章"
+        />
+        <div class="page-panel">
+            <Page
+                class="page-box fr"
+                :total="total"
+                :current="pageNum"
+                :page-size="pageSize"
+                :page-size-opts="[10, 20, 30, 40]"
+                @on-page-size-change="pageSizeUpdate"
+                @on-change="(p: number) => { pageNum = p; run(); }"
+                placement="top"
+                show-total
+                show-sizer
+            />
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.search-wrap .search-wrap_sel {
+    width: 180px;
+}
+</style>
diff --git a/src/views/cms/ArticleEdit.vue b/src/views/cms/ArticleEdit.vue
index f3e1a79..2beccd7 100644
--- a/src/views/cms/ArticleEdit.vue
+++ b/src/views/cms/ArticleEdit.vue
@@ -112,7 +112,14 @@ async function load() {
     if (!store.siteId) return;
     const tree = await categoryApi.tree(store.siteId).send();
     categoryOptions.value = flattenCategories(tree || []);
-    if (!editId.value) return;
+    if (!editId.value) {
+        // B5：栏目工作台「新建文章」带 categoryId 预选（仅新建态；编辑态以详情回填为准）
+        const preselect = route.query.categoryId ? parseInt(String(route.query.categoryId)) : undefined;
+        if (preselect && categoryOptions.value.some(o => o.id === preselect)) {
+            form.categoryId = preselect;
+        }
+        return;
+    }
     const detail = await articleApi.get(store.siteId, editId.value).send();
     if (!detail) return;
     Object.assign(form, {
diff --git a/src/views/cms/ArticleList.vue b/src/views/cms/ArticleList.vue
index 09d1e18..3a1148a 100644
--- a/src/views/cms/ArticleList.vue
+++ b/src/views/cms/ArticleList.vue
@@ -1,270 +1,16 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, watch } from "vue";
-import { useRouter } from "vue-router";
-import { Message, Tag } from "view-ui-plus";
-import Utils from "@/utils/index";
-import MyConfirm from "@/components/MyConfirm";
-import { articleApi, categoryApi } from "@/api/module/cms";
-import { useCmsStore } from "@/store";
-import { ArticlePageItem, CategoryTreeNode } from "@/types/cms";
+import ArticleListPanel from "@/components/article/ArticleListPanel.vue";
 
-const router = useRouter();
-const store = useCmsStore();
-
-const rows = ref<ArticlePageItem[]>([]);
-const total = ref(0);
-const loading = ref(false);
-const pageNum = ref(1);
-const pageSize = ref(parseInt(localStorage.getItem("customPageCount") || "10"));
-
-const search = reactive({
-    categoryId: undefined as number | undefined,
-    status: undefined as number | undefined,
-    keyword: "",
-});
-
-/** 栏目下拉（树拍平缩进展示） */
-const categoryOptions = ref<{ id: number; label: string }[]>([]);
-
-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";
-
-const tableHeight = Utils.useTableHeight({ isSearch: true, isOperat: true, isPage: true });
-
-const columns = [
-    {
-        title: "标题",
-        key: "title",
-        minWidth: 260,
-        tooltip: true,
-        render: (h: any, p: any) =>
-            h("span", null, [
-                h(
-                    "a",
-                    {
-                        style: { color: "#2d8cf0", cursor: "pointer", marginRight: "6px" },
-                        onClick: () => goEdit(p.row.id),
-                    },
-                    p.row.title
-                ),
-                p.row.topmost === 1 ? h(Tag, { color: "error" }, () => "置顶") : null,
-            ]),
-    },
-    { title: "栏目", key: "categoryName", width: 140, tooltip: true },
-    {
-        title: "状态",
-        key: "status",
-        width: 100,
-        align: "center",
-        render: (h: any, p: any) =>
-            h(Tag, { color: statusColor(p.row.status) }, () => statusText(p.row.status)),
-    },
-    {
-        title: "发布时间",
-        key: "publishTime",
-        width: 170,
-        render: (h: any, p: any) => h("span", p.row.publishTime || "-"),
-    },
-    { title: "浏览量", key: "viewCount", width: 90, align: "center" },
-    { title: "创建时间", key: "createTime", width: 170 },
-    {
-        title: "操作",
-        key: "action",
-        width: 190,
-        fixed: "right",
-        align: "center",
-        render: (h: any, p: any) => {
-            const ops: any[] = [
-                Utils.operatingHandle(h, "编辑", "icon-edit", () => goEdit(p.row.id)),
-            ];
-            if (p.row.status !== 1) {
-                ops.push(Utils.operatingHandle(h, "发布", "icon-apps", () => doPublish(p.row)));
-            }
-            if (p.row.status === 1) {
-                ops.push(Utils.operatingHandle(h, "下架", "icon-stop", () => doOffline(p.row)));
-            }
-            ops.push(
-                Utils.operatingHandle(
-                    h,
-                    p.row.topmost === 1 ? "取消置顶" : "置顶",
-                    "icon-saoba",
-                    () => doTopmost(p.row)
-                ),
-                Utils.operatingHandle(h, "删除", "icon-ashbin", () => doDelete(p.row))
-            );
-            return ops;
-        },
-    },
-];
-
-function flattenCategories(tree: CategoryTreeNode[], depth = 0) {
-    const list: { id: number; label: string }[] = [];
-    tree.forEach(node => {
-        list.push({ id: node.id!, label: `${"　".repeat(depth)}${node.name}` });
-        if (node.children?.length) {
-            list.push(...flattenCategories(node.children, depth + 1));
-        }
-    });
-    return list;
-}
-
-async function loadCategories() {
-    if (!store.siteId) return;
-    const tree = await categoryApi.tree(store.siteId).send();
-    categoryOptions.value = flattenCategories(tree || []);
-}
-
-async function run() {
-    if (!store.siteId) return;
-    loading.value = true;
-    try {
-        const page = await articleApi
-            .page({
-                siteId: store.siteId,
-                categoryId: search.categoryId,
-                status: search.status,
-                keyword: search.keyword || undefined,
-                page: pageNum.value,
-                pageSize: pageSize.value,
-            })
-            .send();
-        rows.value = page?.list || [];
-        total.value = page?.total || 0;
-    } finally {
-        loading.value = false;
-    }
-}
-
-function pageSizeUpdate(size: number) {
-    pageSize.value = size;
-    localStorage.setItem("customPageCount", String(size));
-    pageNum.value = 1;
-    run();
-}
-
-function goEdit(id?: number) {
-    const code = store.schoolCode;
-    router.push(code ? `/sch/${code}/article/edit${id ? `/${id}` : ""}` : "/workbench");
-}
-
-async function doPublish(row: ArticlePageItem) {
-    await articleApi.publish(store.siteId!, row.id).send();
-    Message.success("发布成功！");
-    run();
-}
-
-async function doOffline(row: ArticlePageItem) {
-    await articleApi.offline(store.siteId!, row.id).send();
-    Message.success("已下架");
-    run();
-}
-
-async function doTopmost(row: ArticlePageItem) {
-    await articleApi.topmost(store.siteId!, row.id, row.topmost !== 1).send();
-    Message.success(row.topmost === 1 ? "已取消置顶" : "已置顶");
-    run();
-}
-
-function doDelete(row: ArticlePageItem) {
-    MyConfirm({
-        title: "删除文章",
-        msg: `确定删除「${row.title}」吗？`,
-        info: "删除后正文图片将转为未使用附件，可在附件管理中清理",
-        async onOk() {
-            await articleApi.delete({ id: row.id, siteId: store.siteId! }).send();
-            Message.success("操作成功！");
-            if (rows.value.length <= 1 && pageNum.value > 1) pageNum.value -= 1;
-            run();
-        },
-    });
-}
-
-onMounted(async () => {
-    await loadCategories();
-    await run();
-});
-
-// 站点/学校上下文切换即时重载（docs/09 §3.3，修复切换不刷新缺陷）
-watch(() => store.siteId, async () => {
-    await loadCategories();
-    pageNum.value = 1;
-    await run();
-});
+/**
+ * 文章列表（全局检索页，B5 组件化后薄壳引用）：
+ * 无 props 透传 = 栏目下拉可筛 + 全站关键字检索，路由/搜索参数与组件化前完全一致。
+ */
 </script>
 
 <template>
     <div class="page-wrapper">
         <div class="main-container">
-            <div class="fix mb-12">
-                <Button class="fl" type="primary" size="large" @click="goEdit()">
-                    <Icon type="ios-add" />
-                    新建文章
-                </Button>
-            </div>
-            <div class="search-wrap fix">
-                <Select
-                    v-model="search.categoryId"
-                    class="search-wrap_sel"
-                    clearable
-                    placeholder="全部栏目"
-                    @on-change="pageNum = 1; run()"
-                >
-                    <Option v-for="opt in categoryOptions" :key="opt.id" :value="opt.id">
-                        {{ opt.label }}
-                    </Option>
-                </Select>
-                <Select
-                    v-model="search.status"
-                    class="search-wrap_sel ml-12"
-                    clearable
-                    placeholder="全部状态"
-                    @on-change="pageNum = 1; run()"
-                >
-                    <Option v-for="s in statusDict" :key="s.value" :value="s.value">{{ s.label }}</Option>
-                </Select>
-                <Input
-                    search
-                    enter-button
-                    class="fr"
-                    placeholder="标题关键字"
-                    style="width: 220px"
-                    v-model="search.keyword"
-                    @on-search="pageNum = 1; run()"
-                    @on-clear="pageNum = 1; run()"
-                />
-            </div>
-            <Table
-                :columns="columns"
-                :data="rows"
-                :height="tableHeight"
-                :loading="loading"
-                no-data-text="暂无文章"
-            />
-            <div class="page-panel">
-                <Page
-                    class="page-box fr"
-                    :total="total"
-                    :current="pageNum"
-                    :page-size="pageSize"
-                    :page-size-opts="[10, 20, 30, 40]"
-                    @on-page-size-change="pageSizeUpdate"
-                    @on-change="(p: number) => { pageNum = p; run(); }"
-                    placement="top"
-                    show-total
-                    show-sizer
-                />
-            </div>
+            <ArticleListPanel />
         </div>
     </div>
 </template>
-
-<style scoped lang="scss">
-.search-wrap .search-wrap_sel {
-    width: 180px;
-}
-</style>
diff --git a/src/views/cms/CategoryManage.vue b/src/views/cms/CategoryManage.vue
index 2e3eb13..380e527 100644
--- a/src/views/cms/CategoryManage.vue
+++ b/src/views/cms/CategoryManage.vue
@@ -5,13 +5,18 @@ import MyConfirm from "@/components/MyConfirm";
 import CategoryTreePanel from "@/components/CategoryTreePanel.vue";
 import CategorySortModal from "@/components/CategorySortModal.vue";
 import SvgIcon from "@/components/SvgIcon.vue";
+import ArticleListPanel from "@/components/article/ArticleListPanel.vue";
 import { categoryApi } from "@/api/module/cms";
 import { useCmsStore } from "@/store";
+import config from "@/assets/config/host.config";
 import { CategoryTreeNode } from "@/types/cms";
 
 /* UserBase group/index 同款交互：图标工具栏（新增/编辑/子组排序/删除/搜索）+ ztree */
 const store = useCmsStore();
 
+/** 树折叠（窄屏/专注内容时收起左树，右侧面板占满；不触碰 ztree 内部交互） */
+const treeCollapsed = ref(false);
+
 const refTreePanel = useTemplateRef("refTreePanel");
 const refFormData = useTemplateRef("refFormData");
 const refNodeNameInput = useTemplateRef("refNodeNameInput");
@@ -195,10 +200,38 @@ async function save() {
 function onSortSaved() {
     refTreePanel.value?.refreshTree(curTreeNode.value?.id);
 }
+
+/* ===== B5 栏目工作台：右侧类型化内容面板 ===== */
+
+/** 单页摘要：去 HTML 标签截断展示 */
+function summaryText(node: any): string {
+    const text = String(node?.content || "").replace(/<[^>]+>/g, "").trim();
+    return text.length > 200 ? text.slice(0, 200) + "…" : text || "（暂无内容，点击「编辑内容」补充）";
+}
+
+/** 新建文章：带 categoryId 预选跳编辑页（ArticleEdit onMounted 回填） */
+function goNewArticle(categoryId: number) {
+    window.location.hash = `#/sch/${store.schoolCode}/article/edit?categoryId=${categoryId}`;
+}
+
+/** 门户预览：新开 /portal/{siteCode}/c/{id} */
+function openPreview(node: any) {
+    const code = store.currentSite?.code || store.schoolCode;
+    if (!code) {
+        Message.warning("当前无站点上下文，无法预览");
+        return;
+    }
+    window.open(`${config.serviceHost}/portal/${code}/c/${node.id}`, "_blank");
+}
+
+/** 外链栏目直达 */
+function openLink(url: string) {
+    window.open(url, "_blank");
+}
 </script>
 
 <template>
-    <div class="tree-wrapper category-page">
+    <div class="tree-wrapper category-page" :class="{ 'tree-collapsed': treeCollapsed }">
         <!-- 左侧栏目树（userbase rule-tree 风格） -->
         <div class="tree-container category-tree-box">
             <ul class="opera-ul">
@@ -227,6 +260,11 @@ function onSortSaved() {
                         <Icon type="md-search" />
                     </li>
                 </Tooltip>
+                <Tooltip content="收起/展开栏目树" placement="top" transfer>
+                    <li @click="treeCollapsed = !treeCollapsed">
+                        <Icon :type="treeCollapsed ? 'ios-arrow-forward' : 'ios-arrow-back'" />
+                    </li>
+                </Tooltip>
             </ul>
 
             <CategoryTreePanel
@@ -240,18 +278,71 @@ function onSortSaved() {
             />
         </div>
 
-        <!-- 右侧：选中栏目详情 -->
-        <div class="main-container">
-            <div class="info-panel" v-if="selected">
-                <h3>{{ selected.name }}</h3>
-                <p>类型：{{ typeDict.find(t => t.value === selected!.type)?.label }}</p>
-                <p v-if="selected.type === 3">外链：{{ selected.linkUrl }}</p>
-                <p v-if="selected.type === 2">单页内容：见门户预览</p>
-                <p>排序号：{{ selected.sortNo }} · 状态：{{ selected.status === 1 ? "显示" : "隐藏" }}</p>
-                <p v-if="selected.seoTitle">SEO 标题：{{ selected.seoTitle }}</p>
-                <p v-if="selected.seoDescription">SEO 描述：{{ selected.seoDescription }}</p>
-            </div>
-            <div v-else class="empty-tip">请选择左侧栏目，或使用顶部图标新增子栏目</div>
+        <!-- 右侧：类型化内容面板（B5 栏目工作台） -->
+        <div class="main-container workbench-main">
+            <template v-if="selected">
+                <div class="panel-header">
+                    <div class="panel-title">
+                        <h3>{{ selected.name }}</h3>
+                        <Tag :color="selected.type === 1 ? 'primary' : selected.type === 2 ? 'success' : 'warning'">
+                            {{ typeDict.find(t => t.value === selected!.type)?.label }}
+                        </Tag>
+                        <span class="panel-meta">排序 {{ selected.sortNo }} · {{ selected.status === 1 ? "显示" : "隐藏" }}</span>
+                    </div>
+                    <div class="panel-tools">
+                        <Button v-if="selected.type === 1" type="primary" @click="goNewArticle(selected.id)">
+                            <Icon type="ios-add" />
+                            新建文章
+                        </Button>
+                        <Button v-if="selected.type !== 3" @click="openPreview(selected)">
+                            <Icon type="ios-eye" />
+                            预览
+                        </Button>
+                        <Button @click="showEditNode">
+                            <Icon type="ios-create" />
+                            编辑栏目
+                        </Button>
+                    </div>
+                </div>
+
+                <!-- 列表型：本栏目文章管理（联动仅经 categoryId watch，拖拽排序不触发） -->
+                <ArticleListPanel
+                    v-if="selected.type === 1"
+                    class="panel-body"
+                    :category-id="selected.id"
+                    fixed-category
+                />
+
+                <!-- 单页型：内容摘要 + 编辑入口 -->
+                <div v-else-if="selected.type === 2" class="single-summary">
+                    <p class="summary-text">{{ summaryText(selected) }}</p>
+                    <div class="summary-actions">
+                        <Button type="primary" @click="showEditNode">
+                            <Icon type="ios-create" />
+                            编辑内容
+                        </Button>
+                        <Button @click="openPreview(selected)">
+                            <Icon type="ios-eye" />
+                            预览单页
+                        </Button>
+                    </div>
+                    <p v-if="selected.seoTitle" class="seo-line">SEO 标题：{{ selected.seoTitle }}</p>
+                    <p v-if="selected.seoDescription" class="seo-line">SEO 描述：{{ selected.seoDescription }}</p>
+                </div>
+
+                <!-- 外链型：URL 展示 + 直达 -->
+                <div v-else class="link-info">
+                    <p class="link-url-label">跳转地址</p>
+                    <p class="link-url">{{ selected.linkUrl }}</p>
+                    <div class="summary-actions">
+                        <Button type="primary" @click="openLink(selected.linkUrl)">
+                            <Icon type="ios-open-outline" />
+                            打开链接
+                        </Button>
+                    </div>
+                </div>
+            </template>
+            <div v-else class="empty-tip">选择左侧栏目查看内容</div>
         </div>
 
         <!-- 编辑弹窗 -->
@@ -359,6 +450,17 @@ function onSortSaved() {
     }
 }
 
+/* 树折叠态：隐藏左树，右侧面板占满（覆盖全局 .tree-wrapper .main-container 的 264px 边距） */
+.category-page.tree-collapsed {
+    .tree-container {
+        display: none;
+    }
+
+    .main-container {
+        margin-left: 24px;
+    }
+}
+
 .info-panel {
     background: #fff;
     border-radius: 4px;
@@ -371,6 +473,98 @@ function onSortSaved() {
     }
 }
 
+/* ===== B5 栏目工作台右侧面板 ===== */
+.workbench-main {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.panel-header {
+    background: #fff;
+    border-radius: 4px;
+    padding: 12px 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+
+    .panel-title {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        min-width: 0;
+
+        h3 {
+            margin: 0;
+            max-width: 320px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .panel-meta {
+            color: #999;
+            font-size: 12px;
+        }
+    }
+
+    .panel-tools {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+    }
+}
+
+.panel-body {
+    flex: 1;
+    min-height: 0;
+    margin-top: 10px;
+    overflow: auto;
+}
+
+.single-summary,
+.link-info {
+    background: #fff;
+    border-radius: 4px;
+    padding: 16px;
+    margin-top: 10px;
+
+    .summary-text {
+        color: #333;
+        line-height: 1.8;
+        white-space: pre-wrap;
+        word-break: break-all;
+        margin-bottom: 14px;
+    }
+
+    .summary-actions {
+        display: flex;
+        gap: 8px;
+    }
+
+    .seo-line {
+        color: #999;
+        font-size: 12px;
+        margin-top: 10px;
+    }
+}
+
+.link-info {
+    .link-url-label {
+        color: #999;
+        font-size: 12px;
+        margin-bottom: 4px;
+    }
+
+    .link-url {
+        color: #2d8cf0;
+        word-break: break-all;
+        margin-bottom: 14px;
+    }
+}
+
 .empty-tip {
     color: #999;
     text-align: center;