Task 5.1 可视化验证指南

开发服务器

服务器已启动: http://localhost:4200/

验证步骤

1. 基础布局验证

访问 http://localhost:4200/ 应该看到:

预期效果:

✅ 左侧侧边栏 (深蓝色背景 #001529, 宽度 256px)
✅ 右侧主内容区
- 顶部栏 (白色背景, 高度 64px)
- 内容区 (灰色背景 #F0F2F5, 显示"工作台"占位页面)

2. 侧边栏折叠功能验证

操作步骤:

点击顶部栏左侧的折叠按钮 (☰ 或 ✕ 图标)
观察侧边栏宽度变化

预期效果:

✅ 第一次点击: 侧边栏从 256px 缩小到 80px
✅ 按钮图标从 ✕ 变为 ☰
✅ 侧边栏文字变小或居中显示
✅ 过渡动画流畅 (0.3s)
✅ 第二次点击: 侧边栏恢复到 256px

3. 响应式布局验证

桌面端 (>1200px):

✅ 侧边栏默认展开 (256px)
✅ 内容区有充足空间

平板端 (768px - 1200px):

调整浏览器窗口宽度到 1000px
观察布局变化

预期效果:

✅ 侧边栏自动折叠到 80px (或根据设计调整)
✅ 内容区自适应宽度

移动端 (<768px):

调整浏览器窗口宽度到 600px
观察布局变化

预期效果:

✅ 侧边栏隐藏在屏幕外
✅ 点击折叠按钮时,侧边栏从左侧滑入
✅ 内容区占满全宽
✅ 内边距减小到 16px

4. 样式细节验证

侧边栏:

✅ 背景色: #001529 (深蓝色)
✅ 文字颜色: 白色
✅ 导航项悬停效果: 背景变亮

顶部栏:

✅ 背景色: #ffffff (白色)
✅ 高度: 64px
✅ 底部阴影: 0 1px 4px rgba(0, 21, 41, 0.08)
✅ 折叠按钮悬停效果: 颜色变为 #1890FF

内容区:

✅ 背景色: #F0F2F5 (浅灰色)
✅ 内边距: 24px
✅ 可滚动 (当内容超出时)

5. 路由验证

当前路由:

URL: http://localhost:4200/
自动重定向到: http://localhost:4200/dashboard

预期效果:

✅ 显示工作台占位页面
✅ router-outlet 正确渲染子组件

6. 浏览器兼容性验证

测试浏览器:

Chrome (推荐)
Edge
Firefox

预期效果:

✅ 所有浏览器显示一致
✅ 动画效果流畅
✅ 无控制台错误

已知限制

侧边栏内容: 当前使用占位符,完整的导航菜单将在 Task 5.2 实现
顶部栏内容: 当前使用占位符,完整的用户信息区将在 Task 5.3 实现
面包屑导航: 占位符文本,完整功能将在 Task 5.4 实现
工作台页面: 简单占位符,完整功能将在 Task 6 实现

验证清单

基础布局显示正常
侧边栏折叠功能正常工作
响应式布局在不同屏幕尺寸下正常
样式符合设计规范
路由导航正常
无控制台错误
动画过渡流畅

问题排查

如果页面空白:

检查浏览器控制台是否有错误
确认开发服务器正在运行
尝试刷新页面 (Ctrl+F5)

如果样式不正确:

检查 Tailwind CSS 是否正确配置
确认 styles.scss 已正确导入
清除浏览器缓存

如果折叠功能不工作:

检查浏览器控制台是否有 JavaScript 错误
确认 Angular 变更检测正常工作
检查 CSS 类绑定是否正确

下一步

验证完成后,可以继续实现:

Task 5.2: SidebarComponent
Task 5.3: HeaderComponent
Task 5.4: BreadcrumbComponent