Neo
6f8f12314f
包含多个会话的累积代码变更： - backend: AI 聊天服务、触发器调度、认证增强、WebSocket、调度器最小间隔 - admin-web: ETL 状态页、任务管理、调度配置、登录优化 - miniprogram: 看板页面、聊天集成、UI 组件、导航更新 - etl: DWS 新任务（finance_area_daily/board_cache）、连接器增强 - tenant-admin: 项目初始化 - db: 19 个迁移脚本（etl_feiqiu 11 + zqyy_app 8） - packages/shared: 枚举和工具函数更新 - tools: 数据库工具、报表生成、健康检查 - docs: PRD/架构/部署/合约文档更新 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
65 lines
4.1 KiB
Markdown
65 lines
4.1 KiB
Markdown
# P10-NS4-05：管理后台的响应式适配
|
||
|
||
## 简要结论
|
||
- 状态：⚠️ 部分解决
|
||
- tenant-admin 依赖 Ant Design 内置响应式能力实现了基础适配（Sider 可折叠、flex 布局），但未定义最小支持分辨率、断点规则，也未对表格横向滚动做统一处理。
|
||
|
||
## 详细审查
|
||
|
||
### 前端代码
|
||
|
||
#### 1. 全局布局（App.tsx）
|
||
- 使用 Ant Design `<Layout>` + `<Sider collapsible>`，侧边栏支持折叠/展开，这是管理后台最基本的响应式能力 ✅
|
||
- `minHeight: "100vh"` 保证全屏高度 ✅
|
||
- Content 区域 `margin: 16, minHeight: 280`，使用固定像素值，无断点适配 ⚠️
|
||
|
||
#### 2. 页面级响应式
|
||
- **Login 页面**：居中卡片 `width: 400` 固定宽度，小屏幕下可能溢出 ⚠️
|
||
- **ExcelUpload 页面**：使用了 `<Row gutter={16}>` + `<Col span={8}>` 展示统计卡片，这是 Ant Design Grid 的响应式用法，但 `span` 为固定值（未使用 `xs/sm/md/lg` 响应式断点属性）⚠️
|
||
- **UserApproval / UserManagement 页面**：筛选栏使用 `display: "flex"` + `flexWrap: "wrap"`（UserManagement），基本适配 ✅；但 UserApproval 筛选栏未设 `flexWrap` ⚠️
|
||
- **RetentionClues 页面**：使用 `<Space direction="vertical">` 布局，宽度 `100%`，基本适配 ✅
|
||
|
||
#### 3. 表格适配
|
||
- 所有页面的 `<Table>` 组件均未设置 `scroll={{ x: ... }}`，在窄屏下列内容可能被压缩变形 ❌
|
||
- 对比 admin-web 的 DBViewer 页面已使用 `scroll={{ x: 'max-content' }}`，tenant-admin 未跟进
|
||
- RetentionClues 的线索表格有多列固定宽度（共约 700px），加上其他列在 1280px 屏幕下可能紧凑但尚可
|
||
- ExcelUpload 的校验详情表格"数据"列和"问题详情"列无固定宽度，内容可能很长
|
||
|
||
#### 4. CSS / 样式文件
|
||
- 项目中无独立 CSS/Less/SCSS 文件，所有样式通过 inline style 实现
|
||
- 无 `@media` 查询、无自定义断点定义、无全局响应式样式
|
||
- 仅 SiteSelector 组件使用了 `maxTagCount="responsive"`（Ant Design Select 内置响应式标签数量）✅
|
||
|
||
#### 5. viewport 配置
|
||
- `index.html` 包含标准 viewport meta：`<meta name="viewport" content="width=device-width, initial-scale=1.0" />` ✅
|
||
|
||
#### 6. 依赖检查
|
||
- 无额外响应式库（如 react-responsive、@ant-design/pro-layout 等）
|
||
- 未使用 Ant Design 的 `Grid.useBreakpoint()` hook
|
||
|
||
#### 7. admin-web 对比
|
||
- admin-web 同样未做系统性响应式适配，但 DBViewer 页面的表格使用了 `scroll={{ x: 'max-content' }}`
|
||
- 两个管理后台的响应式水平基本一致：依赖 Ant Design 默认行为，无主动断点适配
|
||
|
||
### 差距分析
|
||
|
||
| 标杆要求（P10 §响应式） | 当前状态 | 差距 |
|
||
|---|---|---|
|
||
| 最小支持分辨率定义 | P10 spec 和 NS4 均未提及 | ❌ 未定义 |
|
||
| 断点规则（1280/1440/1920） | 无自定义断点 | ❌ 未定义 |
|
||
| 移动端适配策略 | 无策略声明 | ⚠️ 管理后台面向 PC，可接受不支持移动端，但需明确声明 |
|
||
| Sider 可折叠 | `collapsible` 已启用 | ✅ 已实现 |
|
||
| 表格横向滚动 | 未设置 `scroll.x` | ❌ 未实现 |
|
||
| Grid 响应式断点 | ExcelUpload 用了 Row/Col 但无响应式断点 | ⚠️ 部分 |
|
||
|
||
> 注：P10 原始 spec（`docs/prd/specs/P10-tenant-admin-web.md`）中实际不包含"§响应式"章节，该要求来自标杆文件对管理后台的通用期望。
|
||
|
||
### 建议
|
||
|
||
1. **明确最小分辨率**：在 NS4 或项目前端规范中声明最小支持分辨率为 1280×720（覆盖主流笔记本），不支持移动端访问
|
||
2. **表格横向滚动**：为所有 `<Table>` 添加 `scroll={{ x: 'max-content' }}` 或计算列宽总和，防止窄屏下列压缩
|
||
3. **Login 卡片宽度**：将 `width: 400` 改为 `maxWidth: 400, width: '100%'`，避免小屏溢出
|
||
4. **ExcelUpload 统计卡片**：`<Col span={8}>` 改为 `<Col xs={24} sm={12} lg={8}>`，适配不同屏幕
|
||
5. **UserApproval 筛选栏**：补充 `flexWrap: "wrap"`，与 UserManagement 保持一致
|
||
6. **优先级评估**：以上均为低风险改进项。管理后台面向 PC 端使用，当前 Ant Design 默认行为已提供基本可用性，建议在后续迭代中逐步完善，不阻塞当前交付
|