forked from wangziqi/gongxue-base
31 lines
2.1 KiB
Markdown
31 lines
2.1 KiB
Markdown
## 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，不涉及业务逻辑变更
|