feat(W2): 栏目树修订-虚拟根(学校名/子站名)+工具栏收敛4按钮+高度链修复,T-W2-01..10 绿 44/44

This commit is contained in:
chenxing
2026-09-08 15:14:09 +08:00
parent 1e887906eb
commit 7b99ec398d
6 changed files with 224 additions and 36 deletions
+11 -31
View File
@@ -10,13 +10,11 @@ import { categoryApi } from "@/api/module/cms";
import { useCmsStore } from "@/store";
import config from "@/assets/config/host.config";
import { CategoryTreeNode } from "@/types/cms";
import { rootLabelOf, wrapTreeWithRoot } from "@/utils/categoryTree";
/* UserBase group/index 同款交互:图标工具栏(新增/编辑/子组排序/删除/搜索)+ ztree */
/* UserBase group/index 同款交互:图标工具栏(新增/编辑/子组排序/删除)+ ztree(W2:搜索/收起展开按钮移除) */
const store = useCmsStore();
/** 树折叠(窄屏/专注内容时收起左树,右侧面板占满;不触碰 ztree 内部交互) */
const treeCollapsed = ref(false);
const refTreePanel = useTemplateRef("refTreePanel");
const refFormData = useTemplateRef("refFormData");
const refNodeNameInput = useTemplateRef("refNodeNameInput");
@@ -58,9 +56,13 @@ const rules = {
type: [{ required: true, type: "number", message: "请选择类型", trigger: "change" }],
};
/** 树数据源(CategoryTreePanel 拉取用;站点切换即时重载) */
function loadTreeApi(): Promise<CategoryTreeNode[]> {
return categoryApi.tree(store.siteId!).send() as Promise<CategoryTreeNode[]>;
/** 根节点 label(W2 虚拟根,D5):主站=学校名(缺省回退 mainSiteName),子站=子站名;随站点上下文响应 */
const rootLabel = computed(() => rootLabelOf({ currentSchool: store.currentSchool, currentSite: store.currentSite }));
/** 树数据源(CategoryTreePanel 拉取用;站点切换即时重载;W2:包装虚拟根后返回) */
async function loadTreeApi(): Promise<CategoryTreeNode[]> {
const tree = await categoryApi.tree(store.siteId!).send();
return [wrapTreeWithRoot(tree as any[], rootLabel.value)];
}
// 站点上下文切换即时重载(docs/09 §3.3,修复切换不刷新缺陷)
@@ -231,7 +233,7 @@ function openLink(url: string) {
</script>
<template>
<div class="tree-wrapper category-page" :class="{ 'tree-collapsed': treeCollapsed }">
<div class="tree-wrapper category-page">
<!-- 左侧栏目树(userbase rule-tree 风格) -->
<div class="tree-container category-tree-box">
<ul class="opera-ul">
@@ -255,16 +257,6 @@ function openLink(url: string) {
<SvgIcon name="tree-icon-5" />
</li>
</Tooltip>
<Tooltip content="搜索栏目" placement="top" transfer>
<li class="search-node-li" @click="refTreePanel?.openSearch()">
<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
@@ -433,8 +425,7 @@ function openLink(url: string) {
}
}
.add-node-li,
.search-node-li {
.add-node-li {
position: relative;
}
}
@@ -450,17 +441,6 @@ function openLink(url: string) {
}
}
/* 树折叠态:隐藏左树,右侧面板占满(覆盖全局 .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;