# 个性化设置功能使用指南

## 🎯 功能概述

已成功为 **mom_kitchen** 项目创建了一个完整的个性化设置页面，用户可以从个人中心访问并动态调整应用的全局设置。

## 📱 访问方式

### 导航路径
```
个人中心 (Profile Tab) → 设置 → 个性化设置
```

## ✨ 功能特性

### 1. 🎨 主题颜色设置
- **5种预设颜色**：蓝色、橙色、蓝紫、草绿、深红
- **即时预览**：选择颜色后立即应用到整个应用
- **视觉反馈**：选中颜色显示对勾标记
- **自定义显示**：如选择其他颜色，显示"自定义"

### 2. 📝 字体大小调整
- **范围**：12pt - 24pt（可调节）
- **实时反馈**：滑块显示当前大小
- **精确控制**：以0.5pt为单位调整
- **全局影响**：影响应用所有文本显示

### 3. 🌙 显示模式（深色模式）
- **一键切换**：开启/关闭深色模式
- **自动适配**：文本和背景色自动调整
- **系统集成**：同步更新状态栏和导航栏颜色

### 4. ✨ 动画效果强度
- **范围**：0 - 2 倍速
- **实时调整**：滑块操作即时反映
- **视觉反馈**：显示当前强度倍数

### 5. 🌐 语言设置
- **支持语言**：
  - 简体中文 (zh)
  - 繁体中文 (zh_Hant)
  - English (en)
- **即时切换**：应用界面语言立即更新
- **持久保存**：语言设置已保存到本地存储

### 6. 🔄 恢复默认设置
- **一键重置**：将所有设置恢复到应用默认值
- **确认机制**：显示确认对话框防止误操作
- **完全重置**：
  - 深色模式：关闭
  - 主题色：蓝色（#2196F3）
  - 字体大小：16pt
  - 动画强度：1.0x
  - 语言：简体中文

## 🏗️ 项目结构

### 新增文件

#### 1. PersonalizationController
**位置**: `lib/src/controllers/personalization_controller.dart`

核心功能：
- 管理所有个性化设置的状态
- 提供方法调用 `ThemeService` 和 `AnimationService`
- 预设主题颜色和语言列表
- 实现恢复默认值的逻辑

关键方法：
```dart
- setThemeColor(Color color)           // 设置主题颜色
- setFontSize(double size)              // 设置字体大小
- toggleDarkMode()                      // 切换深色模式
- setAnimationIntensity(double)         // 设置动画强度
- setAnimationPreset(AnimationPreset)   // 设置动画预设
- setLanguage(String languageCode)      // 设置语言
- resetToDefaults()                     // 恢复默认值
```

#### 2. PersonalizationPage
**位置**: `lib/src/pages/personalization_page.dart`

UI 层实现：
- 5个主要设置区域的布局
- 颜色选择器的可视化实现
- 滑块和开关控件
- 语言选择器
- 恢复默认设置按钮
- 响应式设计，适配各种屏幕尺寸

## 🔧 技术实现细节

### 框架集成

1. **GetX 状态管理**
   - 使用 `GetBuilder` 构建 UI
   - `Obx()` 响应式更新
   - GetX 路由导航

2. **ThemeService 集成**
   - 直接调用 `ThemeService` 方法获得全局效果
   - 所有设置自动保存到 `SharedPreferences`
   - 实时更新应用 UI

3. **页面标准遵循**
   - 继承 `BaseController` 管理 loading 状态
   - 使用 `PageStandards` 的主题和字体配置
   - 集成页面规范验证系统

4. **路由和绑定**
   - 在 `app_routes.dart` 中注册新路由 `/personalization`
   - 在 `app_binding.dart` 中注册控制器
   - 在 `profile_page.dart` 中添加导航

### 关键集成点

```dart
// 1. 路由定义
static const String personalization = '/personalization';

// 2. 页面注册  
GetPage(name: personalization, page: () => const PersonalizationPage(), ...)

// 3. 控制器注册
Get.lazyPut(() => PersonalizationController(), fenix: true);

// 4. 导航
Get.to(() => const PersonalizationPage());
```

## 💾 数据持久化

所有设置通过 `SharedPreferences` 自动保存：

```
Keys saved:
- is_dark_mode
- primary_color
- secondary_color
- font_size
- animation_intensity
- text_color
- background_color
- locale
- dialog_style
- toast_style
```

应用重启时会自动恢复用户的设置。

## 🎨 UI/UX 特点

### 设计原则
- **友好提示**：每个设置项都有清晰的标签和图标
- **即时反馈**：所有操作立即在页面预览
- **一致性**：UI 风格与现有应用保持一致
- **无障碍**：支持大字体模式

### 交互反馈
- 颜色选择时显示对勾标记
- 数值显示在容器中便于识别
- 恢复默认设置时有确认对话框
- 操作完成后显示 Snackbar 通知

## 🔐 安全性

- 所有数据保存在本地
- 没有网络请求
- 恢复默认不会删除用户数据，只重置设置值
- 语言切换是无损的

## 📊 性能优化

- 使用 `Obx()` 仅更新受影响的 widget
- 滑块使用防抖（debounce）避免频繁更新
- 异步加载和保存操作通过 `runWithLoading()` 管理
- 使用 `GetBuilder` 而非全局 rebuild

## 🚀 使用建议

1. **第一次启动**：应用会加载默认设置
2. **调整设置**：即时生效，无需确认
3. **恢复默认**：需要在对话框中确认
4. **语言切换**：需要重新加载 localization
5. **跨应用**：所有设置影响整个应用的所有页面

## 🐛 已知限制

1. 颜色选择目前仅支持预设颜色，未来可扩展自定义颜色选择器
2. 动画预设与强度独立控制，未来可优化为联动
3. 字体大小调整使用系统默认字体，未来可支持自定义字体

## 📝 扩展建议

### 可能的增强功能
1. **自定义颜色选择**：使用颜色选择器允许用户选择任意颜色
2. **主题预设**：允许保存多个完整的主题配置
3. **导入/导出**：支持配置文件的导出和导入
4. **预览模式**：在设置前预览完整页面效果
5. **快捷切换**：主屏幕添加快速主题切换按钮
6. **更多语言**：扩展到更多语言支持

## ✅ 测试检查清单

已验证的功能：
- ✅ 导航到个性化设置页面
- ✅ 主题颜色选择和应用
- ✅ 字体大小调整
- ✅ 深色模式切换
- ✅ 动画强度调整
- ✅ 语言切换
- ✅ 恢复默认设置
- ✅ 设置持久化
- ✅ 页面响应式设计
- ✅ 代码规范检查

## 📞 故障排除

### 问题：设置不保存
**解决**：确保 `SharedPreferences` 已正确初始化，检查 `flutter pub get`

### 问题：UI 不更新
**解决**：确保使用 `Obx()` 包裹可观察变量，检查 GetBuilder 是否正确绑定

### 问题：语言不切换
**解决**：检查 `get.updateLocale()` 是否被正确调用，验证 localization 资源文件

---

**完成状态**: ✅ 功能实现完成并集成到现有框架
**最后更新**: 2026-04-08