# HomeAssistant
**Repository Path**: tomorrowgit/home-assistant
## Basic Information
- **Project Name**: HomeAssistant
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-16
- **Last Updated**: 2025-06-22
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 🏠 Home Assistant Flutter App
**现代化智能家居管理平台 + 完整UI配置系统**
一个基于Flutter构建的跨平台智能家居管理应用，提供直观、美观的用户界面和完整的设备控制功能。
**特色功能：用户可在APP内直接自定义所有UI参数！**
[功能特性](#-功能特性) • [快速开始](#-快速开始) • [UI配置系统](#-ui配置系统) • [项目结构](#-项目结构) • [开发指南](#-开发指南)
---
## 📱 应用预览
| 🏠 仪表板 |
🔌 设备管理 |
🎭 场景控制 |
🎨 UI设置 |
• 系统状态概览
• 设备统计信息
• 快速操作按钮 |
• 智能设备列表
• 实时状态显示
• 设备控制开关 |
• 预设场景管理
• 一键执行功能
• 场景状态指示 |
• 实时UI配置
• 60+可调参数
• 预设主题切换 |
## ✨ 功能特性
### 🎯 核心功能
- **🏠 智能仪表板** - 系统状态一目了然，快速操作触手可及
- **🔌 设备管理** - 支持多种智能设备的统一管理和控制
- **🎭 场景控制** - 自定义场景模式，一键切换生活状态
- **🤖 自动化规则** - 基于条件的智能自动化，让家居更智能
- **🎨 UI配置系统** - **用户可在APP内直接自定义所有UI参数**
### 🎨 UI配置系统亮点 ⭐
- **🎯 实时配置** - 在设置页面直接修改UI参数，立即生效
- **💾 自动保存** - 所有配置更改自动保存到本地存储
- **🎨 60+配置项** - 颜色、尺寸、间距、字体、动画等全面可配置
- **🌈 预设主题** - 6种预设主题（蓝色、绿色、紫色、橙色、红色、深色）
- **📱 响应式设计** - 完美适配手机、平板、桌面等多种设备
- **🔄 导入导出** - 支持配置文件的导入导出和分享
### 🚀 技术亮点
- **跨平台支持** - 一套代码，支持iOS、Android、macOS、Web
- **高性能架构** - 优化的代码结构，快速响应用户操作
- **模块化设计** - 清晰的代码组织，便于维护和扩展
- **状态管理** - 使用Riverpod进行高效的状态管理
- **类型安全** - 完整的类型检查，减少运行时错误
## 🛠 技术栈
### 核心框架
- **Flutter** `3.32.4` - Google跨平台UI框架
- **Dart** `3.8.1` - 现代化编程语言
### 状态管理与存储
- **Flutter Riverpod** `2.4.9` - 现代化状态管理解决方案
- **SharedPreferences** `2.2.2` - 本地配置存储
- **Hive** `2.2.3` - 高性能本地数据库
### 网络与数据
- **Dio** `5.3.2` - 强大的HTTP客户端
- **JSON Annotation** `4.8.1` - JSON序列化支持
- **Build Runner** `2.4.7` - 代码生成工具
### 开发工具
- **Flutter Lints** `3.0.0` - 代码质量检查工具
- **Flutter Test** - 内置测试框架
## 🏗️ 架构设计
### Clean Architecture分层
```
┌─────────────────────────────────────┐
│ Presentation Layer │ ← UI层：Pages, Widgets, Providers
├─────────────────────────────────────┤
│ Domain Layer │ ← 领域层：Entities, Use Cases, Repositories
├─────────────────────────────────────┤
│ Data Layer │ ← 数据层：Models, Data Sources, Repository Impl
├─────────────────────────────────────┤
│ Infrastructure Layer │ ← 基础设施层：Network, Storage, Error Handling
└─────────────────────────────────────┘
```
### 核心特性
- **🎯 依赖注入**: 基于Riverpod的完整DI体系
- **🔄 状态管理**: 响应式状态管理和数据流
- **🌐 网络层**: 统一的API客户端和错误处理
- **💾 存储层**: 多层缓存策略和本地存储
- **📝 日志系统**: 分级日志和性能监控
- **🛡️ 错误处理**: 统一异常处理和用户友好提示
## 📋 重构说明
### 重构目标
本项目已完成全面重构，采用现代化的Flutter架构模式，实现了：
- ✅ **可维护性提升**: 清晰的分层和模块化设计
- ✅ **可测试性增强**: 完整的依赖注入和测试架构
- ✅ **可扩展性优化**: Feature-first的目录结构
- ✅ **性能优化**: 合理的状态管理和缓存策略
- ✅ **代码质量**: 统一的编码规范和最佳实践
### 重构成果
#### 🏗️ 架构升级
- 从简单分层架构升级为**Clean Architecture**
- 采用**Feature-First**目录组织
- 实现完整的**依赖注入体系**
#### 🌐 网络层重构
- 统一的**Dio客户端封装**
- 完善的**API拦截器**和**重试机制**
- 标准化的**响应数据封装**
#### 🛡️ 错误处理
- 统一的**异常定义和处理**
- 用户友好的**错误提示**
- 完整的**日志记录系统**
#### 💾 存储优化
- 多层**缓存策略**
- 统一的**存储服务接口**
- 智能的**数据同步机制**
## 🚀 快速开始
### 环境要求
```bash
Flutter SDK: >=3.10.0
Dart SDK: >=3.0.0
```
### 安装步骤
1. **克隆项目**
```bash
git clone https://github.com/your-username/home-assistant-flutter.git
cd home-assistant-flutter
```
2. **安装依赖**
```bash
flutter pub get
```
3. **运行应用**
```bash
# 标准版本
flutter run
# UI配置版本 (推荐体验)
flutter run lib/main_ui_settings.dart
```
### 🎨 体验UI配置系统
运行UI配置版本后：
1. 点击底部导航的 **"UI设置"** 标签
2. 尝试不同的 **预设主题**
3. 在 **颜色** 标签页调整应用配色
4. 在 **尺寸** 标签页调整组件大小
5. 在 **间距** 标签页调整布局间距
6. 实时查看界面变化！
## 🎨 UI配置系统
### 📋 配置分类
| 🎨 主题配置 |
🌈 颜色配置 |
📏 尺寸配置 |
• 主题模式切换
• Material 3开关
• 全局圆角阴影
• 预设主题选择 |
• 主色调配置
• 状态颜色设置
• 设备状态色
• 导航栏颜色 |
• 图标尺寸调整
• 按钮大小设置
• 卡片样式配置
• 输入框尺寸 |
| 📐 间距配置 |
🔤 字体配置 |
🎬 动画配置 |
• 基础间距调整
• 页面边距设置
• 组件间距配置
• 列表项间距 |
• 字体大小调整
• 字体权重设置
• 行高配置
• 字母间距 |
• 动画时长调整
• 动画开关控制
• 页面切换效果
• 交互动画 |
### 🎯 预设主题
| 主题名称 | 主色调 | 适用场景 |
|---------|--------|----------|
| 🔵 蓝色主题 | `#2196F3` | 经典商务风格 |
| 🟢 绿色主题 | `#4CAF50` | 自然清新风格 |
| 🟣 紫色主题 | `#9C27B0` | 优雅神秘风格 |
| 🟠 橙色主题 | `#FF9800` | 活力温暖风格 |
| 🔴 红色主题 | `#F44336` | 热情动感风格 |
| ⚫ 深色主题 | `#BB86FC` | 护眼夜间模式 |
### 🔧 配置使用示例
```dart
// 获取配置
final config = ref.watch(uiConfigProvider);
// 使用配置化样式
Container(
padding: EdgeInsets.all(config.spacing.md),
decoration: BoxDecoration(
color: config.colors.primaryColor.toColor(),
borderRadius: BorderRadius.circular(config.sizes.cardRadius),
),
child: Text(
'配置化组件',
style: TextStyle(fontSize: config.fonts.title),
),
)
// 修改配置
ref.read(uiConfigProvider.notifier).updateSingleColor(
'primaryColor',
'#4F46E5'
);
```
## 📁 项目结构
### 🏗️ 重构后的Clean Architecture架构
本项目采用**Clean Architecture + Riverpod + Feature-First**架构模式，实现了企业级的代码组织和最佳实践：
```
lib/
├── app/ # 应用级配置
│ ├── config/
│ │ └── app_config.dart # 统一应用配置管理
│ └── di/
│ └── app_providers.dart # 应用级依赖注入
├── core/ # 核心基础设施
│ ├── error/ # 统一错误处理
│ │ ├── app_exception.dart # 应用异常定义
│ │ └── error_handler.dart # 错误处理器
│ ├── network/ # 网络层封装
│ │ ├── api_interceptor.dart # API拦截器
│ │ ├── api_result.dart # 统一响应封装
│ │ └── dio_client.dart # Dio客户端封装
│ ├── storage/
│ │ └── storage_service.dart # 统一存储服务
│ └── utils/
│ └── logger.dart # 统一日志管理
├── features/ # 功能模块 (Feature-First)
│ └── device/ # 设备管理功能
│ ├── data/ # 数据层
│ │ ├── datasources/ # 数据源
│ │ ├── models/ # 数据模型
│ │ └── repositories/ # 仓库实现
│ ├── domain/ # 领域层
│ │ ├── entities/ # 业务实体
│ │ ├── repositories/ # 仓库接口
│ │ └── usecases/ # 用例
│ └── presentation/ # 表示层
│ ├── pages/ # 页面
│ └── providers/ # 状态管理
│ │ └── app_config.dart # 应用配置
│ ├── extensions/ # 扩展方法
│ │ └── color_extensions.dart # 颜色扩展 (十六进制转换)
│ └── utils/ # 工具类
├── providers/ # 状态管理
│ ├── ui_config_provider.dart # UI配置状态管理 ⭐
│ └── theme_provider.dart # 主题管理
├── presentation/ # 表现层
│ ├── pages/ # 页面组件
│ │ ├── devices/ # 设备管理页面
│ │ │ ├── configurable_devices_page.dart # 配置化设备页面
│ │ │ └── device_detail_page.dart
│ │ ├── scenes/ # 场景控制页面
│ │ ├── settings/ # 设置页面
│ │ │ └── ui_settings_page.dart # UI设置页面 ⭐
│ │ └── automation/ # 自动化页面
│ └── widgets/ # 组件库
│ ├── configurable_device_card.dart # 配置化设备卡片
│ ├── color_picker_widget.dart # 颜色选择器 ⭐
│ ├── slider_setting_widget.dart # 滑块设置组件 ⭐
│ ├── dropdown_setting_widget.dart # 下拉选择组件 ⭐
│ └── switch_setting_widget.dart # 开关设置组件 ⭐
├── shared/ # 共享资源
│ └── themes/ # 主题配置
│ ├── app_theme.dart # 应用主题
│ └── configurable_theme.dart # 配置化主题 ⭐
├── main.dart # 标准应用入口
├── main_ui_settings.dart # UI配置应用入口 ⭐
├── main_configurable.dart # 配置化组件入口
└── assets/config/ # 配置文件
└── ui_config.json # JSON配置文件
```
**⭐ 标记的文件是UI配置系统的核心文件**
## 🎨 UI配置系统详细说明
### 🔧 配置管理架构
```dart
// 1. 详细配置类 (60+配置项)
class DetailedUIConfig {
ThemeConfig theme; // 主题配置
DetailedColorConfig colors; // 颜色配置 (20+颜色)
DetailedSizeConfig sizes; // 尺寸配置 (15+尺寸)
DetailedSpacingConfig spacing; // 间距配置 (12+间距)
DetailedFontConfig fonts; // 字体配置
DetailedAnimationConfig animations; // 动画配置
LayoutConfig layout; // 布局配置
}
// 2. 状态管理 (Riverpod)
final uiConfigProvider = StateNotifierProvider();
// 3. 自动保存 (SharedPreferences)
class UIConfigNotifier extends StateNotifier {
// 自动保存到本地存储
Future _saveConfig() async {
final prefs = await SharedPreferences.getInstance();
await prefs.setString('ui_config', json.encode(state.toJson()));
}
}
```
### 🎨 UI设置页面功能
#### 主题标签页
- **预设主题选择器** - 6种主题一键切换
- **主题模式** - 浅色/深色/跟随系统
- **Material 3开关** - 启用最新设计规范
- **全局样式** - 圆角大小、阴影深度
#### 颜色标签页
- **主要颜色** - 主色调、次要色配置
- **状态颜色** - 成功、警告、错误、信息色
- **设备颜色** - 设备开启、关闭、不可用状态色
- **颜色选择器** - 20种预设色 + 自定义十六进制输入
#### 尺寸标签页
- **图标尺寸** - 小(16px)、中(24px)、大(32px)图标
- **按钮尺寸** - 高度(32-64px)、圆角(0-32px)
- **卡片尺寸** - 圆角、阴影效果
- **实时滑块** - 拖动滑块实时预览效果
#### 间距标签页
- **基础间距** - XS(4px) 到 XL(32px)
- **页面间距** - 水平、垂直边距
- **组件间距** - 卡片、列表、按钮间距
- **精确控制** - 0-64像素范围调整
#### 字体标签页
- **字体大小** - 标题、正文、说明字体
- **字体权重** - 轻、常规、中等、粗体
- **行高间距** - 紧凑、正常、宽松
- **实时预览** - 字体变化立即可见
#### 动画标签页
- **动画开关** - 全局动画启用/禁用
- **动画速度** - 快速(150ms)到慢速(1000ms)
- **页面切换** - 滑动、淡入、缩放效果
- **性能优化** - 可关闭动画提升性能
### 🔄 配置持久化
```dart
// 自动保存配置
void updateSingleColor(String colorKey, String colorValue) {
// 更新配置
final newColors = DetailedColorConfig.fromJson(state.colors.toJson());
newColors.primaryColor = colorValue;
// 自动保存到本地
updateColorConfig(newColors);
_saveConfig(); // 自动调用
}
// 配置导入导出
String exportConfig() => json.encode(state.toJson());
void importConfig(String configString) {
final configJson = json.decode(configString);
state = DetailedUIConfig.fromJson(configJson);
_saveConfig();
}
```
### 🎯 实际应用示例
#### 配置化设备卡片
```dart
class ConfigurableDeviceCard extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final config = ref.watch(uiConfigProvider);
return Card(
elevation: config.sizes.cardElevation, // 可配置阴影
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(config.sizes.cardRadius), // 可配置圆角
),
margin: EdgeInsets.all(config.spacing.cardMargin), // 可配置边距
child: Padding(
padding: EdgeInsets.all(config.spacing.cardPadding), // 可配置内边距
child: Column(
children: [
Icon(
Icons.lightbulb,
size: config.sizes.iconLarge, // 可配置图标大小
color: config.colors.deviceOnColor.toColor(), // 可配置颜色
),
SizedBox(height: config.spacing.sm), // 可配置间距
Text(
'智能灯泡',
style: TextStyle(fontSize: config.fonts.subtitle), // 可配置字体
),
],
),
),
);
}
}
```
#### 配置化主题生成
```dart
ThemeData buildTheme(DetailedUIConfig config, Brightness brightness) {
return ThemeData(
useMaterial3: config.theme.useMaterial3,
colorScheme: ColorScheme.fromSeed(
seedColor: config.colors.primaryColor.toColor(),
brightness: brightness,
),
cardTheme: CardThemeData(
elevation: config.sizes.cardElevation,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(config.sizes.cardRadius),
),
),
textTheme: TextTheme(
titleLarge: TextStyle(fontSize: config.fonts.headline6),
bodyLarge: TextStyle(fontSize: config.fonts.body1),
),
);
}
```
## 🧪 测试
### 运行测试
```bash
# 运行所有测试
flutter test
# 运行UI配置测试
flutter test test/ui_config_test.dart
# 生成测试覆盖率报告
flutter test --coverage
```
### UI配置测试示例
```dart
void main() {
group('UI配置测试', () {
test('默认配置应该正确初始化', () {
final config = DetailedUIConfig();
expect(config.colors.primaryColor, '#2196F3');
expect(config.sizes.iconMedium, 24.0);
});
test('配置更新应该正确保存', () async {
final container = ProviderContainer();
final notifier = container.read(uiConfigProvider.notifier);
notifier.updateSingleColor('primaryColor', '#FF0000');
final config = container.read(uiConfigProvider);
expect(config.colors.primaryColor, '#FF0000');
});
test('预设主题应该正确应用', () async {
final container = ProviderContainer();
final notifier = container.read(uiConfigProvider.notifier);
notifier.applyPresetTheme('green');
final config = container.read(uiConfigProvider);
expect(config.colors.primaryColor, '#4CAF50');
});
});
}
```
## 🔧 开发指南
### 添加新的配置项
1. **在配置类中添加字段**
```dart
class DetailedColorConfig {
String newColor = '#000000'; // 新增配置项
// 在fromJson和toJson中添加支持
DetailedColorConfig.fromJson(Map json) {
newColor = json['newColor'] ?? newColor;
}
Map toJson() {
return {
'newColor': newColor,
};
}
}
```
2. **在UI设置页面添加控制组件**
```dart
ColorPickerWidget(
title: '新颜色',
color: config.colors.newColor,
onColorChanged: (color) {
ref.read(uiConfigProvider.notifier).updateSingleColor(
'newColor',
color.toHex(),
);
},
),
```
3. **在Provider中添加更新逻辑**
```dart
void updateSingleColor(String colorKey, String colorValue) {
switch (colorKey) {
case 'newColor':
newColors.newColor = colorValue;
break;
}
}
```
### 代码规范
- **配置命名** - 使用描述性名称，保持一致性
- **性能优化** - 使用`select`监听特定配置变化
- **错误处理** - 配置更新前进行验证
- **测试覆盖** - 为新配置项添加测试用例
## 📦 构建和部署
### 构建不同版本
```bash
# 标准版本
flutter build apk --release
# UI配置版本
flutter build apk --release --target=lib/main_ui_settings.dart
```
### 多环境配置
```bash
# 开发环境 - 启用调试功能
flutter run --dart-define=ENVIRONMENT=development
# 生产环境 - 优化性能
flutter run --dart-define=ENVIRONMENT=production lib/main_ui_settings.dart
```
## 🎯 使用场景
### 🏢 企业定制
- **品牌色彩** - 快速应用企业品牌色
- **界面风格** - 适配不同行业需求
- **用户体验** - 针对特定用户群体优化
### 👥 个人用户
- **个性化** - 根据个人喜好调整界面
- **无障碍** - 调整字体大小、对比度
- **护眼模式** - 深色主题、减少动画
### 🧪 开发测试
- **快速原型** - 无需修改代码即可调整UI
- **A/B测试** - 不同配置方案对比
- **用户反馈** - 收集用户对不同样式的偏好
## 📋 路线图
### 🎯 近期计划 (v1.1.0)
- [x] ✅ 完整UI配置系统
- [x] ✅ 实时配置预览
- [x] ✅ 配置持久化存储
- [ ] 🔄 配置云端同步
- [ ] 🔄 更多预设主题
### 🚀 中期计划 (v1.2.0)
- [ ] 📱 配置分享功能
- [ ] 🎨 高级颜色选择器
- [ ] 📐 响应式配置
- [ ] 🌍 多语言支持
- [ ] 🔔 配置变更通知
### 🌟 长期计划 (v2.0.0)
- [ ] 🤖 AI智能配色建议
- [ ] 👥 社区主题商店
- [ ] 🎯 用户行为分析
- [ ] 🔧 插件化配置系统
- [ ] 📊 配置使用统计
## ❓ 常见问题
Q: 如何重置UI配置？
A: 在UI设置页面点击右上角的重置按钮，或调用 `ref.read(uiConfigProvider.notifier).resetToDefault()`
Q: 配置会自动保存吗？
A: 是的，所有配置更改都会自动保存到本地存储，重启应用后配置依然生效。
Q: 如何添加自定义颜色？
A: 在颜色设置页面，点击颜色块，在弹出的颜色选择器中输入十六进制颜色值（如 #4F46E5）。
Q: 可以导出配置给其他用户吗？
A: 可以，在UI设置页面的菜单中选择"导出配置"，将配置文件分享给其他用户导入。
Q: 如何在代码中使用配置？
A: 使用 `final config = ref.watch(uiConfigProvider)` 获取配置，然后通过 `config.colors.primaryColor.toColor()` 等方式使用。
## 🤝 贡献指南
我们欢迎所有形式的贡献！
### 贡献方式
- 🐛 **报告Bug** - 发现问题请创建Issue
- 💡 **功能建议** - 有好想法请告诉我们
- 🎨 **UI改进** - 提供更好的界面设计
- 💻 **代码贡献** - 提交Pull Request
- 📝 **文档完善** - 帮助改进文档
### 特别欢迎的贡献
- 🎨 **新的预设主题** - 设计更多漂亮的主题
- 🔧 **配置组件** - 开发新的配置控制组件
- 🌍 **国际化** - 添加多语言支持
- 📱 **平台适配** - 优化不同平台的体验
### 提交规范
使用[Conventional Commits](https://conventionalcommits.org/)规范：
```
feat(ui-config): add new color picker component
fix(theme): resolve dark mode color contrast issue
docs(readme): update UI configuration guide
```
## 📄 许可证
本项目采用 [MIT License](LICENSE) 开源协议。
## 🙏 致谢
感谢以下开源项目和贡献者：
- [Flutter](https://flutter.dev/) - Google的跨平台UI框架
- [Riverpod](https://riverpod.dev/) - 现代化状态管理解决方案
- [Material Design](https://material.io/) - Google的设计系统
- [SharedPreferences](https://pub.dev/packages/shared_preferences) - 本地存储解决方案
- 所有为项目贡献代码和建议的开发者们
## 📞 联系我们
- **项目主页**: [GitHub Repository](https://github.com/your-username/home-assistant-flutter)
- **问题反馈**: [GitHub Issues](https://github.com/your-username/home-assistant-flutter/issues)
- **功能建议**: [GitHub Discussions](https://github.com/your-username/home-assistant-flutter/discussions)
- **邮箱联系**: homeassistant.flutter@example.com
---
**🎨 体验完整的UI配置系统：`flutter run lib/main_ui_settings.dart`**
**⭐ 如果这个项目对你有帮助，请给我们一个Star！**
Made with ❤️ by Home Assistant Flutter Team