修复: AR-3 审批 reason 查项目名拼对象名(用户再反馈 P0)
build_approval_reason 改 async + 接收 db,对 delete/restore/purge/update/bind/create_task 的 id/project_id 查 ProjectRepo.get_by_id 拼「项目名」(id=x)(原只拼裸 id,用户反馈'只返回 ID 不知道是什么数据') 新增 resolve_project_label helper;process_tool_calls 调用改 await 来源 aichat审查报告 第二章 + 用户 2026-06-14 再反馈;cargo 0 err
This commit is contained in:
97
docs/06-前端开发/View改造指南-2026-06-12.md
Normal file
97
docs/06-前端开发/View改造指南-2026-06-12.md
Normal file
@@ -0,0 +1,97 @@
|
||||
# View 改造指南 — 硬编码到 Store 对接
|
||||
|
||||
> 创建: 2026-06-10 | 状态: 初稿
|
||||
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
当前所有 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模式.md)
|
||||
- [前后端类型对齐](../02-架构设计/前后端类型对齐.md)
|
||||
- [DEVFLOW-3 Store 对接实施](../04-功能迭代/DEVFLOW-3.Store对接实施.md)
|
||||
Reference in New Issue
Block a user