From b8c55a0654c063cfcff47fab904e0f98c29ad01b Mon Sep 17 00:00:00 2001
From: chenxing <chenxing@yunhaixingtong.com>
Date: Wed, 21 Oct 2026 16:01:59 +0800
Subject: [PATCH] =?UTF-8?q?fix(dept):=20=E9=A1=B5=E9=9D=A2=E9=AA=A8?=
 =?UTF-8?q?=E6=9E=B6=E6=94=B9=E4=B8=BA=E6=A0=87=E5=87=86=20tree-wrapper=20?=
 =?UTF-8?q?+=20main-container=EF=BC=8C=E5=8E=BB=E6=8E=89=E8=87=AA=E9=80=A0?=
 =?UTF-8?q?=20iView=20Card?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 根容器 main-wrapper → page-wrapper tree-wrapper；右侧改挂 .main-container 白卡
  （主题 skin 已提供背景/边框/圆角/阴影/margin 16/padding 16），删除 iView Card 与配套的
  .dept-panel 撑高补丁
- 卡片标题降级为卡片内 .panel-title 一行；两卡间隙与四周留白回到规范 16px，
  与 group-user 等 13 个标准骨架页逐像素对齐（此前 12px 间隙 + 自造卡片，灰底露出过多）
- 删除为撑高写的 flex hack（.dept-panel / ivu-card-body flex:1 等），高度交给主题
---
 src/views/dept-manage/index.vue | 126 +++++++++++++++-----------------
 1 file changed, 57 insertions(+), 69 deletions(-)

diff --git a/src/views/dept-manage/index.vue b/src/views/dept-manage/index.vue
index 6bc1857..0fc4a13 100644
--- a/src/views/dept-manage/index.vue
+++ b/src/views/dept-manage/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="main-wrapper tree-wrapper dept-manage-page">
+    <div class="page-wrapper tree-wrapper dept-manage-page">
         <div v-if="!roleReady" class="dept-loading">加载中…</div>
 
         <template v-else>
@@ -9,40 +9,36 @@
                     :treeApi="treeApi" :defaultSearchVisible="true" @on-change="onTreeChange" />
             </div>
 
-            <!-- 右侧：部门卡片 -->
-            <div class="dept-manage-main">
-                <Card dis-hover :bordered="false" class="dept-panel">
-                    <template #title>
-                        <div class="panel-title">
-                            <span>部门管理</span>
-                            <Tag v-if="currentSchoolName" color="primary" class="ml-8">{{ currentSchoolName }}</Tag>
-                            <Select v-if="multiSchool" v-model="currentSchoolId" size="small" class="ml-8 school-select">
-                                <Option v-for="s in schoolOptions" :key="s.id" :value="s.id">{{ s.name }}</Option>
-                            </Select>
-                            <span class="inc-ctrl ml-auto" title="打开后列出该校下所有层级的部门" @click="toggleInclude">
-                                <span class="inc-label">包含子组</span>
-                                <i class="sw-mini" :class="{ 'is-on': includeOn }"></i>
-                            </span>
-                        </div>
-                    </template>
+            <!-- 右侧：部门卡片（白卡由主题的 .main-container 提供，不再套 iView Card） -->
+            <div class="main-container dept-manage-main">
+                <div class="panel-title">
+                    <span class="panel-caption">部门管理</span>
+                    <Tag v-if="currentSchoolName" color="primary" class="ml-8">{{ currentSchoolName }}</Tag>
+                    <Select v-if="multiSchool" v-model="currentSchoolId" size="small" class="ml-8 school-select">
+                        <Option v-for="s in schoolOptions" :key="s.id" :value="s.id">{{ s.name }}</Option>
+                    </Select>
+                    <span class="inc-ctrl ml-auto" title="打开后列出该校下所有层级的部门" @click="toggleInclude">
+                        <span class="inc-label">包含子组</span>
+                        <i class="sw-mini" :class="{ 'is-on': includeOn }"></i>
+                    </span>
+                </div>
 
