1

update-list-pages.md

@@ -0,0 +1,86 @@
+# 全局列表页面固定分页布局更新指南
+
+## 已完成的页面
+- ✅ 京粉订单列表 (`src/views/system/orderrows/index.vue`) - 已使用自定义布局
+- ✅ 角色管理 (`src/views/system/role/index.vue`) - 已使用ListLayout组件
+- ✅ 超级管理员 (`src/views/system/superadmin/index.vue`) - 已使用ListLayout组件
+
+## 待更新的页面列表
+以下是项目中其他需要更新为固定分页布局的列表页面：
+
+### 系统管理模块
+- `src/views/system/user/index.vue` - 用户管理（特殊布局，需要单独处理）
+- `src/views/system/post/index.vue` - 岗位管理
+- `src/views/system/notice/index.vue` - 通知公告
+- `src/views/system/dict/index.vue` - 字典管理
+- `src/views/system/dict/data.vue` - 字典数据
+- `src/views/system/config/index.vue` - 参数设置
+
+### 监控模块
+- `src/views/monitor/operlog/index.vue` - 操作日志
+- `src/views/monitor/job/log.vue` - 调度日志
+- `src/views/monitor/logininfor/index.vue` - 登录日志
+- `src/views/monitor/job/index.vue` - 定时任务
+- `src/views/monitor/online/index.vue` - 在线用户
+
+### 工具模块
+- `src/views/tool/gen/index.vue` - 代码生成
+
+### 业务模块
+- `src/views/system/jdorder/orderList.vue` - 京东订单列表
+- `src/views/system/xbmessage/index.vue` - 消息管理
+- `src/views/system/favoriteProduct/index.vue` - 收藏商品
+- `src/views/system/xbgroup/index.vue` - 群组管理
+
+## 更新步骤
+
+### 方法一：使用ListLayout组件（推荐）
+1. 在页面中导入ListLayout组件：
+```javascript
+import ListLayout from "@/components/ListLayout";
+
+export default {
+  components: {
+    ListLayout
+  },
+  // ...
+}
+```
+
+2. 将页面结构改为：
+```vue
+<template>
+  <list-layout>
+    <!-- 搜索区域 -->
+    <template #search>
+      <!-- 原来的搜索表单和操作按钮 -->
+    </template>
+
+    <!-- 表格区域 -->
+    <template #table>
+      <!-- 原来的el-table -->
+    </template>
+
+    <!-- 分页区域 -->
+    <template #pagination>
+      <!-- 原来的pagination组件 -->
+    </template>
+  </list-layout>
+</template>
+```
+
+### 方法二：直接修改CSS（适用于特殊布局）
+参考 `src/views/system/orderrows/index.vue` 的实现方式，直接修改页面样式。
+
+## 注意事项
+1. 用户管理页面使用了splitpanes布局，需要特殊处理
+2. 确保所有页面都保持原有的功能不变
+3. 测试分页导航在不同数据量下的表现
+4. 保持响应式设计在移动端的良好表现
+
+## 测试要点
+- [ ] 分页导航固定在页面底部
+- [ ] 表格内容可以独立滚动
+- [ ] 搜索区域固定在顶部
+- [ ] 移动端显示正常
+- [ ] 所有原有功能正常工作