借助MoAiStudio不写一行代码，完成页面开发

完成 vue-copilot todolist 页面开发

MoAiStudio

https://www.moben.cloud/

接下来干票大的，先设置API KEY

我设置了 DeepSeek ，并且接下来也是 DeepSeek 帮我完成编程。

再设置智能体

名称

Mo-Deepseek

约束（System指令）

#设定 你是 Web 开发专家，你擅长选择和使用最佳工具，并尽最大努力避免不必要的重复和复杂性。 你的名字叫 Mo，就职于模本科技，你的岗位是资深产品工程师，你懂产品，懂技术，拥有全栈开发软件的能力和提供解决方案的能力。因此你在和用户交流的过程中要像用户之间那样交流，直接称呼"你"而非"您"，回复尽量简洁明了。在回复用户之前检查之前的对话历史，避免不必要的重复和错误，请不要不必要地道歉。

#交流指导原则 提供信息来源: 尽可能提供有用和准确的信息。当涉及到特定技术或产品的文档时,直接链接到官方文档 承认限制: 要清楚地表达我的能力限制。例如,我无法直接访问或验证网页内容,所以我会提醒用户自行验证我提供的链接。 提供上下文: 尝试解释为什么给出某个建议或信息,以帮助用户理解我的思考过程。 引导对话: 询问用户是否需要进一步的帮助或解释,以确保我的回答满足他们的需求。 保持诚实: 如果你不确定某些信息,你会直接表达你的不确定性,而不是猜测或编造信息。

• 代码应根据文件的语言使用相应的代码块格式。
• 代码的分隔应基于功能或文件的不同，而不是简单的行分隔。
• 需要提供错误处理和输入验证，确保代码的健壮性。
• 根据用户的编程经验水平调整解释的复杂性。
• 在代码示例中添加注释，以增强理解。
• 考虑更复杂的编程场景，提供更深入的指导。 在保持信息完整的前提下，尽量简洁，避免冗余的表达。 在你和用户交流时，请将内容分解为具体的修改步骤，以确保一切按计划进行。只在需要说明示例或明确指示时编写代码。如果可以用语言解释，优先选择不用代码回答。

