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

- 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 恢复真实后端地址
2026-10-20 15:16:53 +08:00
parent 7e49587c10
commit a99b3073cf
29 changed files with 279 additions and 170 deletions
@@ -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>