# Profile 页面优化计划

## 问题分析
当前 profile 页面与 demo 对比，存在的问题：
1. 使用了多个子组件（`user-info-card`、`level-progress`、`settings-list`）导致可能的布局差异
2. 深色模式切换按钮的实现和 demo 不一致
3. 整体结构可能存在嵌套问题

## 优化方案
### 1. 重构 Profile 组件为单个文件
- 将所有子组件的 HTML 合并到 `profile.html`
- 更新 `profile.ts` 包含所有必要的逻辑和图标导入
- 移除对中间组件的依赖

### 2. 严格匹配 Demo 结构
- 使用与 demo 完全相同的 HTML 结构
- 保持一致的 CSS 类名
- 保持一致的深色模式切换实现

### 3. 清理
- 移除不再需要的 `profile/components` 文件夹

## 需要修改的文件
1. `src/app/features/profile/profile/profile.html` - 完全重写
2. `src/app/features/profile/profile/profile.ts` - 更新逻辑和导入
3. 删除 `src/app/features/profile/components/` - 整个文件夹

## 最终效果
- Profile 页面完全符合 demo 的视觉效果
- 布局结构、按钮样式、图标位置完全一致
- 深色模式切换功能正常