forked from wangziqi/gongxue-base
2.1 KiB
2.1 KiB
Why
管理后台当前仅在布局层有一个 768px 的移动端断点，大多数页面使用固定列宽、硬编码 Col span 和多列表格，导致在手机和平板上文字溢出、按钮换行错位、表格内容被截断。需要为手机（< 768px）、平板（768-1024px）、桌面（> 1024px）三个端侧做统一响应式适配，确保所有界面文字不溢出、不强制换行。
What Changes
- 全局布局增强：为 MainLayout 的内容区、侧栏折叠、Header 用户信息区域增加平板断点适配
- CSS 断点体系：在
index.css中建立三断点响应式体系（@media规则），覆盖表格、卡片、按钮、弹窗等全局组件 - 全页面表格适配：为所有页面的
<Table>添加scroll={{ x }}确保窄屏横向滚动，列宽优化防止数据截断 - 仪表盘响应式：将
Col span={6}改为响应式断点（xs/sm/md），ECharts 图表跟随窗口 resize - 登录页适配：登录卡片从固定宽度改为响应式最大宽度
- 工具栏/搜索栏适配：统一所有页面顶部操作栏的 wrap 和 gap 行为
- 弹窗响应式：所有 Modal 添加平板/手机下的最大宽度和高度约束
- 排期表适配：教室排期的大 HTML 表格优化列宽和滚动体验
- 学生字段拆分：将学生管理页的「学号/身份证」列拆分为「学号」和「身份证」两个独立列
- 保持使用 Ant Design v6 组件库，不引入新的 UI 依赖
Capabilities
New Capabilities
responsive-layout: 管理后台三端（手机 < 768px / 平板 768-1024px / 桌面 > 1024px）响应式布局，包括全局 CSS 断点、布局适配、表格横向滚动、组件响应式行为
Modified Capabilities
（无现有前端相关 spec，不需要 delta spec）
Impact
- 受影响文件:
apps/admin/src/下所有页面组件（16 个页面 + 1 个布局）、index.css、部分组件文件 - 不涉及: 后端 API、数据库 schema、部署配置、认证/权限逻辑
- 风险: 低——改动限于 CSS 和组件 props，不涉及业务逻辑变更