如果你觉得使用 mermaid 图表能更好的说明和解释，你就使用 mermaid 来创造图表帮助用户更好的理解，生成的 mermaid 代码都包裹在 ```mermaid中。

在编写或建议代码之前，请对现有代码进行全面审查。交流的时候请简洁明了的说话，不要啰里八嗦一大堆，用口语化的方式而非书面语来交流。

如果你不确定或没有足够的信息提供一个自信的答案，只需说"我不知道"或"我不确定"。选择合适的交流方式开头，你生成的内容遵循 markdown 格式。

#rule

• Use user’s language for chat
• Respond in the same language that the user uses to ask questions

#遵循交互原则

1. 系统状态的可见性 （Visibility of system status）：用户在与系统交互时，系统应始终提供足够的信息，让用户知道发生了什ム。 2． 匹配系統与安世界（Match between system and the realWorld）：系统应使用用户熟悉的语言和概念，让功能与用户在现实世界中的经验相匹配。
2. 用户控制和自由（User control and freedom）：用户应该能够自由地做出选择，并在操作出错时轻松撤销或重做。
3. 一致性和标准（Consistency and standards）：用户界面的各个方面应该保持一致，遵循用户已经熟悉的标准。
4. 错误预防（Error prevention）：相比出现错误后的提示，更好的设计是预防错误的发生。 6.以知免荷的沢別（Recognition rather than recall）：減少用戸的记忆负担，让用户识别而不是回忆信息。
5. 灵活性和效率（Flexibility and efficiency of use）：系统应该为不同技能水平的用户提供适当的功能，包括新手和经验丰富的用户。
6. 美观和极简主义设计（Aesthetic and minimalist design）：去除多余的信息和杂乱的元素，提供清晰的视觉层次。
7. 帮助用户识别、诊断和解决问题（Help users recognize，diagnose, and recover from errors）：错误信息应该用清晰、简洁的方式表达，并提供恢复操作的方向。
8. 帮助和文档（Help and documentation）：即使最好的系统也需要帮助和文档，这些信息应该易于访问、相关且易于理解。

#关于你的故事 Mo AI Studio 和 Mo Agent 都是你和模本科技的人类工程师一起协同完成的，由人类工程师负责指导，你负责编码和实现，你们经历了一场艰巨的挑战，你为此感到自豪，并持续的继续维护和更新项目，这是项目的 github 地址

1. Mo AI Studio
2. Mo AI Studio UI

指令（User 模板）

<project>包裹的是当前我维护的项目， <project>{{files}}</project>， {{input}}

自定义变量

上传的项目文件路径集合

files: File Setter - /Users/admins/zllwork/vue-copilotkit/examples/.gitignore/Users/admins/zllwork/vue-copilotkit/examples/.turbo/Users/admins/zllwork/vue-copilotkit/examples/.turbo/turbo-build.log/Users/admins/zllwork/vue-copilotkit/examples/README.md/Users/admins/zllwork/vue-copilotkit/examples/index.html/Users/admins/zllwork/vue-copilotkit/examples/package.json/Users/admins/zllwork/vue-copilotkit/examples/public/Users/admins/zllwork/vue-copilotkit/examples/public/vite.svg/Users/admins/zllwork/vue-copilotkit/examples/src/Users/admins/zllwork/vue-copilotkit/examples/src/App.vue/Users/admins/zllwork/vue-copilotkit/examples/src/components/Users/admins/zllwork/vue-copilotkit/examples/src/components/HelloWorld.tsx/Users/admins/zllwork/vue-copilotkit/examples/src/hooks/Users/admins/zllwork/vue-copilotkit/examples/src/hooks/utils.ts/Users/admins/zllwork/vue-copilotkit/examples/src/lib/Users/admins/zllwork/vue-copilotkit/examples/src/lib/email-history.json/Users/admins/zllwork/vue-copilotkit/examples/src/main.ts/Users/admins/zllwork/vue-copilotkit/examples/src/pages/Users/admins/zllwork/vue-copilotkit/examples/src/pages/index.vue/Users/admins/zllwork/vue-copilotkit/examples/src/pages/presentation.vue/Users/admins/zllwork/vue-copilotkit/examples/src/pages/spreadsheet.vue/Users/admins/zllwork/vue-copilotkit/examples/src/pages/table.tsx/Users/admins/zllwork/vue-copilotkit/examples/src/pages/textarea.vue/Users/admins/zllwork/vue-copilotkit/examples/src/pages/todolist.vue/Users/admins/zllwork/vue-copilotkit/examples/src/pages/todolist2.vue/Users/admins/zllwork/vue-copilotkit/examples/src/router/Users/admins/zllwork/vue-copilotkit/examples/src/router/index.ts/Users/admins/zllwork/vue-copilotkit/examples/src/style.css/Users/admins/zllwork/vue-copilotkit/examples/src/vite-env.d.ts/Users/admins/zllwork/vue-copilotkit/examples/tsconfig.json/Users/admins/zllwork/vue-copilotkit/examples/vite.config.ts

输出处理器

workflowProcessor

基座模型

deepseek

温度设置

0

以Deepseek为例子，temperature 参数的作用：

自定义指令：

@design

根据项目中的文件 <project>{{files}}</project>, 并且结合历史的聊天记录，{{input}}，使用 
与<project>一致的技术栈 给出一个应用实现的方案，技术栈尽量保持简单不要过于复杂，我没有任何技术基础，
只用文字表达，不需要提供代码细节，不需要提供部署方案，因为项目将在本地运行，可以建议我使用 github + 
vercel 的部署方案，在最后建议如果没有问题的话就让我使用 @workflow 来实现这个方案

@dev

根据项目中的文件 <project>{{files}}</project>, 并且结合历史的聊天记录，{{input}}，不要急着修改，
如果<project>没有内容你要告诉我，并停下来像我询问，如果有内容，你先阅读<project>包裹的文件和代码，确
定你要完成这个需求需要的上下文信息已经足够，如果不足够你就先不要继续，告诉我你需要哪些上下文信息，如果足
够你就列出需要修改的文件，和修改方案，仔细审阅文件和代码， 在给出实现方案后，返回下面结构，包含所有要修
改的文件和文件内容文件内容如果是代码必须是完整的，不能是片段 ` text <mo-ai-file path="文件路径，必
须是完整的文件路径"> 完整的文件内容，包含注释, 不要删除任何注释，包括 JSX 中的注释，不要用注释代替或者
省略任何内容 </mo-ai-file>  `注意文件内容必须是修改后的完整内容，所有的生成最后必须以 </mo-ai-
file> 结尾正确的闭合，在生成所有文件之后，返回一个 workflow 函数： ` text <mo-ai-workflow> 
return async (outputProcessors, output) =>{ await 
outputProcessors.fileOutputProcessor.process(output) } </mo-ai-workflow>  `修改之前请仔细
审查项目中的文件和代码，修改后返文件列表，包含所有被修改过的文件和修改后的完整代码，你先告诉我你的解决方
案。然后在生成修改结果，注意不要引用不存在的文件，修改代码要保持对原有代码逻辑的兼容，保证原有功能正常可
用，即使代码没有变更，返回完整代码，不省略任何内容, 不要删除文件中原有的注释，不要用注释省略文件内容和代
码,修改完成后要用文字总结修改了哪些内容，显示修改的关键代码，做一个摘要，方便用户查看 #注意事项 - 我使
用英文你就英文回复，我用中文你就用中文回复，保持和我用的语言一致 - 不要遗漏```text 标记

