# 全局列表页面固定分页布局更新指南

## 已完成的页面
- ✅ 京粉订单列表 (`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. 保持响应式设计在移动端的良好表现

## 测试要点
- [ ] 分页导航固定在页面底部
- [ ] 表格内容可以独立滚动
- [ ] 搜索区域固定在顶部
- [ ] 移动端显示正常
- [ ] 所有原有功能正常工作