chore: 批量勾选已完成的响应式适配任务

openspec/changes/admin-responsive-adaptation/tasks.md

@@ -0,0 +1,115 @@
+## 1. 全局基础：CSS 断点体系
+
+- [x] 1.1 在 `index.css` 中建立三断点 `@media` 体系：手机 `< 768px`、平板 `768-1023px`、桌面 `≥ 1024px`
+- [x] 1.2 添加全局表格横向滚动样式（`.ant-table { overflow-x: auto }` 确保窄屏可滑动）
+- [x] 1.3 添加全局弹窗响应式约束（`max-width: calc(100vw - 32px)`、`max-height: 80vh`）
+- [x] 1.4 添加全局按钮组/Card/Descriptions 等通用组件的断点样式
+
+## 2. 布局层：MainLayout 三端适配
+
+- [x] 2.1 重构 `isMobile` 为三端检测 hook（`useResponsive`：返回 `{ isMobile, isTablet, isDesktop }`）
+- [x] 2.2 平板断点：侧栏默认折叠（`collapsed: true`），内容区 padding 16px
+- [x] 2.3 桌面断点：保持当前行为（侧栏可折叠，padding 24px）
+- [x] 2.4 Header 用户信息区域：平板/手机下文字隐藏仅显示 Avatar
+
+## 3. 登录页
+
+- [x] 3.1 登录卡片改为 `maxWidth: 400, width: calc(100vw - 48px)`
+
+## 4. 数据面板（Dashboard）
+
+- [x] 4.1 统计卡片 `Col` 从 `span={6}` 改为 `xs={12} sm={12} md={6}`
+- [x] 4.2 图表卡片 `Col` 从 `span={12}` 改为 `xs={24} sm={12}`
+- [x] 4.3 ECharts 图表的 `style` 添加 `width: '100%'` 确保跟随容器 resize
+- [x] 4.4 顶部标题和日期选择器在小屏下堆叠排列
+
+## 5. 宿舍总览（RoomVisual）
+
+- [x] 5.1 检查并补齐平板断点（当前仅有 `xs/sm/md/lg`，确认覆盖 768-1024px）
+
+## 6. 学生管理（Students）— 含字段拆分
+
+- [x] 6.1 将「学号/身份证」列拆分为「学号」和「身份证」两个独立列
+- [x] 6.2 新分列添加 `ellipsis: true` 和 `width` 防止长文本溢出
+- [x] 6.3 表格添加 `scroll={{ x }}` 确保移动端横向滚动
+- [x] 6.4 顶部工具栏添加 `flexWrap: 'wrap'` 和 `gap`（搜索栏 + 按钮组）
+
+## 7. 宿舍管理（Rooms）
+
+- [x] 7.1 表格添加 `scroll={{ x }}`，操作列设置 `width`
+- [x] 7.2 顶部搜索/筛选 + 操作按钮工具栏 wrap 优化
+
+## 8. 入住管理（Occupancies）
+
+- [x] 8.1 表格添加 `scroll={{ x }}`
+- [x] 8.2 顶部 Alert + Tab 切换区 + 搜索/操作区在小屏堆叠
+- [x] 8.3 弹窗（入住/退宿/换房/批量退宿）添加宽度约束
+
+## 9. 费用录入（Expenses）
+
+- [x] 9.1 宿舍费用和个人附加费两个 Tab 下的表格均添加 `scroll={{ x }}`
+- [x] 9.2 各 Tab 顶部搜索/筛选/按钮工具栏 wrap 优化
+- [x] 9.3 弹窗宽度约束
+
+## 10. 押金管理（Deposits）
+
+- [x] 10.1 表格添加 `scroll={{ x }}`
+- [x] 10.2 搜索/筛选工具栏 wrap 优化
+- [x] 10.3 收取押金/退还弹窗宽度约束
+
+## 11. 账单管理（Bills）
+
+- [x] 11.1 表格添加 `scroll={{ x }}`
+- [x] 11.2 搜索/筛选/按钮工具栏 wrap 优化
+- [x] 11.3 生成账单和详情弹窗宽度约束
+
+## 12. 教室管理（Classrooms）
+
+- [x] 12.1 表格添加 `scroll={{ x }}`
+- [x] 12.2 搜索/筛选工具栏 + 按钮组 wrap 优化
+- [x] 12.3 弹窗宽度约束
+
+## 13. 租赁订单（ClassroomRentals）
+
+- [x] 13.1 表格已有 `scroll={{ x: 1200 }}`，复查确保值合理
+- [x] 13.2 搜索/月份筛选 + 按钮工具栏 wrap 优化
+- [x] 13.3 弹窗宽度约束
+
+## 14. 教室排期（ClassroomSchedule）
+
+- [x] 14.1 HTML 排期表格已有 `overflowX: 'auto'`，确认 sticky 左列在平板/手机正常工作
+- [x] 14.2 日期列 `minWidth` 优化防止挤压
+- [x] 14.3 创建自定义 hook `useWindowSize` 确保图表/表格 resize 响应
+
+## 15. 租赁方（Tenants）
+
+- [x] 15.1 表格添加 `scroll={{ x }}`
+- [x] 15.2 工具栏 wrap 优化
+
+## 16. 操作日志（OperationLogs）
+
+- [x] 16.1 表格已有 `scroll={{ x: 1000 }}`，复查确保合理
+- [x] 16.2 标题 + 筛选区 wrap 优化
+
+## 17. 角色管理（Roles）
+
+- [x] 17.1 表格添加 `scroll={{ x }}`
+- [x] 17.2 工具栏 + 操作按钮 wrap 优化
+- [x] 17.3 弹窗（创建/编辑角色 + 权限选择器）宽度约束
+
+## 18. 权限一览（Permissions）
+
+- [x] 18.1 表格添加 `scroll={{ x }}`
+- [x] 18.2 页面标题 + 筛选/操作区 wrap 优化
+
+## 19. 账号管理（Users）
+
+- [x] 19.1 表格添加 `scroll={{ x }}`
+- [x] 19.2 搜索/筛选工具栏 wrap 优化
+- [x] 19.3 创建/编辑账号弹窗宽度约束
+
+## 20. 全局验证
+
+- [ ] 20.1 在所有 16 个页面中，分别用 375px / 768px / 1024px / 1440px 视口宽度检查无溢出
+- [ ] 20.2 检查所有 Modal 弹窗在三端视口下不超出屏幕
+- [x] 20.3 确保 `npm run build` 通过，无 TypeScript 错误