系统架构
Alius Agent Team 采用现代化的分层架构设计,充分利用了 Tauri 2 的跨平台能力和 React 19 的声明式 UI 优势。本章将深入介绍系统的整体架构设计。
架构概览
Alius Agent Team 的架构可以分为以下几个层次:
┌─────────────────────────────────────────┐
│ 用户界面层 (UI Layer) │
│ React 19 + TypeScript + CSS Modules │
└─────────────────┬───────────────────────┘
│
┌─────────────────▼───────────────────────┐
│ 状态管理层 (State Management) │
│ Zustand / Redux Toolkit (规划中) │
└─────────────────┬───────────────────────┘
│
┌─────────────────▼───────────────────────┐
│ 核心业务逻辑层 (Core Logic) │
│ Agent 管理 / 任务编排 / 团队管理 │
└─────────────────┬───────────────────────┘
│
┌─────────────────▼───────────────────────┐
│ Tauri 后端层 (Backend Layer) │
│ Rust + Tauri 2 Core + Plugin System │
└─────────────────┬───────────────────────┘
│
┌─────────────────▼───────────────────────┐
│ 平台抽象层 (Platform Abstraction) │
│ Windows / macOS / Linux / iOS / Pad │
└─────────────────────────────────────────┘
前端架构
React 19 应用架构
前端采用 React 19 构建,充分利用了 React 19 的新特性:
- Server Components(规划中):减少客户端 bundle 大小
- Concurrent Features:提供流畅的用户体验
- Suspense 改进:更细粒度的加载状态控制
- use() Hook:简化异步数据获取
组件设计原则
src/
├── components/ # 通用组件
│ ├── ui/ # 基础 UI 组件
│ ├── layout/ # 布局组件
│ └── feature/ # 功能特定组件
├── pages/ # 页面组件
├── hooks/ # 自定义 Hooks
├── stores/ # 状态管理
├── services/ # API 服务
├── utils/ # 工具函数
└── types/ # TypeScript 类型定义
响应式设计架构
Alius Agent Team 采用移动优先的响应式设计:
- Desktop:>= 1024px,完整功能布局
- Tablet:768px - 1023px,适配触控的布局
- Phone:< 768px,精简高效的移动布局
响应式断点管理:
export const BREAKPOINTS = {
phone: 0,
tablet: 768,
desktop: 1024,
wide: 1440,
} as const;
Tauri 2 后端架构
为什么选择 Tauri 2
Alius Agent Team 选择 Tauri 2 作为桌面端框架,主要基于以下考虑:
- 体积小:最终应用体积通常 < 10MB(对比 Electron 的 > 100MB)
- 性能好:Rust 后端提供接近原生的性能
- 安全:Rust 的内存安全保证
- 跨平台:一套代码运行在 Windows、macOS、Linux、iOS 和 Android
Tauri 核心架构
┌─────────────────────────────────────┐
│ WebView (前端 UI) │
│ HTML/CSS/JS - React 渲染 │
└──────────────┬──────────────────────┘
│ HTTP / WebSocket
┌──────────────▼──────────────────────┐
│ Tauri Core (Rust) │
│ ┌─────────────────────────────┐ │
│ │ Command Handler │ │
│ ├─────────────────────────────┤ │
│ │ Event System │ │
│ ├─────────────────────────────┤ │
│ │ Plugin System │ │
│ └─────────────────────────────┘ │
└──────────────┬──────────────────────┘
│ FFI / System APIs
┌──────────────▼──────────────────────┐
│ 操作系统原生能力 │
│ 文件系统 / 网络 / 进程管理 等 │
└─────────────────────────────────────┘
核心插件系统
Tauri 2 的插件系统允许我们扩展核心功能:
@tauri-apps/plugin-store:持久化存储@tauri-apps/plugin-http:HTTP 客户端@tauri-apps/plugin-notification:系统通知@tauri-apps/plugin-autostart:开机自启动- 自定义插件:Agent 通信、Watch 同步等
数据模型设计
核心实体关系
User 1──┐
├──* Agent
├──* Team (成员)
└──* Notification
Agent 1──┐
├──* Task (任务)
├──* Session (会话)
└──* Team (所属团队)
Team 1──* Agent (团队中的 Agent)
Team 1──* User (团队成员)
Task 1──1 Agent (执行者)
Task 1──* Session (关联会话)
Session 1──1 Agent (所属 Agent)
Session 1──* Task (会话中的任务)
详细数据模型
Agent 模型
interface Agent {
id: string;
name: string;
description: string;
type: AgentType;
status: AgentStatus;
config: AgentConfig;
createdAt: string;
updatedAt: string;
ownerId: string;
teamId?: string;
tags: string[];
health: HealthStatus;
}
enum AgentStatus {
Active = "active",
Inactive = "inactive",
Error = "error",
Maintenance = "maintenance"
}
enum AgentType {
General = "general",
CodeGen = "codegen",
DataAnalysis = "data_analysis",
Custom = "custom"
}
Task 模型
interface Task {
id: string;
title: string;
description: string;
status: TaskStatus;
priority: Priority;
agentId: string;
createdBy: string;
createdAt: string;
updatedAt: string;
completedAt?: string;
result?: TaskResult;
attachments?: Attachment[];
}
enum TaskStatus {
Pending = "pending",
Running = "running",
Completed = "completed",
Failed = "failed",
Cancelled = "cancelled"
}
Team 模型
interface Team {
id: string;
name: string;
description: string;
members: TeamMember[];
agents: string[]; // Agent IDs
createdAt: string;
updatedAt: string;
settings: TeamSettings;
}
interface TeamMember {
userId: string;
role: TeamRole;
joinedAt: string;
}
enum TeamRole {
Owner = "owner",
Admin = "admin",
Member = "member",
Viewer = "viewer"
}
API 架构
REST API 设计
Alius Agent Team 提供 34+ REST API 端点,遵循 RESTful 设计原则:
/api/v1/
├── auth/ # 认证相关
│ ├── login/sms
│ ├── login/apple
│ ├── login/wechat
│ └── refresh
├── agents/ # Agent 管理
│ ├── GET /
│ ├── POST /
│ ├── GET /:id
│ ├── PUT /:id
│ ├── DELETE /:id
│ └── POST /:id/actions/start
├── tasks/ # 任务管理
├── teams/ # 团队管理
├── sessions/ # 会话管理
├── notifications/ # 通知管理
└── users/ # 用户管理
实时通信
除了 REST API,系统还支持实时通信:
- WebSocket:用于实时任务状态更新
- Server-Sent Events (SSE):用于通知推送
- Tauri Event System:用于前端与后端的实时通信
跨平台实现
代码共享策略
src/
├── core/ # 纯逻辑代码(跨平台共享)
│ ├── types/ # 类型定义
│ ├── utils/ # 工具函数
│ └── services/ # 业务逻辑
├── platform/
│ ├── desktop/ # 桌面端特定代码
│ ├── mobile/ # 移动端特定代码
│ └── watch/ # Watch 特定代码
└── shared/ # 共享 UI 组件
平台检测与适配
export const Platform = {
isDesktop: () => typeof window !== 'undefined' && !isMobile(),
isMobile: () => /Android|iPhone|iPad|iPod/i.test(navigator.userAgent),
isTablet: () => /iPad|Android(?=.*\bMobile\b)/i.test(navigator.userAgent),
isWatch: () => /AppleWatch/i.test(navigator.userAgent),
OS: {
isWindows: () => /Win/i.test(navigator.userAgent),
isMac: () => /Mac/i.test(navigator.userAgent),
isLinux: () => /Linux/i.test(navigator.userAgent),
isiOS: () => /iPhone|iPad|iPod/i.test(navigator.userAgent),
}
} as const;
安全架构
认证流程
用户 -> 登录请求 -> 服务端验证 -> 返回 Token
|
用户 <- 存储 Token <- 后续请求携带 Token <- 服务端验证 Token
权限控制
采用 RBAC(基于角色的访问控制)模型:
User -> Role -> Permissions -> Resource
权限粒度:
- 资源级别:对特定资源的访问权限
- 操作级别:对资源的特定操作(读、写、删除等)
- 字段级别:对资源特定字段的访问权限(规划中)
性能优化策略
前端性能
- 代码分割:基于路由的懒加载
- 虚拟滚动:处理大量 Agent/任务列表
- 防抖/节流:优化用户输入和滚动事件
- Web Worker:将耗时计算移出主线程
后端性能
- Rust 并发:利用 Rust 的 async/await 和 tokio 运行时
- 连接池:数据库和 HTTP 连接复用
- 缓存策略:常用数据的多级缓存
总结
Alius Agent Team 的架构设计充分考虑了跨平台、高性能和可扩展性。通过 Tauri 2 实现真正的原生跨平台体验,通过 React 19 提供现代化的用户界面,通过合理的分层架构确保代码的可维护性和可测试性。