绝尘
04032a2a8d
- docs/02 架构设计: 新增 aichat审查/异步审批构想/流式渲染调研/generating状态机/密钥迁移健壮性/工作流脚本执行边界/条件表达式引擎/F-07 trait下沉/Agent架构说明/任务推进构想/功能创意池;更新功能决策记录+归档/对抗论证/文档记录规范/经验记录
- docs/03 模块文档: 新增 AI对话引擎/DAG引擎详解;更新 df-knowledge/df-nodes/df-storage/df-workflow/df-ai
- docs/05 代码审查: 新增 全栈审查/全局review/架构审查/近期改动审查/工作区多角度走查/自研memo流式渲染审查
- docs/09 问题排查: 新增 aichat-apikey-401
- docs/INDEX+README 索引同步;docs/todo 待办看板(2026-06-15 汇总)
- PROGRESS.md Sprint 22-25;URGENT.md 加急清单快照(5 项 P0 已全修)
- scripts/cleanup_orphan_tasks.{py,sh} 孤儿任务清理工具
- .gitignore 补 *.broken.bak + tmp/ 噪音排除
2.3 KiB
2.3 KiB
View 改造指南 — 硬编码到 Store 对接
创建: 2026-06-10 | 状态: 初稿
概述
当前所有 Vue 页面使用硬编码数据 (ref([...]))，Pinia Store 和 View 完全独立。本文档指导如何将 View 改造为通过 Store → IPC 获取真实数据。
当前问题
- 数据硬编码 — 每个 View 用
ref([...])定义假数据 - Store 未接入 — Pinia Store 有 state/getter 但无 action
- 事件处理空函数 — 按钮点击绑定
() => {} - Arco Design 未使用 — 仅 CSS 变量覆盖，未引入组件
改造步骤
Step 1: Store 添加 Actions
// 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
// 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: 事件绑定真实操作
// 改造前
const handleCreate = () => {}
// 改造后
const handleCreate = async () => {
await store.createProject(form)
modalVisible.value = false
}
Step 4: 加载与错误状态
<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 |