-                    <Alert show-icon type="success" class="usage-note">
-                        <b>设置说明：</b>
-                        停用只影响「选」（新建事项 / 流程绑定时选不到），不影响「看」（已有事项展示）与「办」（在途流程照常解析）；
-                        关闭「包含子组」只展示一级部门，打开后连同下级部门（如办公室下的校办 / 宣传 / 财务 / 党建）一并列出。
-                    </Alert>
+                <Alert show-icon type="success" class="usage-note">
+                    <b>设置说明：</b>
+                    停用只影响「选」（新建事项 / 流程绑定时选不到），不影响「看」（已有事项展示）与「办」（在途流程照常解析）；
+                    关闭「包含子组」只展示一级部门，打开后连同下级部门（如办公室下的校办 / 宣传 / 财务 / 党建）一并列出。
+                </Alert>
 
-                    <Alert v-if="!currentSchoolName" show-icon type="info" class="state-tip">
-                        {{ showTree ? '请在左侧选择学校节点' : '当前账号没有可管理的学校' }}
-                    </Alert>
-                    <Alert v-else-if="!deptList.length" show-icon type="info" class="state-tip">
-                        该校教师组下暂无部门。部门 = 教师组的直接子节点，可前往「组,用户管理」建组。
-                    </Alert>
-                    <div v-else class="dept-grid">
-                        <DeptCard v-for="d in deptList" :key="d.id" :dept="d" :include-children="includeOn"
-                            @toggle="onToggle" />
-                    </div>
-                </Card>
+                <Alert v-if="!currentSchoolName" show-icon type="info" class="state-tip">
+                    {{ showTree ? '请在左侧选择学校节点' : '当前账号没有可管理的学校' }}
+                </Alert>
+                <Alert v-else-if="!deptList.length" show-icon type="info" class="state-tip">
+                    该校教师组下暂无部门。部门 = 教师组的直接子节点，可前往「组,用户管理」建组。
+                </Alert>
+                <div v-else class="dept-grid">
+                    <DeptCard v-for="d in deptList" :key="d.id" :dept="d" :include-children="includeOn"
+                        @toggle="onToggle" />
+                </div>
             </div>
         </template>
     </div>
@@ -242,16 +238,13 @@ async function loadSchoolScope() {
 
 <style scoped lang="scss">
 .dept-manage-page {
-    display: flex;
-    gap: 12px;
+    /* 骨架交由主题 .tree-wrapper（flex + gap 16 + padding 16）+ .main-container（白卡）；
+       这里只声明两卡等高，间距/留白一律不覆盖 */
     align-items: stretch;
-    /* 主高度由 .main-wrapper（主题通道下发）提供；height:100% 是兜底：
-       父级无确定高度时退化为 auto，不破坏原行为 */
-    height: 100%;
+    box-sizing: border-box;
 
     /* 树：外层不滚（滚动交给内部 zTree），否则内容未超高也会因 1~2px 溢出出现滚动条 */
     .dept-manage-tree {
-        flex: 0 0 300px;
         min-height: 0;
         display: flex;
         flex-direction: column;
@@ -262,29 +255,35 @@ async function loadSchoolScope() {
             min-height: 0;
         }
     }
+}
 
-    .dept-manage-main {
-        flex: 1;
-        min-width: 0;
-        display: flex;
-        flex-direction: column;
-    }
+/* 右侧白卡内部纵向排布：标题行 / 说明条 / 卡片网格 */
+.dept-manage-main {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow: auto;
+}
+
+.panel-title {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-bottom: 12px;
+}
+
+.panel-caption {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text, #1e2635);
+}
+
+.school-select {
+    width: 180px;
 }
 
 /* 右侧卡片面板撑满剩余高度（与其他页面一致），内容超出时在面板内滚动 */
-.dept-panel {
-    flex: 1;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-
-    :deep(.ivu-card-body) {
-        flex: 1;
-        min-height: 0;
-        overflow: auto;
-    }
-}
-
 /* 面板内顶部说明条的间距（外观完全交给 iView Alert 自身，不覆写配色） */
 .usage-note {
     margin-bottom: 14px;
@@ -302,17 +301,6 @@ async function loadSchoolScope() {
     color: var(--text-3, #98a1b2);
 }
 
-.panel-title {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    width: 100%;
-}
-
-.school-select {
-    width: 180px;
-}
-
 /* 面板头的「包含子组」开关 */
 .inc-ctrl {
     display: inline-flex;