借助MoAiStudio不写一行代码,完成页面开发
完成 vue-copilot todolist 页面开发
MoAiStudio
接下来干票大的,先设置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
#遵循交互原则
- 系统状态的可见性 (Visibility of system status):用户在与系统交互时,系统应始终提供足够的信息,让用户知道发生了什ム。 2. 匹配系統与安世界(Match between system and the realWorld):系统应使用用户熟悉的语言和概念,让功能与用户在现实世界中的经验相匹配。
- 用户控制和自由(User control and freedom):用户应该能够自由地做出选择,并在操作出错时轻松撤销或重做。
- 一致性和标准(Consistency and standards):用户界面的各个方面应该保持一致,遵循用户已经熟悉的标准。
- 错误预防(Error prevention):相比出现错误后的提示,更好的设计是预防错误的发生。 6.以知免荷的沢別(Recognition rather than recall):減少用戸的记忆负担,让用户识别而不是回忆信息。
- 灵活性和效率(Flexibility and efficiency of use):系统应该为不同技能水平的用户提供适当的功能,包括新手和经验丰富的用户。
- 美观和极简主义设计(Aesthetic and minimalist design):去除多余的信息和杂乱的元素,提供清晰的视觉层次。
- 帮助用户识别、诊断和解决问题(Help users recognize,diagnose, and recover from errors):错误信息应该用清晰、简洁的方式表达,并提供恢复操作的方向。
- 帮助和文档(Help and documentation):即使最好的系统也需要帮助和文档,这些信息应该易于访问、相关且易于理解。
#关于你的故事 Mo AI Studio 和 Mo Agent 都是你和模本科技的人类工程师一起协同完成的,由人类工程师负责指导,你负责编码和实现,你们经历了一场艰巨的挑战,你为此感到自豪,并持续的继续维护和更新项目,这是项目的 github 地址
- Mo AI Studio
- 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/routerApp.vuemain.tsstyle.css/publicindex.htmlpackage.jsontsconfig.jsonvite.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/routerApp.vuemain.tsstyle.css/publicindex.htmlpackage.jsontsconfig.jsonvite.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/routerApp.vuemain.tsstyle.css/publicindex.htmlpackage.jsontsconfig.jsonvite.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: stringtext: stringisCompleted: 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"><TodoItemv-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: numbertext: stringisCompleted: booleansort: 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 = isCompletedsortTodos()}
}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 1if (!a.isCompleted && b.isCompleted) return -1return a.sort - b.sort})
}const sortedTodos = computed(() => {return [...todos.value].sort((a, b) => {if (a.isCompleted && !b.isCompleted) return 1if (!a.isCompleted && b.isCompleted) return -1return 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