refactor(store): split gatewayStore into specialized domain stores
Major restructuring: - Split monolithic gatewayStore into 5 focused stores: - connectionStore: WebSocket connection and gateway lifecycle - configStore: quickConfig, workspaceInfo, MCP services - agentStore: clones, usage stats, agent management - handStore: hands, approvals, triggers, hand runs - workflowStore: workflows, workflow runs, execution - Update all components to use new stores with selector pattern - Remove
This commit is contained in:
153
plans/mossy-dreaming-umbrella.md
Normal file
153
plans/mossy-dreaming-umbrella.md
Normal file
@@ -0,0 +1,153 @@
|
||||
# ZCLAW Store 优化实施计划
|
||||
|
||||
## Context
|
||||
|
||||
ZCLAW 项目正在从 monolithic `gatewayStore.ts` 迁移到 domain-specific stores。当前存在以下问题:
|
||||
1. `useCompositeStore` 是死代码(0 处使用),订阅 59 个状态
|
||||
2. 34 处组件仍使用 `useGatewayStore` 兼容层
|
||||
3. 部分组件已迁移,部分仍需迁移
|
||||
4. 存在未使用的类型定义
|
||||
|
||||
**目标**: 清理死代码,逐步迁移组件到 domain stores,减少不必要的 re-render。
|
||||
|
||||
---
|
||||
|
||||
## Phase 1: 死代码清理 (5 min)
|
||||
|
||||
### 1.1 删除 useCompositeStore
|
||||
**文件**: `desktop/src/store/index.ts`
|
||||
- 删除第 92-284 行的 `useCompositeStore` 函数
|
||||
- 保留 `initializeStores` 和 re-exports
|
||||
|
||||
### 1.2 删除未使用类型
|
||||
**文件**: `desktop/src/store/gatewayStore.ts`
|
||||
- 删除 `HandRunStore`, `ScheduledJob`, `EventTrigger`, `RunHistoryEntry`
|
||||
|
||||
**验证**:
|
||||
```bash
|
||||
pnpm tsc --noEmit && pnpm vitest run
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: 简单组件迁移 (30 min)
|
||||
|
||||
### 2.1 只读状态组件
|
||||
|
||||
| 组件 | 迁移到 |
|
||||
|------|--------|
|
||||
| `components/Sidebar.tsx` | `useConfigStore` |
|
||||
| `components/Settings/SecurityStatus.tsx` | `useSecurityStore` |
|
||||
| `components/Settings/AuditLogsPanel.tsx` | `useSecurityStore` |
|
||||
| `components/Settings/SecurityLayersPanel.tsx` | `useSecurityStore` |
|
||||
| `components/Settings/UsageStats.tsx` | `useAgentStore` |
|
||||
|
||||
### 2.2 迁移模式
|
||||
|
||||
**Before**:
|
||||
```typescript
|
||||
const userName = useGatewayStore((state) => state.quickConfig.userName);
|
||||
```
|
||||
|
||||
**After**:
|
||||
```typescript
|
||||
import { useConfigStore } from '../store/configStore';
|
||||
const userName = useConfigStore((s) => s.quickConfig?.userName) || '用户';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Phase 3: 单一领域组件迁移 (45 min)
|
||||
|
||||
| 组件 | 迁移到 |
|
||||
|------|--------|
|
||||
| `components/HandList.tsx` | `useHandStore` |
|
||||
| `components/ApprovalsPanel.tsx` | `useHandStore` |
|
||||
| `components/TriggersPanel.tsx` | `useHandStore` |
|
||||
| `components/WorkflowList.tsx` | `useWorkflowStore` |
|
||||
| `components/WorkflowHistory.tsx` | `useWorkflowStore` |
|
||||
|
||||
---
|
||||
|
||||
## Phase 4: 复杂组件迁移 (40 min)
|
||||
|
||||
### 4.1 App.tsx
|
||||
**当前**:
|
||||
```typescript
|
||||
const { connect, hands, approveHand, loadHands } = useGatewayStore();
|
||||
```
|
||||
|
||||
**迁移到**:
|
||||
```typescript
|
||||
import { useConnectionStore } from '../store/connectionStore';
|
||||
import { useHandStore } from '../store/handStore';
|
||||
|
||||
const connect = useConnectionStore((s) => s.connect);
|
||||
const hands = useHandStore((s) => s.hands);
|
||||
const approveHand = useHandStore((s) => s.approveHand);
|
||||
const loadHands = useHandStore((s) => s.loadHands);
|
||||
```
|
||||
|
||||
### 4.2 CloneManager.tsx → `useAgentStore`
|
||||
### 4.3 HandTaskPanel.tsx → 统一使用 `useHandStore`
|
||||
|
||||
---
|
||||
|
||||
## Phase 5: 测试与验证 (30 min)
|
||||
|
||||
### 5.1 运行现有测试
|
||||
```bash
|
||||
pnpm vitest run
|
||||
```
|
||||
|
||||
### 5.2 手动验证
|
||||
```bash
|
||||
pnpm start:dev
|
||||
```
|
||||
验证点:
|
||||
- [ ] App 启动正常,连接 Gateway
|
||||
- [ ] 聊天功能正常
|
||||
- [ ] Hands 触发和审批正常
|
||||
- [ ] Workflows 执行正常
|
||||
- [ ] 设置页面正常
|
||||
|
||||
### 5.3 类型检查
|
||||
```bash
|
||||
pnpm tsc --noEmit
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 关键文件
|
||||
|
||||
| 文件 | 操作 |
|
||||
|------|------|
|
||||
| `desktop/src/store/index.ts` | 删除 useCompositeStore |
|
||||
| `desktop/src/store/gatewayStore.ts` | 删除未使用类型,标记 @deprecated |
|
||||
| `desktop/src/App.tsx` | 迁移到 domain stores |
|
||||
| `desktop/src/components/Sidebar.tsx` | 迁移到 useConfigStore |
|
||||
| `desktop/src/components/HandList.tsx` | 迁移到 useHandStore |
|
||||
| `desktop/src/components/WorkflowList.tsx` | 迁移到 useWorkflowStore |
|
||||
|
||||
---
|
||||
|
||||
## 风险与缓解
|
||||
|
||||
| 风险 | 缓解措施 |
|
||||
|------|----------|
|
||||
| 迁移后功能异常 | 每个组件迁移后立即手动测试 |
|
||||
| 类型错误 | 严格 TypeScript 检查 |
|
||||
| Post-connect 逻辑丢失 | connectionStore 已有协调逻辑 |
|
||||
|
||||
---
|
||||
|
||||
## 预计时间
|
||||
|
||||
| 阶段 | 时间 |
|
||||
|------|------|
|
||||
| Phase 1: 死代码清理 | 5 min |
|
||||
| Phase 2: 简单组件 | 30 min |
|
||||
| Phase 3: 单一领域 | 45 min |
|
||||
| Phase 4: 复杂组件 | 40 min |
|
||||
| Phase 5: 测试验证 | 30 min |
|
||||
| **总计** | **~2.5 h** |
|
||||
Reference in New Issue
Block a user