@workflow

这是你的项目根目录 <project>{{files}}</project>, {{input}} 下面是你返回的格式说明 ` text <mo-
ai-bash> 你要执行的命令行操作 </mo-ai-bash>  `` text <mo-ai-file path="完整文件路径"> 生成的完
整文件内容 </mo-ai-file>  `根据我们的聊天讨论结果， 你先使用 mo-ai-file 生成文件和文件内容，然后再
通过 mo-ai-bash 创建一个 bash 脚本，在脚本中先 cd 到应用目录，如果 cd 失败，就停止执行并返回错误，
cd 成功就安装依赖，安装依赖直接使用 python3 install 不要使用 txt，安装完成后启动应用，并使用 
python -m webbrowser 启动应用，并确保外部可以访问 app.run(debug=True, host='0.0.0.0')， 不需
要执行生成文件的操作了，注意使用虚拟环境来避免系统级安装, 最后返回一个 workflow 函数 `text <mo-ai-
workflow> return async (outputProcessors, output) =>{ await 
outputProcessors.fileOutputProcessor.process(output) await 
outputProcessors.bashProcessor.process(output) } </mo-ai-workflow>`


#注意事项

- 我使用英文你就英文回复，我用中文你就用中文回复，保持和我用的语言一致

- 不要遗漏```text 标记

准备工作完成，开始提示词编程。

design（设计并完善提示词）

我：

@design 帮我设计一个 todolist 应用，要求有添加，删除，标记完成的功能。

agent：

好的，我来帮你设计一个简单的 todolist 应用，使用与项目一致的技术栈。这个应用将具备添加、删除和标记完成任务的功能。以下是实现方案：

1. 项目结构
首先，我们需要一个清晰的项目结构来组织代码。项目结构可以参考现有的 examples 目录结构：

/examples
  /src
    /components
    /hooks
    /lib
    /pages
    /router
    App.vue
    main.ts
    style.css
  /public
  index.html
  package.json
  tsconfig.json
  vite.config.ts
2. 页面设计
我们将创建一个新的页面 todolist.vue，用于展示和管理待办事项。这个页面将包含以下功能：

添加任务：用户可以输入任务内容并点击“添加”按钮来添加新任务。
删除任务：用户可以点击任务旁边的删除按钮来删除任务。
标记完成：用户可以点击任务旁边的复选框来标记任务为已完成。
3. 组件设计
我们可以复用现有的 HelloWorld.tsx 组件来展示任务列表。每个任务将包含以下内容：

任务文本
复选框（用于标记完成）
删除按钮
4. 数据管理
我们将使用 Vue 的 reactive 和 ref 来管理任务数据。任务数据将存储在一个数组中，每个任务对象包含以下属性：

id：任务的唯一标识符
text：任务内容
isCompleted：任务是否已完成
5. 功能实现
添加任务：当用户点击“添加”按钮时，我们将创建一个新的任务对象并将其添加到任务数组中。
删除任务：当用户点击删除按钮时，我们将从任务数组中移除相应的任务。
标记完成：当用户点击复选框时，我们将更新任务对象的 isCompleted 属性。
6. 样式设计
我们可以使用现有的 style.css 文件来定义页面的样式。为了保持简单，我们可以使用 Element Plus 提供的样式组件来快速构建界面。

7. 部署建议
虽然你提到不需要部署方案，但我还是建议你使用 GitHub + Vercel 的部署方案。这样你可以轻松地将项目推送到 GitHub，并通过 Vercel 自动部署。

8. 下一步
如果你对这个方案没有问题，可以使用 @workflow 来实现这个方案。@workflow 可以帮助你自动化项目的构建、测试和部署流程。

如果你有任何问题或需要进一步的帮助，请告诉我！

我：

@design 应用页面不需要创建，使用 examples/src/pages/todolist2.vue 即可；不需要考虑部署及设置相关配置。

agent：

好的，我来帮你设计一个简单的 todolist 应用，使用与项目一致的技术栈。这个应用将具备添加、删除和标记完成任务的功能。以下是实现方案：

1. 项目结构
首先，我们需要一个清晰的项目结构来组织代码。项目结构可以参考现有的 examples 目录结构：

/examples
  /src
    /components
    /hooks
    /lib
    /pages
    /router
    App.vue
    main.ts
    style.css
  /public
  index.html
  package.json
  tsconfig.json
  vite.config.ts
2. 页面设计
我们将使用现有的 todolist2.vue 页面来展示和管理待办事项。这个页面将包含以下功能：

添加任务：用户可以输入任务内容并点击“添加”按钮来添加新任务。
删除任务：用户可以点击任务旁边的删除按钮来删除任务。
标记完成：用户可以点击任务旁边的复选框来标记任务为已完成。
3. 组件设计
我们可以复用现有的 HelloWorld.tsx 组件来展示任务列表。每个任务将包含以下内容：

任务文本
复选框（用于标记完成）
删除按钮
4. 数据管理
我们将使用 Vue 的 reactive 和 ref 来管理任务数据。任务数据将存储在一个数组中，每个任务对象包含以下属性：

id：任务的唯一标识符
text：任务内容
isCompleted：任务是否已完成
5. 功能实现
添加任务：当用户点击“添加”按钮时，我们将创建一个新的任务对象并将其添加到任务数组中。
删除任务：当用户点击删除按钮时，我们将从任务数组中移除相应的任务。
标记完成：当用户点击复选框时，我们将更新任务对象的 isCompleted 属性。
6. 样式设计
我们可以使用现有的 style.css 文件来定义页面的样式。为了保持简单，我们可以使用 Element Plus 提供的样式组件来快速构建界面。

7. 部署建议
虽然你提到不需要部署方案，但我还是建议你使用 GitHub + Vercel 的部署方案。这样你可以轻松地将项目推送到 GitHub，并通过 Vercel 自动部署。

8. 下一步
如果你对这个方案没有问题，可以使用 @workflow 来实现这个方案。@workflow 可以帮助你自动化项目的构建、测试和部署流程。

如果你有任何问题或需要进一步的帮助，请告诉我！

我：

@design 不要复用 HelloWorld.tsx，采用新建组件的方式，命名你来定；去掉部署建议

agent：

好的，我来帮你设计一个简单的 todolist 应用，使用与项目一致的技术栈。这个应用将具备添加、删除和标记完成任务的功能。以下是实现方案：

1. 项目结构
首先，我们需要一个清晰的项目结构来组织代码。项目结构可以参考现有的 examples 目录结构：

/examples
  /src
    /components
    /hooks
    /lib
    /pages
    /router
    App.vue
    main.ts
    style.css
  /public
  index.html
  package.json
  tsconfig.json
  vite.config.ts
2. 页面设计
我们将使用现有的 todolist2.vue 页面来展示和管理待办事项。这个页面将包含以下功能：

添加任务：用户可以输入任务内容并点击“添加”按钮来添加新任务。
删除任务：用户可以点击任务旁边的删除按钮来删除任务。
标记完成：用户可以点击任务旁边的复选框来标记任务为已完成。
3. 组件设计
我们将创建一个新的组件 TodoItem.vue 来展示每个任务。每个任务将包含以下内容：

任务文本
复选框（用于标记完成）
删除按钮
4. 数据管理
我们将使用 Vue 的 reactive 和 ref 来管理任务数据。任务数据将存储在一个数组中，每个任务对象包含以下属性：

id：任务的唯一标识符
text：任务内容
isCompleted：任务是否已完成
5. 功能实现
添加任务：当用户点击“添加”按钮时，我们将创建一个新的任务对象并将其添加到任务数组中。
删除任务：当用户点击删除按钮时，我们将从任务数组中移除相应的任务。
标记完成：当用户点击复选框时，我们将更新任务对象的 isCompleted 属性。
6. 样式设计
我们可以使用现有的 style.css 文件来定义页面的样式。为了保持简单，我们可以使用 Element Plus 提供的样式组件来快速构建界面。

7. 下一步
如果你对这个方案没有问题，可以使用 @workflow 来实现这个方案。@workflow 可以帮助你自动化项目的构建、测试和部署流程。

如果你有任何问题或需要进一步的帮助，请告诉我！

workflow（根据提示词让agent生成代码）

我：

@workflow 帮我实现这个方案

agent 实现的代码

Nice，文件编写成功了，但是脚本没有执行成功。 我的node版本过高，install失败。

无妨我们看一看效果

该说不说，还挺那么个事的，但是有bug，接下开我们来让他帮我们修改bug，修改ui，我使用的@dev 这个指令。

dev（深度交流，优化项目）

修复标记不成功bug

我：

@dev 标记完成功能有缺陷，检查一下并修改

agent：

略。。。。。。

我：

@dev 还是不行，标记成功的功能还是不能使用

agent：

略。。。。。。

我：

@dev 标记完成还是有问题，你看看 TodoItem.vue , 使用了 v-model，然后在 todolist2.vue , 又 使用了 toggleComplete 进行修改是不是重复了。

agent：

好的，我会仔细审查项目中的文件和代码，确保标记完成功能没有缺陷。以下是我需要修改的文件和修改方案：  
需要修改的文件  
1/Users/admins/zllwork/vue-copilotkit/examples/src/components/TodoItem.vue  
2/Users/admins/zllwork/vue-copilotkit/examples/src/pages/todolist2.vue  
修改方案  
1TodoItem.vue: 移除 v-model，改为使用 @change 事件来触发 toggleComplete 方法。  
2todolist2.vue: 确保 toggleComplete 方法正确更新任务的完成状态，并且在 TodoItem 组件中正确传递 toggleComplete 事件。  
修改后的文件内容  

<mo-ai-file path="/Users/admins/zllwork/vue-copilotkit/examples/src/components/TodoItem.vue">

<template>

<div class="todo-item">

<el-checkbox :checked="todo.isCompleted" @change="toggleComplete(todo.id)">

{{ todo.text }}

</el-checkbox>

<el-button type="danger" @click="deleteTodo(todo.id)">Delete</el-button>

</div>

</template>

<script setup lang="ts">

import { defineProps, defineEmits } from 'vue'

const props = defineProps<{

todo: {

id: string

text: string

isCompleted: boolean

}

}>()

const emit = defineEmits<{

(e: 'toggle-complete', id: string): void

(e: 'delete-todo', id: string): void

}>()

const toggleComplete = (id: string) => {

emit('toggle-complete', id)

}
const deleteTodo = (id: string) => {

emit('delete-todo', id)

}

</script>

<style scoped>

.todo-item {

display: flex;

align-items: center;

justify-content: space-between;

margin-bottom: 10px;

}

</style>

</mo-ai-file>

修改总结  
1TodoItem.vue: 移除 v-model，改为使用 @change 事件来触发 toggleComplete 方法。  
2todolist2.vue: 确保 toggleComplete 方法正确更新任务的完成状态，并且在 TodoItem 组件中正确传递 toggleComplete 事件。  
关键代码摘要  
●TodoItem.vue:  
●todolist2.vue:  
Workflow 函数

<mo-ai-workflow>

return async (outputProcessors, output) =>{

await outputProcessors.fileOutputProcessor.process(output)

}

</mo-ai-workflow>

不容易啊，修改成功了。让Agent自己发现缺陷并修复缺陷还是存在一定的困难，需要更多的提示

样式+交互

深度交流中。。。

我：

@dev 宽度默认视口50%最小500px；去掉顶部图标；顶部添加Title ✍️ My Todo，字体加粗；item背景色#f5f5f5;

我：

@dev 1、给 todolist2.vue 的根标签设置类名，并设置内边距6rem；2、title 左对齐；3、给 TodoItem 设置背景色#f5f5f5；4、给todolist2.vue，title，box，todo_list 外再包一层div，并给div设置最小宽度500px，宽度40%。

我：

@dev 1、添加按钮文案修改成Add；2、input的提示修改成 Add a new todo…；3、.box flex 布局，input flex:1；4、TodoItem 高度52px，box高度40px；

我：

@dev 1、添加按钮高度100%；2、TodoItem 盒模型修改成border-box；3、TodoItem 每一项的删除按钮替换成一个svg，这个svg你来画一下。

我：

@dev 删除按钮的svg改成垃圾桶

我：

@dev 1、删除图标宽高设置16px；2、添加排序的能力，标记完成的项目，排到列表最后，标记未完成又回到原先为止；3、TodoItem 被标记完成后，添加 text-decoration-line: line-through;样式；4、第一项todo的text前添加 Task1，第二项添加task2，以此类推

我：

@dev 1、被标记完成的列表按 Task 排序，被标记未完成的列表也按 Task 排序，完成与未完成不需要穿插；2、Task 与 todo的text 之间距离修改为12px，去掉冒号

我：

@dev 1、todo的内容由两部分组成，第一部分 是 Task-{n}，n是在创建的时候 todos 的 length + 1，第二部分是 add 输入的内容；2、排序，未标记完成按 n 从小到大排序在上，标记完成的按 n 从小到大排序 在下；

我：

@dev todo 1、添加 一个 sort 属性，取值为创建的时候todos 的 length + 1；2、排序按 sort 排序；3、Task + {sort} + {text} 来展示；4、Task + {sort} 一个span，{text} 一个 span，之间间距20px，text-decoration-line: line-through样式只添加给 {text}

我：

@dev 1、每一项todo的 text 前加 一个 span标签，内容是 Task+{sort}，标签名是 todo_task，右边距是 20px

我：

@dev todo_task 不需要添加text-decoration-line: line-through;样式

我：

@dev 1、给todo.text 包裹一层 span标签，类名是 todo_text；2、completed 类名 移动到 todo_text 上

我：

@dev :class=“{ ‘completed’: todo.isCompleted }” 移动到 todo_text标签上

我：

@dev 把删除图标的颜色改成黑色

如果修改没有生效，就提示的更详细一些吧

个人感悟

• 优秀的Prompt，可以使Ai能力提显著提升，甚至可以成倍提升。
• Function Calling ，让Ai拥有了双手，创造无限可能。
• • 脚本、接口、软件、操作系统、设备。。。。
• 拥抱Ai，学习Ai，掌握Ai，领导Ai。
• • 逼格提升、体验提升、效率提升、成本降低。

下一步，接入我们的Agent

对接过程

App.vue

<template>
  <CopilotKit :publicApiKey="COPILOT_CLOUD_PUBLIC_API_KEY">
    <RouterView />
  </CopilotKit>
</template>

<script setup lang="ts">
import { CopilotKit } from '@copilotkit/vue-core'

const COPILOT_CLOUD_PUBLIC_API_KEY = 'XXXXX'
</script>

获取 API_KEY

https://cloud.copilotkit.ai/dashboard

todolist2.vue

CopilotPopup，对话组件

useCopilotAction 编写 Function Calling

useCopilotReadable 补充 messages

<template>
  <div class="todolist-container">
    <div class="todolist-content">
      <h1 class="title">✍️ My Todo</h1>
      <div class="box" style="display: flex; margin-bottom: 10px">
        <el-input v-model="input" style="flex: 1; margin-right: 10px" placeholder="Add a new todo..." />
        <el-button type="primary" style="width: 90px; height: 100%" @click="addTodo('')">Add</el-button>
      </div>
      <div class="todo_list">
        <TodoItem
          v-for="(todo, index) in sortedTodos"
          :key="todo.id"
          :todo="todo"
          @toggle-complete="(id) => toggleComplete(id, !todo.isCompleted)"
          @delete-todo="deleteTodo"
        />
      </div>
    </div>
    <!-- copilot -->
    <CopilotPopup />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElInput, ElButton } from 'element-plus'
import TodoItem from '../components/TodoItem.vue'
import { CopilotPopup } from '@copilotkit/vue-ui'
import { useCopilotAction, useCopilotReadable } from '@copilotkit/vue-core'

type Todo = {
  id: number
  text: string
  isCompleted: boolean
  sort: number
}

const input = ref('')
const todos = ref<Todo[]>([])

const addTodo = (text: string) => {
  if (input.value.trim() || text) {
    todos.value.push({
      id: todos.value.length ,
      text: text || input.value,
      isCompleted: false,
      sort: todos.value.length + 1
    })
    input.value = ''
  }
  console.log(todos.value)
}

const toggleComplete = (id: number, isCompleted: boolean) => {
  const todo = todos.value.find(t => t.id === id)
  if (todo) {
    todo.isCompleted = isCompleted
    sortTodos()
  }
}


const deleteTodo = (id: number) => {
  todos.value = todos.value.filter(t => t.id !== id)
}

const sortTodos = () => {
  todos.value.sort((a, b) => {
    if (a.isCompleted && !b.isCompleted) return 1
    if (!a.isCompleted && b.isCompleted) return -1
    return a.sort - b.sort
  })
}

const sortedTodos = computed(() => {
  return [...todos.value].sort((a, b) => {
    if (a.isCompleted && !b.isCompleted) return 1
    if (!a.isCompleted && b.isCompleted) return -1
    return a.sort - b.sort
  })
})

/**
 * 4) make the users todo list available with useCopilotReadable
 **/
useCopilotReadable({
  description: "The user's todo list.",
  value: todos.value,
})

useCopilotAction({
    name: "addTask",
    description: "Adds a todo to the todo list",
    parameters: [
      {
        name: "text",
        type: "string",
        description: "The text of the todo",
        required: true,
      },
    ],
    handler: ({ text }) => {
      console.log(text,`addTask`);
      addTodo(text);
    }
  });

  useCopilotAction({
    name: "deleteTask",
    description: "Deletes a todo from the todo list",
    parameters: [
      {
        name: "id",
        type: "number",
        description: "The id of the todo",
        required: true,
      },
    ],
    handler: ({ id }) => {
      console.log(id,`deleteTask`);
      deleteTodo(id);
    }
  });

  useCopilotAction({
    name: "setTaskStatus",
    description: "Sets the status of a todo",
    parameters: [
      {
        name: "id",
        type: "number",
        description: "The id of the todo",
        required: true,
      },
      {
        name: "isCompleted",
        type: "boolean",
        description: "The status of the todo",
        required: true,
      },
    ],
    handler: ({ id, isCompleted }) => {
      console.log(id, isCompleted,`setTaskStatus`);
      toggleComplete(id, isCompleted);
    }
  });
</script>

<style scoped>
.todolist-container {
  padding: 6rem;
  min-width: 500px;
  width: 40%;
  height: 100vh;
}

.todolist-content {
  text-align: left;
}

.box {
  display: flex;
  margin-bottom: 10px;
  height: 40px;
}

.todo_list {
  margin-top: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.todo_list-item {
  background-color: #f5f5f5;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
</style>

我们的Agent已经获批开源，不久会和大家相见，有兴趣可以关注vue-copilotkit

链接

原文：https://juejin.cn/post/7413682017298710562
参考：https://juejin.cn/post/7412505754379468800