绝尘
998a2f243d
squash合并: - 意图识别层论证(8维度+10业界佐证) - 多主题上下文管理愿景+并存论证+补充论证(多轮agentic) - 架构设计文档物理分类(四子目录+INDEX+命名规范+引用同步+边界清晰化) - 前端架构技术债清单归档
104 lines
3.2 KiB
Markdown
104 lines
3.2 KiB
Markdown
# View 改造指南 — 硬编码到 Store 对接
|
||
|
||
> 创建: 2026-06-10 | 状态: **已归档（2026-06-15）**
|
||
|
||
> ⚠️ **本文档已归档，内容过时，请勿据本文档改造**。Store → IPC 对接的全部内容已收敛到真相源 [`DEVFLOW-3.Store对接实施-2026-06-12.md`](../04-功能迭代/DEVFLOW-3.Store对接实施-2026-06-12.md)。本文档过时点（详见 `docs/05-代码审查/文档全量核对报告-2026-06-15.md` §24）：
|
||
> 1. 「当前问题」四项（数据硬编码 / Store 未接入 / 事件处理空函数 / Arco 未使用）Phase1 已**全部解决**，前端已通过 Store → IPC 对接真实数据。
|
||
> 2. 「涉及页面」表格的页面命名（`ProjectsView`/`TasksView`/`WorkflowView` 等）与实际不符：实际页面**无 `View` 后缀**，且**不存在 `WorkflowView`**（工作流引擎非独立页面）。
|
||
>
|
||
> 本文件保留仅为历史参考，后续以前述 `DEVFLOW-3` 文档为准。
|
||
|
||
---
|
||
|
||
## 概述
|
||
|
||
当前所有 Vue 页面使用硬编码数据 (`ref([...])`)，Pinia Store 和 View 完全独立。本文档指导如何将 View 改造为通过 Store → IPC 获取真实数据。
|
||
|
||
## 当前问题
|
||
|
||
1. **数据硬编码** — 每个 View 用 `ref([...])` 定义假数据
|
||
2. **Store 未接入** — Pinia Store 有 state/getter 但无 action
|
||
3. **事件处理空函数** — 按钮点击绑定 `() => {}`
|
||
4. **Arco Design 未使用** — 仅 CSS 变量覆盖，未引入组件
|
||
|
||
## 改造步骤
|
||
|
||
### Step 1: Store 添加 Actions
|
||
|
||
```typescript
|
||
// stores/projectStore.ts
|
||
import { invoke } from '@tauri-apps/api/core'
|
||
|
||
export const useProjectStore = defineStore('project', () => {
|
||
const projects = ref<Project[]>([])
|
||
|
||
// 新增 action
|
||
async function fetchProjects() {
|
||
projects.value = await invoke<Project[]>('get_projects')
|
||
}
|
||
|
||
async function createProject(input: CreateProjectInput) {
|
||
const project = await invoke<Project>('create_project', { input })
|
||
projects.value.push(project)
|
||
}
|
||
|
||
return { projects, fetchProjects, createProject }
|
||
})
|
||
```
|
||
|
||
### Step 2: View 接入 Store
|
||
|
||
```typescript
|
||
// views/ProjectsView.vue — 改造前
|
||
const projects = ref([
|
||
{ id: '1', name: '项目A', ... }, // 硬编码
|
||
])
|
||
|
||
// views/ProjectsView.vue — 改造后
|
||
const store = useProjectStore()
|
||
const { projects } = storeToRefs(store)
|
||
|
||
onMounted(() => {
|
||
store.fetchProjects()
|
||
})
|
||
```
|
||
|
||
### Step 3: 事件绑定真实操作
|
||
|
||
```typescript
|
||
// 改造前
|
||
const handleCreate = () => {}
|
||
|
||
// 改造后
|
||
const handleCreate = async () => {
|
||
await store.createProject(form)
|
||
modalVisible.value = false
|
||
}
|
||
```
|
||
|
||
### Step 4: 加载与错误状态
|
||
|
||
```vue
|
||
<template>
|
||
<a-spin :loading="store.loading">
|
||
<!-- 内容 -->
|
||
</a-spin>
|
||
</template>
|
||
```
|
||
|
||
## 涉及页面
|
||
|
||
| 页面 | Store | 改造优先级 |
|
||
|------|-------|-----------|
|
||
| ProjectsView | projectStore | P0 |
|
||
| TasksView | taskStore | P0 |
|
||
| WorkflowView | workflowStore | P0 |
|
||
| IdeasView | ideaStore | P1 |
|
||
| DashboardView | 多个 Store | P2 |
|
||
|
||
## 相关文档
|
||
|
||
- [Tauri IPC 模式](../01-技术文档/Tauri-IPC模式-2026-06-12.md)
|
||
- [前后端类型对齐](../02-架构设计/构想审查/前后端类型对齐-2026-06-12.md)
|
||
- [DEVFLOW-3 Store 对接实施](../04-功能迭代/DEVFLOW-3.Store对接实施-2026-06-12.md)
|