26 KiB
AtomUI.Core 项目架构文档
1. 项目概述
AtomUI.Core 是 AtomUI 组件库的核心基础框架,构建于 Avalonia UI 之上。它提供了完整的 主题系统(Theme System)、Design Token 体系、动效引擎(Motion Scene)、国际化(i18n) 以及一系列基础设施工具,为上层控件库(如 AtomUI.Controls、AtomUI.Desktop.Controls 等)提供统一的底层支撑。
设计哲学借鉴了 Ant Design 的 Design Token 体系,实现了主题的可定制、可扩展、可切换的能力。
依赖关系
AtomUI.Core
├── Avalonia (UI 框架)
├── ReactiveUI.Avalonia (响应式 MVVM)
├── System.Reactive (响应式扩展)
├── AtomUI.Generator (源代码生成器,仅 Analyzer)
└── AtomUI.Native (原生平台交互)
InternalsVisibleTo
以下项目可访问 AtomUI.Core 的 internal 成员:
AtomUI.ControlsAtomUI.Controls.SharedAtomUI.Desktop.ControlsAtomUI.Desktop.Controls.DataGridAtomUI.Desktop.Controls.ColorPicker
2. 目录结构总览
AtomUI.Core/
├── ApplicationExtensions.cs # Application 扩展方法(UseAtomUI 入口)
├── AtomUIRuntimeInfo.cs # 运行时信息
├── Common.cs # 公共常量与日志区域定义
├── Dimension.cs # 尺寸相关定义
├── OperatingSystemType.cs # 操作系统类型枚举
├── StdPseudoClass.cs # 标准伪类常量
│
├── Animations/ # 动画基础设施
│ ├── Transitions/ # 可通知的 Transition 实现
│ └── ... # 动画辅助工具
│
├── Assets/ # 内嵌资源
│ └── Themes/ # 内置主题定义文件 (XML)
│
├── Collections/ # 集合工具类
│ └── Pooled/ # 对象池化集合
│
├── Controls/ # 核心控件基础设施
│ └── Icon/ # Icon 系统
│
├── Data/ # 数据绑定工具
├── Exceptions/ # 自定义异常
├── Input/ # 输入处理
├── Language/ # 国际化 (i18n) 系统
├── Media/ # 图形与媒体工具
│ └── TextFormatting/ # 文本排版
│
├── MotionScene/ # 动效引擎
├── Reactive/ # 响应式扩展
├── Reflection/ # 反射工具
│
├── Theme/ # 🔑 主题系统(核心)
│ ├── Palette/ # 调色板生成器
│ ├── Styling/ # 主题变体计算器
│ └── TokenSystem/ # Design Token 体系
│ └── TokenDefinitions/ # 全局 Token 定义(Seed/Map/Alias)
│
└── Utils/ # 通用工具类
3. 核心模块架构
3.1 主题系统 (Theme)
主题系统是 AtomUI.Core 的核心,实现了完整的主题生命周期管理,包括创建、加载、激活、切换和卸载。
3.1.1 整体架构
┌─────────────────────────────────────────────────────┐
│ Application │
│ │
│ app.UseAtomUI(builder => { ... }) │
│ │ │
│ ▼ │
│ ┌─────────────────────┐ │
│ │ ThemeManagerBuilder │ ── 构建器模式 │
│ │ (IThemeManagerBuilder)│ │
│ └────────┬────────────┘ │
│ │ .Build() │
│ ▼ │
│ ┌─────────────────────┐ ┌──────────────────┐ │
│ │ ThemeManager │───▶│ Theme (N个) │ │
│ │ (IThemeManager) │ │ (ITheme) │ │
│ │ │ └───────┬──────────┘ │
│ │ - 主题池管理 │ │ │
│ │ - 主题切换 │ ▼ │
│ │ - 语言管理 │ ┌──────────────────┐ │
│ │ - 动效开关 │ │ DesignToken │ │
│ │ - ResourceDictionary │ │ (SharedToken) │ │
│ └─────────────────────┘ │ ControlTokens │ │
│ └──────────────────┘ │
└─────────────────────────────────────────────────────┘
3.1.2 关键接口与类
| 类/接口 | 职责 |
|---|---|
IThemeManager |
主题管理器公共接口,定义主���切换、语言、动效等属性 |
ThemeManager |
主题管理器实现,继承 Styles,管理主题池、控件主题、语言资源 |
IThemeManagerBuilder |
主题管理器构建器接口(Builder 模式) |
ThemeManagerBuilder |
构建器实现,收集 Token、主题提供者、语言提供者,最终 Build() 出 ThemeManager |
ITheme |
主题公共接口,包含 ID、显示名、暗色模式、Token 等 |
Theme |
主题实现,负责加载主题定义文件、构建资源字典 |
ThemeDefinition |
主题定义数据模型(从 XML 文件解析) |
ThemeDefinitionReader |
主题定义文件(XML)解析器 |
ThemeAlgorithm |
主题算法枚举:Default / Dark / Compact |
BaseControlTheme |
控件主题基类,定义控件模板、样式的构建流程 |
IControlThemesProvider |
控件主题提供者接口 |
IThemeAssetPathProvider |
主题资产路径提供者接口 |
3.1.3 主题生命周期
扫描主题文件 (XML)
│
▼
创建 Theme 实例 ──▶ ThemeCreated 事件
│
▼
注册到 ThemePool (ThemeVariant → Theme)
│
▼
加载 Theme ──▶ ThemeAboutToLoad → 解析定义文件 → 构建资源 → ThemeLoaded
│
▼
激活 Theme ──▶ ThemeAboutToChange → 切换 ResourceDictionary → ThemeChanged
│
▼
运行中 (Active)
│
▼
切换/卸载 ──▶ NotifyAboutToDeActive → NotifyDeActivated
3.1.4 主题算法组合
每个主题定义文件可以生成 4 种变体:
| 组合 | ThemeVariant ID 示例 |
|---|---|
| Default | DaybreakBlue |
| Default + Dark | DaybreakBlue-Dark |
| Default + Dark + Compact | DaybreakBlue-Dark-Compact |
| Default + Compact | DaybreakBlue-Compact |
3.2 Design Token 体系 (TokenSystem)
借鉴 Ant Design 的 Design Token 分层体系,将设计变量分为三个层级。
3.2.1 Token 分层
┌────────────────────────────────────────────┐
│ Seed Token (种子令牌) │
│ colorPrimary, fontSize, borderRadius ... │
│ 用户可自定义的基础设计变量 │
└────────────────────┬───────────────────────┘
│ ThemeVariantCalculator 计算
▼
┌────────────────────────────────────────────┐
│ Map Token (梯度令牌) │
│ colorPrimaryHover, fontSizeLG ... │
│ 由 Seed Token 经过算法派生 │
└────────────────────┬───────────────────────┘
│ CalculateAliasTokenValues()
▼
┌────────────────────────────────────────────┐
│ Alias Token (别名令牌) │
│ colorText, colorBgContainer ... │
│ 语义化的 Token,直接用于组件样式 │
└────────────────────────────────────────────┘
3.2.2 Token 类型
| 类型 | 描述 |
|---|---|
DesignToken (SharedToken) |
全局共享 Token,包含 Seed、Map、Alias 三层 |
AbstractControlDesignToken |
控件专属 Token 基类,每个控件可定义自己的 Token |
DesignTokenKind |
Token 分类枚举:Seed、Map、Alias |
3.2.3 Token 定义文件
TokenDefinitions/ 目录按 Token 类别使用 partial class 组织 DesignToken:
| 文件 | 内容 |
|---|---|
DesignToken.Seed.cs |
种子令牌(colorPrimary 等) |
DesignToken.FontMap.cs |
字体梯度令牌 |
DesignToken.HeightMap.cs |
高度梯度令牌 |
DesignToken.SizeMap.cs |
尺寸梯度令牌 |
DesignToken.StyleMap.cs |
样式梯度令牌 |
DesignToken.ColorMap.cs |
颜色梯度令牌 |
DesignToken.ColorPrimaryMap.cs |
主色系梯度令牌 |
DesignToken.ColorSuccessMap.cs |
成功色系梯度令牌 |
DesignToken.ColorWarningMap.cs |
警告色系梯度令牌 |
DesignToken.ColorErrorMap.cs |
错误色系梯度令牌 |
DesignToken.ColorInfoMap.cs |
信息色系梯度令牌 |
DesignToken.ColorLinkMap.cs |
链接色系梯度令牌 |
DesignToken.ColorNeutralMap.cs |
中性色系梯度令牌 |
DesignToken.Alias.cs |
别名令牌 |
3.2.4 Token 资源构建流程
1. 加载 Seed Token 配置 (XML → LoadConfig)
2. ThemeVariantCalculator.Calculate() 计算 Map Token
3. 覆盖用户自定义 Map Token
4. CalculateAliasTokenValues() 计算 Alias Token
5. 覆盖用户自定义 Alias Token
6. BuildResourceDictionary() → 注入 Avalonia ResourceDictionary
7. 对每个 ControlToken 重复类似流程
3.3 主题变体计算器 (Styling)
负责根据不同的主题算法计算 Token 值。采用 装饰器/链式模式,支持算法叠加。
┌──────────────────────────┐
│ IThemeVariantCalculator │ ◀── 接口
├──────────────────────────┤
│ Calculate(DesignToken) │
│ ColorBgBase │
│ ColorTextBase │
└──────────┬───────────────┘
│
┌─────┼──────────────┬───────────────────┐
▼ ▼ ▼ ▼
Default Dark Compact IThemeVariantCalculatorFactory
Calculator Calculator Calculator (可自定义工厂)
| 类 | 职责 |
|---|---|
DefaultThemeVariantCalculator |
默认(亮色)算法 |
DarkThemeVariantCalculator |
暗色算法,装饰 base calculator |
CompactThemeVariantCalculator |
紧凑算法,装饰 base calculator |
IThemeVariantCalculatorFactory |
自定义计算器工厂接口 |
3.4 调色板系统 (Palette)
实现了与 Ant Design 一致的调色板生成算法。
PaletteGenerator
├── GeneratePalette(Color, Option) → IReadOnlyList<Color> (10 级色阶)
│ ├── 浅色 5 级 (Light)
│ ├── 主色 1 级 (Primary)
│ └── 深色 4 级 (Dark)
│
├── PresetPalettes → 预设调色板集合
└── PresetPrimaryColor → 预设主色枚举
调色板生成算法基于 HSV 色彩空间,通过色相(Hue)、饱和度(Saturation)、明度(Value)的阶梯变化生成 10 级色阶。暗色模式下使用不同的混合策略。
3.5 动效引擎 (MotionScene)
提供了一套完整的动画/过渡效果框架,支持 Animation 和 Transition 两种驱动模式。
3.5.1 架构
┌─────────────┐ ┌──────────────────┐ ┌─────────────┐
│ IMotion │────▶│ AbstractMotion │────▶│ 具体 Motion │
│ (接口) │ │ (抽象基类) │ │ (Fade/Slide │
└─────────────┘ └──────────────────┘ │ /Zoom/...) │
└─────────────┘
│
│ Run(actor)
▼
┌─────────────┐ ┌──────────────────┐ ┌─────────────┐
│ IMotionActor │────▶│ BaseMotionActor │────▶│ SceneLayer │
│ (接口) │ │ (ContentControl) │ │ (顶层窗口) │
└─────────────┘ └──────────────────┘ └─────────────┘
3.5.2 内置动效
| 类别 | 动效 |
|---|---|
| Fade | FadeInMotion, FadeOutMotion |
| Slide | SlideUpIn/Out, SlideDownIn/Out, SlideLeftIn/Out, SlideRightIn/Out |
| Zoom | ZoomIn/Out, ZoomBigIn/Out, ZoomUpIn/Out, ZoomDownIn/Out, ZoomLeftIn/Out, ZoomRightIn/Out |
| Collapse | CollapseMotions — 折叠/展开动效 |
| Move | MoveMotions — 移动动效 |
3.5.3 动效执行流程
Motion.Run(actor)
│
├─ Transition 模式:
│ 1. ConfigureTransitions() — 配置过渡属性
│ 2. ConfigureMotionStartValue() — 设置起始值
│ 3. actor.Transitions = transitions
│ 4. ConfigureMotionEndValue() — 设置结束值(触发过渡)
│ 5. await Task.WhenAny(...) — 等待完成
│ 6. NotifyCompleted()
│
└─ Animation 模式:
1. ConfigureAnimation() — 配置关键帧动画
2. foreach animation → RunAsync(actor)
3. NotifyCompleted()
3.6 国际化系统 (Language)
提供多语言支持,基于 Avalonia 的 ResourceDictionary 实现。
┌───────────────────────┐
│ ILanguageProvider │ ◀── 接口
├───────────────────────┤
│ LangCode │
│ LangId │
│ BuildResourceDictionary│
└───────────┬───────────┘
│
▼
┌───────────────────────┐ ┌───────────────────┐
│ LanguageProvider │ │ LanguageVariant │
│ (abstract) │ │ (zh_CN, en_US ...) │
├───────────────────────┤ └───────────────────┘
│ @LanguageProviderAttr │
│ GetResourceKindType() │
└───────────────────────┘
│
▼
ThemeManager._languages
Dict<LanguageVariant, ResourceDictionary>
关键类
| 类 | 职责 |
|---|---|
LanguageVariant |
语言变体标识(如 zh_CN、en_US) |
LanguageCode |
语言代码枚举 |
LanguageProvider |
语言提供者抽象基类 |
LanguageProviderAttribute |
语言提供者元数据注解 |
LanguageResourceExtension |
XAML 语言资源标记扩展 |
3.7 Icon 系统 (Controls/Icon)
提供可扩展的矢量图标框架。
┌──────────────────┐ ┌────────────────────────┐
│ Icon │ │ IconProvider<TIconKind> │
│ (abstract) │ │ (MarkupExtension) │
│ extends PathIcon│ │ 泛型 XAML 标记扩展 │
├──────────────────┤ └────────────────────────┘
│ StrokeBrush │ │
│ FillBrush │ │ ProvideValue()
│ IconTheme │ ▼
│ LoadingAnimation │ ┌────────────────────────┐
│ Render() │ │ IconProviderCache │
└──────────────────┘ │ (Expression Tree 缓存) │
└────────────────────────┘
特性:
- 支持多主题类型:
Filled、Outlined、Rounded、Sharp等 - 支持旋转动画(Spin/Pulse)
- 支持颜色过渡动画
- 使用
Expression Tree编译缓存优化图标实例创建性能 - 自定义渲染(
DrawingInstruction指令系统)
3.8 动画基础设施 (Animations)
3.8.1 Notifiable Transitions
提供了一整套带完成通知的 Transition 实现,解决了 Avalonia 原生 Transition 缺少完成回调的问题。
INotifyTransitionCompleted
└── AbstractNotifiableTransition<T>
├── NotifiableDoubleTransition
├── NotifiableBoolTransition
├── NotifiableCornerRadiusTransition
├── NotifiableThicknessTransition
├── NotifiablePointTransition
├── NotifiableSizeTransition
├── NotifiableFloatTransition
├── NotifiableIntegerTransition
├── NotifiableRelativePointTransition
├── NotifiableVectorTransition
├── NotifiableBoxShadowsTransition
├── NotifiableTransformOperationsTransition
├── SolidColorBrushTransition
└── BoxShadowsTransition
3.8.2 工具类
| 类 | 职责 |
|---|---|
AnimationExtensions |
动画相关扩展方法 |
BaseTransitionUtils |
Transition 创建工厂方法 |
InterpolateUtils |
插值计算工具 |
3.9 数据绑定工具 (Data)
| 类 | 职责 |
|---|---|
BindUtils |
通用绑定辅助 |
TokenResourceBinder |
Token 资源绑定器,将 Design Token 绑定到控件属性 |
LanguageResourceBinder |
语言资源绑定器 |
TokenResourceUtils |
Token 资源查找工具 |
TokenFinderUtils |
Token 查找工具 |
RenderScaleAwareDoubleConfigure |
渲染缩放感知的 double 配置 |
InstancedBindingFactory |
实例化绑定工厂 |
3.10 媒体与图形 (Media)
| 类 | 职责 |
|---|---|
ColorUtils |
颜色工具(HSV/RGB 转换等) |
ColorExtensions |
Color 扩展方法 |
GeometryUtils |
几何图形工具 |
CommonShapeBuilder |
常用形状构建器 |
FontUtils |
字体工具 |
PenUtils |
画笔工具 |
TextUtils |
文本工具 |
DrawingContextExtensions |
DrawingContext 扩展 |
BoxShadowExtensions |
盒阴影扩展 |
TransformParser |
变换解析器 |
ColorTransition |
颜色过渡 |
PixelPointTransition |
像素点过渡 |
RectTransition |
矩形区域过渡 |
3.11 工具类 (Utils)
| 类 | 职责 |
|---|---|
MathUtils |
数学工具(浮点比较、四舍五入等) |
MatrixUtils |
矩阵计算工具 |
BorderUtils |
边框计算工具 |
StringUtils |
字符串工具 |
StringBuilderCache |
StringBuilder 缓存池 |
SpanStringTokenizer |
高性能字符串分词器 |
EnumExtensions |
枚举扩展方法 |
TypeHelper |
类型辅助 |
AssetsBitmapLoader |
资源位图加载器 |
MotionAwareControlExtensions |
动效感知控件扩展 |
3.12 集合 (Collections)
| 类 | 职责 |
|---|---|
ItemCollection |
项目集合 |
ItemsSourceView |
数据源视图 |
CollectionChangedEventManager |
集合变更事件管理器 |
ICollectionChangedListener |
集合变更监听接口 |
PooledList<T> |
对象池化 List(减少 GC 压力) |
PooledStack<T> |
对象池化 Stack |
4. 应用入口与初始化流程
// Program.cs
app.UseAtomUI(builder =>
{
builder.WithDefaultTheme("DaybreakBlue");
builder.WithDefaultLanguageVariant(LanguageVariant.zh_CN);
builder.WithDefaultFontFamily("Microsoft YaHei");
builder.AddControlToken(typeof(MyControlToken));
builder.AddControlThemesProvider(new MyThemesProvider());
builder.AddLanguageProviders(new MyLanguageProvider());
});
初始化流程:
UseAtomUI()
│
├── 1. 创建 ThemeManagerBuilder
├── 2. 用户配置(Token、主题、语言等)
├── 3. builder.Build() → ThemeManager
│ ├── 注册 ControlThemesProvider
│ ├── 注册 ControlTokenTypes
│ ├── 注册 ThemeAssetPathProviders
│ └── 注册 LanguageProviders
├── 4. themeManager.Configure()
│ ├── ScanThemes()(扫描并创建所有主题变体)
│ ├── 合并控件主题资源
│ └── BuildLanguageResources()
├── 5. AvaloniaLocator 注册 ThemeManager
├── 6. NotifyInitialized()
├── 7. 设置 RequestedThemeVariant
├── 8. 设置 LanguageVariant
└── 9. AttachApplication()(绑定到 Application.Styles)
5. 类关系图
┌──────────────────────┐
│ ApplicationExtensions│
│ UseAtomUI() │
└──────────┬───────────┘
│
┌──────────────▼──────────────┐
│ ThemeManagerBuilder │
│ (IThemeManagerBuilder) │
└──────────────┬──────────────┘
│ Build()
┌──────────────▼──────────────┐
│ ThemeManager │
│ (IThemeManager) │
│ extends Styles │
├─────────────────────────────┤
│ ThemeVariant │
│ LanguageVariant │
│ IsMotionEnabled │
│ IsDarkThemeMode │
│ IsCompactThemeMode │
└──────┬──────────┬───────────┘
│ │
┌────────────▼──┐ ┌────▼───────────────┐
│ Theme (N) │ │ LanguageProvider(N) │
│ (ITheme) │ │ (ILanguageProvider) │
├───────────────┤ └────────────────────┘
│ SharedToken │
│ ControlTokens │
│ ThemeResource │
└──┬────────┬──┘
│ │
┌───────────▼──┐ ┌──▼──────────────────────┐
│ DesignToken │ │ AbstractControlDesignToken│
│ (Shared) │ │ (per-control Token) │
│ Seed/Map/Alias│ └──────────────────────────┘
└───────────────┘
│
│ Calculate()
▼
┌─────────────────────────┐
│ IThemeVariantCalculator │
├─────────────────────────┤
│ DefaultCalculator │
│ DarkCalculator │
│ CompactCalculator │
└─────────────────────────┘
6. 设计亮点
- Design Token 三层体系 — Seed → Map → Alias 的分层推导,兼顾灵活性与一致性
- 主题算法装饰器模式 — Default/Dark/Compact 算法可链式叠加
- 主题热切换 — 运行时切换主题,通过
ResourceDictionary的ThemeDictionaries实现 - Notifiable Transitions — 解决 Avalonia 原生 Transition 无法感知完成的问题
- 动效引擎双模式 — 同时支持 Animation(关键帧)和 Transition(属性过渡)两种驱动
- Icon 性能优化 — Expression Tree 编译缓存,避免反复反射创建实例
- Builder 模式初始化 — 清晰的初始化流程,易于扩展和测试
- 对象池化集合 —
PooledList/PooledStack减少 GC 压力