87 lines
2.6 KiB
Markdown
87 lines
2.6 KiB
Markdown
# 全局列表页面固定分页布局更新指南
|
||
|
||
## 已完成的页面
|
||
- ✅ 京粉订单列表 (`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. 保持响应式设计在移动端的良好表现
|
||
|
||
## 测试要点
|
||
- [ ] 分页导航固定在页面底部
|
||
- [ ] 表格内容可以独立滚动
|
||
- [ ] 搜索区域固定在顶部
|
||
- [ ] 移动端显示正常
|
||
- [ ] 所有原有功能正常工作
|