gongxue-base/openspec/changes/archive/2026-07-03-admin-responsive-adaptation/tasks.md

1. 全局基础：CSS 断点体系

• 1.1 在 index.css 中建立三断点 @media 体系：手机 < 768px、平板 768-1023px、桌面 ≥ 1024px
• 1.2 添加全局表格横向滚动样式（.ant-table { overflow-x: auto } 确保窄屏可滑动）
• 1.3 添加全局弹窗响应式约束（max-width: calc(100vw - 32px)、max-height: 80vh）
• 1.4 添加全局按钮组/Card/Descriptions 等通用组件的断点样式

2. 布局层：MainLayout 三端适配

• 2.1 重构 isMobile 为三端检测 hook（useResponsive：返回 { isMobile, isTablet, isDesktop }）
• 2.2 平板断点：侧栏默认折叠（collapsed: true），内容区 padding 16px
• 2.3 桌面断点：保持当前行为（侧栏可折叠，padding 24px）
• 2.4 Header 用户信息区域：平板/手机下文字隐藏仅显示 Avatar

3. 登录页

• 3.1 登录卡片改为 maxWidth: 400, width: calc(100vw - 48px)

4. 数据面板（Dashboard）

• 4.1 统计卡片 Col 从 span={6} 改为 xs={12} sm={12} md={6}
• 4.2 图表卡片 Col 从 span={12} 改为 xs={24} sm={12}
• 4.3 ECharts 图表的 style 添加 width: '100%' 确保跟随容器 resize
• 4.4 顶部标题和日期选择器在小屏下堆叠排列

5. 宿舍总览（RoomVisual）

• 5.1 检查并补齐平板断点（当前仅有 xs/sm/md/lg，确认覆盖 768-1024px）

6. 学生管理（Students）— 含字段拆分

• 6.1 将「学号/身份证」列拆分为「学号」和「身份证」两个独立列
• 6.2 新分列添加 ellipsis: true 和 width 防止长文本溢出
• 6.3 表格添加 scroll={{ x }} 确保移动端横向滚动
• 6.4 顶部工具栏添加 flexWrap: 'wrap' 和 gap（搜索栏 + 按钮组）

7. 宿舍管理（Rooms）

• 7.1 表格添加 scroll={{ x }}，操作列设置 width
• 7.2 顶部搜索/筛选 + 操作按钮工具栏 wrap 优化

8. 入住管理（Occupancies）

• 8.1 表格添加 scroll={{ x }}
• 8.2 顶部 Alert + Tab 切换区 + 搜索/操作区在小屏堆叠
• 8.3 弹窗（入住/退宿/换房/批量退宿）添加宽度约束

9. 费用录入（Expenses）

• 9.1 宿舍费用和个人附加费两个 Tab 下的表格均添加 scroll={{ x }}
• 9.2 各 Tab 顶部搜索/筛选/按钮工具栏 wrap 优化
• 9.3 弹窗宽度约束

10. 押金管理（Deposits）

• 10.1 表格添加 scroll={{ x }}
• 10.2 搜索/筛选工具栏 wrap 优化
• 10.3 收取押金/退还弹窗宽度约束

11. 账单管理（Bills）

• 11.1 表格添加 scroll={{ x }}
• 11.2 搜索/筛选/按钮工具栏 wrap 优化
• 11.3 生成账单和详情弹窗宽度约束

12. 教室管理（Classrooms）

• 12.1 表格添加 scroll={{ x }}
• 12.2 搜索/筛选工具栏 + 按钮组 wrap 优化
• 12.3 弹窗宽度约束

13. 租赁订单（ClassroomRentals）

• 13.1 表格已有 scroll={{ x: 1200 }}，复查确保值合理
• 13.2 搜索/月份筛选 + 按钮工具栏 wrap 优化
• 13.3 弹窗宽度约束

14. 教室排期（ClassroomSchedule）

• 14.1 HTML 排期表格已有 overflowX: 'auto'，确认 sticky 左列在平板/手机正常工作
• 14.2 日期列 minWidth 优化防止挤压
• 14.3 创建自定义 hook useWindowSize 确保图表/表格 resize 响应

15. 租赁方（Tenants）

• 15.1 表格添加 scroll={{ x }}
• 15.2 工具栏 wrap 优化

16. 操作日志（OperationLogs）

• 16.1 表格已有 scroll={{ x: 1000 }}，复查确保合理
• 16.2 标题 + 筛选区 wrap 优化

17. 角色管理（Roles）

• 17.1 表格添加 scroll={{ x }}
• 17.2 工具栏 + 操作按钮 wrap 优化
• 17.3 弹窗（创建/编辑角色 + 权限选择器）宽度约束

18. 权限一览（Permissions）

• 18.1 表格添加 scroll={{ x }}
• 18.2 页面标题 + 筛选/操作区 wrap 优化

19. 账号管理（Users）

• 19.1 表格添加 scroll={{ x }}
• 19.2 搜索/筛选工具栏 wrap 优化
• 19.3 创建/编辑账号弹窗宽度约束

20. 全局验证

• 20.1 在所有 16 个页面中，分别用 375px / 768px / 1024px / 1440px 视口宽度检查无溢出（代码适配已完成，视觉验证在 verify 阶段执行）
• 20.2 检查所有 Modal 弹窗在三端视口下不超出屏幕（CSS 约束已全局添加）
• 20.3 确保 npm run build 通过，无 TypeScript 错误