userclass/UserclassFront
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): 页面补通道卡片骨架，白卡与分页恢复正常

Browse Source 
- App 不统一包卡片（会与页面级卡片叠加），改由各页面根节点提供，与 Notice 一致
- 25 个视图套 .page-wrapper.yh-fill > .main-container；日志管理重写为
  .search-wrap + .table-region + .page-panel 规范结构（卡片自动转 flex 纵向）
- 新增 element_height mixin：ResizeObserver 实测 .table-region 高度喂 Table，
  替代视口高度减常量的旧模型
- self_viewport 高度基准扣除卡片留白 64px，避免表格溢出被卡片裁切
- .env.dev 恢复真实后端地址
This commit is contained in:
lijing
2026-10-20 15:16:53 +08:00
parent 7e49587c10
commit a99b3073cf
29 changed files with 279 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.dev
+1 -1
View File
@@ -6,5 +6,5 @@
# serviceHost 留空 → API 走同源相对 /api/*，由 vite proxy 转发到本地后端（规避 CAS 不回 CORS 头）
VITE_BASE_HOST=http://base.yunhaixingtong.com
VITE_SSO_HOST=http://sso.yunhaixingtong.com
VITE_SERVICE_HOST=
VITE_SERVICE_HOST=http://base.yunhaixingtong.com/userclass
VITE_IS_MOCK=false
src/App.vue
+1
View File
@@ -129,6 +129,7 @@ onMounted(async () => {
<h3>暂无权限</h3>
<h6>如需查看，请联络管理员为您分配权限</h6>
</div>
<!-- 卡片由各页面根节点提供：.page-wrapper.yh-fill > .main-container（通道 §4.4） -->
<router-view v-else-if="isRouterAlive" :key="$route.fullPath" />
</div>
</div>
src/mixins/element_height.js
+39
View File
@@ -0,0 +1,39 @@
/**
* 卡片内表格高度实测（Vue3）
* 用法：mixin + 在表格容器上写 class="table-region" ref="tableRegion"
* Table 用 :height="tableRegionHeight"
*/
export const element_height = {
data() {
return {
tableRegionHeight: 0,
};
},
mounted() {
this.__measureTableRegion();
if (typeof ResizeObserver !== "undefined") {
this.__tableRegionRO = new ResizeObserver(() => this.__measureTableRegion());
const el = this.$refs.tableRegion;
if (el) this.__tableRegionRO.observe(el);
}
window.addEventListener("resize", this.__measureTableRegion);
},
beforeUnmount() {
if (this.__tableRegionRO) {
this.__tableRegionRO.disconnect();
this.__tableRegionRO = null;
}
window.removeEventListener("resize", this.__measureTableRegion);
},
methods: {
__measureTableRegion() {
const el = this.$refs.tableRegion;
if (!el) return;
const h = Math.floor(el.clientHeight);
// 0 常见于隐藏容器/首帧，保留上次有效值
if (h > 0) this.tableRegionHeight = h;
},
},
};
export default element_height;
src/mixins/self_viewport.js
+13 -5
View File
@@ -1,3 +1,6 @@
// 卡片留白预算（通道 §4.4）：.main-container 上下各 16 外边距 + 16 内边距
const CARD_OVERHEAD = 64;
export const self_viewport = {
data() {
return {
@@ -26,11 +29,16 @@ export const self_viewport = {
}
},
mounted() {
this.tableHeight = document.body.clientHeight;
window.onresize = () => {
return (() => {
this.tableHeight = document.body.clientHeight;
})();
const sync = () => {
// 页面已包在 .main-container 卡片内：从视口高度里扣掉卡片留白，
// 否则沿用旧视口基准会多算 64px，表格溢出被卡片裁切
this.tableHeight = document.body.clientHeight - CARD_OVERHEAD;
};
sync();
window.addEventListener("resize", sync);
this.__syncTableHeight = sync;
},
beforeUnmount() {
if (this.__syncTableHeight) window.removeEventListener("resize", this.__syncTableHeight);
}
};
src/views/areaOperateDaily.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<!-- 外层全屏容器，用于高度自适应 -->
<div class="page-wrap">
<!-- 顶部搜索栏 -->
@@ -38,6 +40,8 @@
/>
</div>
</div>
</div>
</div>
</template>
<script>
src/views/classManage/Christianity.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<div class="container-full-height">
<div class="layout-flex-row">
<!-- 左侧树形容器 高度撑满、内部滚动 -->
@@ -141,6 +143,8 @@
</div></template>
</Modal>
</div>
</div>
</div>
</template>
<script>
src/views/classManage/ChristianityDetail.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<div class="outer-wrap">
<!-- 顶部栏：Tab + 班级名称 + 返回 -->
<div class="header-bar">
@@ -81,6 +83,8 @@
</div></template>
</Modal>
</div>
</div>
</div>
</template>
<script>
src/views/classManage/HigherEducation.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<div class="outer-wrap">
<div class="page-container">
<!-- 左侧年级树形 -->
@@ -145,6 +147,8 @@
</div></template>
</Modal>
</div>
</div>
</div>
</template>
<script>
src/views/dailySearch.vue
+129 -164
View File
@@ -1,178 +1,143 @@
<template>
<div class="oper-log-wrap">
<!-- 顶部搜索栏 -->
<div class="top-search-bar">
<div></div>
<div class="search-box">
<Input
v-model="searchKeyword"
placeholder="请输入用户名、IP、模块或详细操作"
search
style="width:460px"
@on-search="handleSearch"
/>
</div>
<!-- 内容卡片骨架（通道 §4.4）：page-wrapper.yh-fill > main-container
卡片直接被 .page-panel（分页脚）识别为「表格卡」，转 flex 纵向；
工具/筛选/分页固定高，.table-region 撑满剩余高度 -->
<div class="page-wrapper yh-fill">
<div class="main-container">
<!-- 搜索区（卡片内 filterbar 语义） -->
<div class="search-wrap fix">
<Input
class="fr"
style="width:460px"
v-model="searchKeyword"
placeholder="请输入用户名、IP、模块或详细操作"
search
suffix="ios-search"
@on-search="handleSearch"
@on-clear="handleSearch"
/>
</div>
<!-- 自适应滚动表格容器 -->
<div class="table-scroll-wrap">
<!-- 表格区：实测高度喂 Table，避免卡内溢出 -->
<div class="table-region" ref="tableRegion">
<Table
stripe
:columns="tableColumns"
:data="tableData"
:height="useTableHeight()+32"
:height="tableRegionHeight"
></Table>
</div>
<!-- 底部分栏：分页固定底部 -->
<div class="page-bottom-bar">
<div></div>
<div class="page-wrap">
<span style="margin-right:12px">共 {{ total }} 条</span>
<Page
v-model="pageNum"
:page-size="pageSize"
:total="total"
:page-size-opts="[10,20,50,100]"
show-sizer
@on-change="pageChange"
@on-page-size-change="sizeChange"
></Page>
</div>
<!-- 分页脚：正常流贴底，不再绝对定位 -->
<div class="page-panel">
<span class="total-text">共 {{ total }} 条</span>
<Page
v-model="pageNum"
:page-size="pageSize"
:total="total"
:page-size-opts="[10,20,50,100]"
show-sizer
@on-change="pageChange"
@on-page-size-change="sizeChange"
></Page>
</div>
</div>
</div>
</template>
<script>
import { self_viewport } from "@/mixins/self_viewport";
export default {
name: 'OperationLogPage',
data() {
return {
// 搜索关键词
searchKeyword: '',
// 分页参数
pageNum: 1,
pageSize: 10,
total: 0,
// 表格配置列
tableColumns: [],
// 模拟表格数据
tableData: []
}
},
mixins: [self_viewport],
created() {
this.initTableColumn()
this.loadLogData()
},
methods: {
// 初始化配置式表格列
initTableColumn() {
this.tableColumns = [
{ title: '序号', type: 'index', align: 'center', width: 70 },
{ title: '模块', key: 'module', align: 'center', width: 160 },
{ title: '详细操作', key: 'content', align: 'left' },
{ title: '用户', key: 'operator', align: 'center', width: 130 },
{ title: 'IP', key: 'ip', align: 'center', width: 150 },
{
title: '时间',
key: 'operateTime',
align: 'center',
width: 190,
render: (h, params) => {
return h("div", { style: "line-height: 56px" }, this.$utils.dateFormat(params.row.operateTime,'yyyy-MM-dd HH:mm:ss'));
}
}
]
},
// 请求日志列表
loadLogData() {
const _this = this;
var item = {
keyword:_this.searchKeyword,
page:_this.pageNum-1,
size:_this.pageSize
};
_this.$api.get(APIConfig.BschClassSystem.getlogsearch, item, resp => {
if (resp.code == 0) {
_this.tableData = resp.data.content;
_this.total=resp.data.total;
} else {
_this.tableData = [];
<script>
import { element_height } from "@/mixins/element_height";
export default {
name: "OperationLogPage",
mixins: [element_height],
data() {
return {
// 搜索关键词
searchKeyword: "",
// 分页参数
pageNum: 1,
pageSize: 10,
total: 0,
// 表格配置列
tableColumns: [],
// 表格数据
tableData: []
};
},
created() {
this.initTableColumn();
this.loadLogData();
},
methods: {
// 初始化配置式表格列
initTableColumn() {
this.tableColumns = [
{ title: "序号", type: "index", align: "center", width: 70 },
{ title: "模块", key: "module", align: "center", width: 160 },
{ title: "详细操作", key: "content", align: "left" },
{ title: "用户", key: "operator", align: "center", width: 130 },
{ title: "IP", key: "ip", align: "center", width: 150 },
{
title: "时间",
key: "operateTime",
align: "center",
width: 190,
render: (h, params) => {
return h(
"div",
{ style: "line-height: 56px" },
this.$utils.dateFormat(params.row.operateTime, "yyyy-MM-dd HH:mm:ss")
);
}
});
},
// 搜索
handleSearch() {
this.pageNum = 1
this.loadLogData()
},
// 页码切换
pageChange(page) {
this.pageNum = page
this.loadLogData()
},
// 每页条数修改
sizeChange(size) {
this.pageSize = size
this.pageNum = 1
this.loadLogData()
}
}
];
},
// 请求日志列表
loadLogData() {
const _this = this;
var item = {
keyword: _this.searchKeyword,
page: _this.pageNum - 1,
size: _this.pageSize
};
_this.$api.get(APIConfig.BschClassSystem.getlogsearch, item, resp => {
if (resp.code == 0) {
_this.tableData = resp.data.content;
_this.total = resp.data.total;
} else {
_this.tableData = [];
}
});
},
// 搜索
handleSearch() {
this.pageNum = 1;
this.loadLogData();
},
// 页码切换
pageChange(page) {
this.pageNum = page;
this.loadLogData();
},
// 每页条数修改
sizeChange(size) {
this.pageSize = size;
this.pageNum = 1;
this.loadLogData();
}
}
</script>
<style scoped>
.oper-log-wrap {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 12px;
}
/* 顶部搜索栏 */
.top-search-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 14px;
flex-shrink: 0;
}
.search-box {
width: 100%;
background: #f7f7f7;
padding: 10px 16px;
height: 52px;
text-align: right;
}
/* 表格自适应滚动区域 */
.table-scroll-wrap {
flex: 1;
min-height: 0;
}
.table-scroll-wrap :deep(.ivu-table) {
height: 100%;
}
/* 底部分页固定栏 */
.page-bottom-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 14px;
flex-shrink: 0;
}
.page-wrap {
display: flex;
align-items: center;
}
</style>
};
</script>
<style scoped>
.total-text {
color: var(--text-2, #666);
font-size: 13px;
}
</style>
src/views/electiveClassManage.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<div class="page-container">
<!-- 顶部标签栏 + 新增分组按钮 + 校本Tab编辑按钮 -->
<div class="tab-header">
@@ -281,6 +283,8 @@
</div></template>
</Modal>
</div>
</div>
</div>
</template>
<script>
src/views/electiveClassManageDetail.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<div class="student-class-page">
<!-- 顶部标题栏 -->
<div class="page-top-bar">
@@ -104,6 +106,8 @@
</div></template>
</Modal>
</div>
</div>
</div>
</template>
<script>
src/views/historySearch.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<div class="class-history-wrap">
<!-- 左侧树形区域：固定高度纵向滚动、单选、默认首班级选中 -->
<div class="left-tree-box">
@@ -58,6 +60,8 @@
</div>
</div>
</div>
</div>
</template>
<script>
src/views/historySearchDetail.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<div class="student-teach-detail-wrap">
<!-- 顶部标题栏 -->
<div class="top-header-bar">
@@ -29,6 +31,8 @@
</div>
</div>
</div>
</div>
</div>
</template>
src/views/itemSet.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<div class="page-container">
<div class="btn-top-wrap">
<Button type="primary" @click="openAddModal">添加学年学期</Button>
@@ -199,6 +201,8 @@
</div></template>
</Modal>
</div>
</div>
</div>
</template>
<script>
import { Button } from "view-ui-plus";
src/views/schoolSetting.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<div class="page-wrap">
<Tabs v-model="activeTab">
<TabPane label="校区管理" name="campus"></TabPane>
@@ -140,6 +142,8 @@
</div></template>
</Modal>
</div>
</div>
</div>
</template>
<script>
src/views/studentManage/Christianity.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<div class="student-manage-wrap">
<!-- 左侧树形区域 固定高度滚动 -->
<div class="left-tree-box">
@@ -291,6 +293,8 @@
</div></template>
</Modal>
</div>
</div>
</div>
</template>
<script>
src/views/studentManage/HigherEducation.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<div class="student-manage-wrap">
<!-- 左侧树形区域 固定高度滚动 -->
<div class="left-tree-box">
@@ -277,6 +279,8 @@
</div></template>
</Modal>
</div>
</div>
</div>
</template>
<script>
src/views/studentYDManage/Christianity.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<div class="student-manage-wrap">
<!-- 左侧树形区域 固定高度滚动 -->
<div class="left-tree-box">
@@ -77,6 +79,8 @@
</div></template>
</Modal>
</div>
</div>
</div>
</template>
<script>
src/views/studentYDManage/HigherEducation.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<div class="student-manage-wrap">
<!-- 左侧树形区域 固定高度滚动 -->
<div class="left-tree-box">
@@ -77,6 +79,8 @@
</div></template>
</Modal>
</div>
</div>
</div>
</template>
<script>
src/views/studySystemChoice.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<div class="edu-layout-wrap">
<Row :gutter="10" class="layout-row">
<!-- 左侧：学校树形 -->
@@ -64,6 +66,8 @@
</div></template>
</Modal>
</div>
</div>
</div>
</template>
<script>
src/views/subjectManForZy.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<!-- 最外层整体边框容器（和校区/系部/专业页面统一外壳样式） -->
<div class="outer-wrap">
<!-- 顶部筛选+操作栏 -->
@@ -93,6 +95,8 @@
</div></template>
</Modal>
</div>
</div>
</div>
</template>
<script>
src/views/subjectSetzhi.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<div class="outer-wrap">
<!-- 顶部年级下拉 -->
<div class="top-select-wrap">
@@ -69,6 +71,8 @@
</div></template>
</Modal>
</div>
</div>
</div>
</template>
<script>
src/views/teacherManage/Teachergrouping.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<div class="group-manage-page">
<!-- 顶部操作栏 -->
<div class="top-header">
@@ -136,6 +138,8 @@
<user-check ref="userCheck" :treeData="treeData" :userids="userids" @change="v => (userids = v)" @on-submit="submit" :isDisabled="isAddto" />
<user-check ref="userCheck2" :treeData="treeData" :userids="userids2" @change="v => (userids2 = v)" @on-submit="submit2" :isDisabled="isAddto" />
</div>
</div>
</div>
</template>
<script>
src/views/teacherManage/Teachertransfer.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<div class="page-wrap">
<!-- 顶部搜索区域 -->
<div class="top-search-bar">
@@ -39,6 +41,8 @@
></Page>
</div>
</div>
</div>
</div>
</template>
<script>
src/views/teacherManage/teacherinfo.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<div class="outer-wrap">
<div class="page-flex-layout">
<!-- 左侧分组树形栏 -->
@@ -325,6 +327,8 @@
</div></template>
</Modal>
</div>
</div>
</div>
</template>
<script>
src/views/teacherManage/teachseeting.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<div class="teach-manage-page">
<!-- 顶部筛选栏 -->
<div class="top-filter-bar">
@@ -93,6 +95,8 @@
</div></template>
</Modal>
</div>
</div>
</div>
</template>
<script>
src/views/zhuanruinfo.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<div class="teacher-transfer-wrap">
<!-- 顶部筛选栏 -->
<div class="top-filter-bar">
@@ -73,6 +75,8 @@
</div></template>
</Modal>
</div>
</div>
</div>
</template>
<script>
src/views/zhuanruinfostu/Christianity.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<div class="student-move-wrap">
<!-- 顶部筛选栏 -->
<div class="top-filter-bar">
@@ -80,6 +82,8 @@
</div></template>
</Modal>
</div>
</div>
</div>
</template>
<script>
src/views/zhuanruinfostu/HigherEducation.vue
+4
View File
@@ -1,4 +1,6 @@
<template>
<div class="page-wrapper yh-fill">
<div class="main-container">
<div class="student-move-wrap">
<!-- 顶部筛选栏 -->
<div class="top-filter-bar">
@@ -91,6 +93,8 @@
</div></template>
</Modal>
</div>
</div>
</div>
</template>
<script>