fix(dept): 页面骨架改为标准 tree-wrapper + main-container,去掉自造 iView Card
build / build (push) Successful in 2m32s
build / build (push) Successful in 2m32s
- 根容器 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 等),高度交给主题
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<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>
|
<div v-if="!roleReady" class="dept-loading">加载中…</div>
|
||||||
|
|
||||||
<template v-else>
|
<template v-else>
|
||||||
@@ -9,12 +9,10 @@
|
|||||||
:treeApi="treeApi" :defaultSearchVisible="true" @on-change="onTreeChange" />
|
:treeApi="treeApi" :defaultSearchVisible="true" @on-change="onTreeChange" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 右侧:部门卡片 -->
|
<!-- 右侧:部门卡片(白卡由主题的 .main-container 提供,不再套 iView Card) -->
|
||||||
<div class="dept-manage-main">
|
<div class="main-container dept-manage-main">
|
||||||
<Card dis-hover :bordered="false" class="dept-panel">
|
|
||||||
<template #title>
|
|
||||||
<div class="panel-title">
|
<div class="panel-title">
|
||||||
<span>部门管理</span>
|
<span class="panel-caption">部门管理</span>
|
||||||
<Tag v-if="currentSchoolName" color="primary" class="ml-8">{{ currentSchoolName }}</Tag>
|
<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">
|
<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>
|
<Option v-for="s in schoolOptions" :key="s.id" :value="s.id">{{ s.name }}</Option>
|
||||||
@@ -24,7 +22,6 @@
|
|||||||
<i class="sw-mini" :class="{ 'is-on': includeOn }"></i>
|
<i class="sw-mini" :class="{ 'is-on': includeOn }"></i>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
|
|
||||||
<Alert show-icon type="success" class="usage-note">
|
<Alert show-icon type="success" class="usage-note">
|
||||||
<b>设置说明:</b>
|
<b>设置说明:</b>
|
||||||
@@ -42,7 +39,6 @@
|
|||||||
<DeptCard v-for="d in deptList" :key="d.id" :dept="d" :include-children="includeOn"
|
<DeptCard v-for="d in deptList" :key="d.id" :dept="d" :include-children="includeOn"
|
||||||
@toggle="onToggle" />
|
@toggle="onToggle" />
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
@@ -242,16 +238,13 @@ async function loadSchoolScope() {
|
|||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.dept-manage-page {
|
.dept-manage-page {
|
||||||
display: flex;
|
/* 骨架交由主题 .tree-wrapper(flex + gap 16 + padding 16)+ .main-container(白卡);
|
||||||
gap: 12px;
|
这里只声明两卡等高,间距/留白一律不覆盖 */
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
/* 主高度由 .main-wrapper(主题通道下发)提供;height:100% 是兜底:
|
box-sizing: border-box;
|
||||||
父级无确定高度时退化为 auto,不破坏原行为 */
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
/* 树:外层不滚(滚动交给内部 zTree),否则内容未超高也会因 1~2px 溢出出现滚动条 */
|
/* 树:外层不滚(滚动交给内部 zTree),否则内容未超高也会因 1~2px 溢出出现滚动条 */
|
||||||
.dept-manage-tree {
|
.dept-manage-tree {
|
||||||
flex: 0 0 300px;
|
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -262,29 +255,35 @@ async function loadSchoolScope() {
|
|||||||
min-height: 0;
|
min-height: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧白卡内部纵向排布:标题行 / 说明条 / 卡片网格 */
|
||||||
.dept-manage-main {
|
.dept-manage-main {
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 右侧卡片面板撑满剩余高度(与其他页面一致),内容超出时在面板内滚动 */
|
|
||||||
.dept-panel {
|
|
||||||
flex: 1;
|
|
||||||
min-height: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
:deep(.ivu-card-body) {
|
|
||||||
flex: 1;
|
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
overflow: auto;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧卡片面板撑满剩余高度(与其他页面一致),内容超出时在面板内滚动 */
|
||||||
/* 面板内顶部说明条的间距(外观完全交给 iView Alert 自身,不覆写配色) */
|
/* 面板内顶部说明条的间距(外观完全交给 iView Alert 自身,不覆写配色) */
|
||||||
.usage-note {
|
.usage-note {
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
@@ -302,17 +301,6 @@ async function loadSchoolScope() {
|
|||||||
color: var(--text-3, #98a1b2);
|
color: var(--text-3, #98a1b2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.school-select {
|
|
||||||
width: 180px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 面板头的「包含子组」开关 */
|
/* 面板头的「包含子组」开关 */
|
||||||
.inc-ctrl {
|
.inc-ctrl {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
|||||||
Reference in New Issue
Block a user