系统架构

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 作为桌面端框架,主要基于以下考虑:

  1. 体积小:最终应用体积通常 < 10MB(对比 Electron 的 > 100MB)
  2. 性能好:Rust 后端提供接近原生的性能
  3. 安全:Rust 的内存安全保证
  4. 跨平台:一套代码运行在 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 提供现代化的用户界面,通过合理的分层架构确保代码的可维护性和可测试性。