46 lines
1.7 KiB
Markdown
46 lines
1.7 KiB
Markdown
|
# Heqi Mobile Design System
|
|||
|
|
|
|||
|
|
`heqi_design_system` 是用户端与服务人员端共用的 Flutter Design System。它只负责视觉 Token、Material 3 主题和无业务状态的基础组件，不包含 API、权限、金额、状态机或领域判断。
|
|||
|
|
|
|||
|
|
## 使用方式
|
|||
|
|
|
|||
|
|
业务 App 通过本地 path dependency 引用：
|
|||
|
|
|
|||
|
|
```yaml
|
|||
|
|
dependencies:
|
|||
|
|
heqi_design_system:
|
|||
|
|
path: ../heqi_design_system
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```dart
|
|||
|
|
import 'package:heqi_design_system/heqi_design_system.dart';
|
|||
|
|
|
|||
|
|
MaterialApp.router(
|
|||
|
|
theme: HeqiTheme.light(HeqiBrand.consumer),
|
|||
|
|
darkTheme: HeqiTheme.dark(HeqiBrand.consumer),
|
|||
|
|
themeMode: ThemeMode.system,
|
|||
|
|
);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 公共 API
|
|||
|
|
|
|||
|
|
- `HeqiColors`：品牌色与安全语义色。
|
|||
|
|
- `HeqiSpacing`：4dp 间距网格。
|
|||
|
|
- `HeqiRadius`：圆角层级。
|
|||
|
|
- `HeqiSize`：触控区、按钮、导航和内容宽度。
|
|||
|
|
- `HeqiMotion`：150/220/300ms 动效节奏。
|
|||
|
|
- `HeqiBreakpoints`：紧凑、中等、展开布局断点。
|
|||
|
|
- `HeqiTheme`：用户端与服务端的亮色/暗色 Material 3 主题。
|
|||
|
|
- `HeqiGutter`、`HeqiSurfaceSection`、`HeqiSectionHeader`：页面布局原语。
|
|||
|
|
- `HeqiStatusPill`、`HeqiMessageState`：语义状态与空/错状态。
|
|||
|
|
|
|||
|
|
## 变更规则
|
|||
|
|
|
|||
|
|
1. 新颜色、间距、圆角或动效必须先进入 Token，不得在业务页面直接写常量。
|
|||
|
|
2. 安全、资金、设备命令等业务状态仍由服务端决定；Design System 只负责展示映射。
|
|||
|
|
3. 公共组件不得依赖任一 App 的 Domain/Data 包。
|
|||
|
|
4. 破坏性 API 变更提升主版本；新增兼容 Token/组件提升次版本；视觉修复提升补丁版本。
|
|||
|
|
5. 更新后必须分别执行两个 App 的 `flutter analyze`、`flutter test` 和构建检查。
|
|||
|
|
|
|||
|
|
完整设计规范见 [`docs/13-移动端Design-System.md`](../../docs/13-移动端Design-System.md)。
|