# Task 5.1 可视化验证指南

## 开发服务器
服务器已启动: http://localhost:4200/

## 验证步骤

### 1. 基础布局验证
访问 http://localhost:4200/ 应该看到:

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

### 2. 侧边栏折叠功能验证

**操作步骤:**
1. 点击顶部栏左侧的折叠按钮 (☰ 或 ✕ 图标)
2. 观察侧边栏宽度变化

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

### 3. 响应式布局验证

**桌面端 (>1200px):**
- ✅ 侧边栏默认展开 (256px)
- ✅ 内容区有充足空间

**平板端 (768px - 1200px):**
1. 调整浏览器窗口宽度到 1000px
2. 观察布局变化

**预期效果:**
- ✅ 侧边栏自动折叠到 80px (或根据设计调整)
- ✅ 内容区自适应宽度

**移动端 (<768px):**
1. 调整浏览器窗口宽度到 600px
2. 观察布局变化

**预期效果:**
- ✅ 侧边栏隐藏在屏幕外
- ✅ 点击折叠按钮时,侧边栏从左侧滑入
- ✅ 内容区占满全宽
- ✅ 内边距减小到 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

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

## 已知限制

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

## 验证清单

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

## 问题排查

### 如果页面空白:
1. 检查浏览器控制台是否有错误
2. 确认开发服务器正在运行
3. 尝试刷新页面 (Ctrl+F5)

### 如果样式不正确:
1. 检查 Tailwind CSS 是否正确配置
2. 确认 styles.scss 已正确导入
3. 清除浏览器缓存

### 如果折叠功能不工作:
1. 检查浏览器控制台是否有 JavaScript 错误
2. 确认 Angular 变更检测正常工作
3. 检查 CSS 类绑定是否正确

## 下一步

验证完成后,可以继续实现:
- Task 5.2: SidebarComponent
- Task 5.3: HeaderComponent
- Task 5.4: BreadcrumbComponent