前端架构

技术栈

• React 19 (app/src/)
• Redux Toolkit + Redux-Persist（会话状态）
• Vite（构建工具）
• TypeScript / TSX（约 285 个文件）

目录结构

app/src/
├── App.tsx                 # Provider 链 + HashRouter
├── AppRoutes.tsx           # 路由表 + 守卫
├── main.tsx                # 入口（Sentry、store、styles）
├── store/                  # Redux slices 和 selectors
├── providers/              # UserProvider、SocketProvider、AIProvider、SkillProvider
├── services/               # apiClient、socketService、coreRpcClient
├── lib/                    # AI loaders、MCP helpers
├── pages/                  # 路由级屏幕
├── components/             # 共享 UI 组件
├── hooks/                  # 应用 hooks
└── utils/                  # 配置、Tauri helpers

Provider 链

Redux Provider
  └─ PersistGate
      └─ UserProvider
          └─ SocketProvider
              └─ AIProvider
                  └─ SkillProvider
                      └─ HashRouter

为什么是这个顺序：

1. Redux 最外层提供 useAppSelector/dispatch
2. PersistGate 在子级依赖认证前重hydrate
3. SocketProvider 使用 JWT
4. AIProvider/SkillProvider 依赖 socket 和 store

服务层

服务	用途
apiClient	REST 到后端
socketService	Socket.io 实时通信
coreRpcClient	HTTP 到本地 openhuman 核心（JSON-RPC）

状态管理

Redux 状态结构：

RootState = {
  auth: { token, isOnboardedByUser },
  socket: { byUser: { status, socketId } },
  user: { profile, loading, error },
  telegram: { byUser: { ... } },
};

持久化

持久化： auth.token、auth.isOnboardedByUser、telegram.byUser 不持久化： socket 连接状态、user.loading

路由

使用 HashRouter：

路由	说明
/	Welcome（公开）
/onboarding/*	引导流程
/home	主仪表板（需认证）
/settings/*	设置模态

组件

连接状态组件

• ConnectionIndicator - 通用连接状态
• TelegramConnectionIndicator - Telegram 状态
• TelegramConnectionModal - 连接设置模态

设置模态系统

/settings → SettingsHome
/settings/connections → ConnectionsPanel
/settings/privacy → PrivacyPanel

下一步

• Tauri Shell - 桌面主机
• 架构概览 - 完整系统架构