Profile 页面优化计划

问题分析

当前 profile 页面与 demo 对比，存在的问题：

使用了多个子组件（user-info-card、level-progress、settings-list）导致可能的布局差异
深色模式切换按钮的实现和 demo 不一致
整体结构可能存在嵌套问题

优化方案

1. 重构 Profile 组件为单个文件

将所有子组件的 HTML 合并到 profile.html
更新 profile.ts 包含所有必要的逻辑和图标导入
移除对中间组件的依赖

2. 严格匹配 Demo 结构

使用与 demo 完全相同的 HTML 结构
保持一致的 CSS 类名
保持一致的深色模式切换实现

3. 清理

移除不再需要的 profile/components 文件夹

需要修改的文件

src/app/features/profile/profile/profile.html - 完全重写
src/app/features/profile/profile/profile.ts - 更新逻辑和导入
删除 src/app/features/profile/components/ - 整个文件夹

最终效果

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