+
+
+ 
- 
- 
+
+
+
+## Obtain DeepSeek API Key
+
+Register with DeepSeek and create your API key on the [DeepSeek API](https://platform.deepseek.com/api_keys) official website.
+
+
+
+## Configure Cursor
+
+Official website: https://www.cursor.com/
+
+Download and register, open your VChart project with Cursor, and configure Cursor.
+
+Using DeepSeek-V3 as an example, its API model name is `deepseek-chat`, and the API address is https://api.deepseek.com/v1. For more details, see the [API usage official website](https://api-docs.deepseek.com/zh-cn).
+
+Create a new model on the model page, set the corresponding API address and model name.
+
+
+
+Of course, you can also use any other AI model; here, we use DeepSeek.
+
+# Inject Official Tutorial into @Docs
+
+# Practical Verification
+
+## VTable Test
+
+VTable (https://www.visactor.io/vtable/; https://www.visactor.com/vtable/) is a powerful table component in the VisActor visualization library. It is designed to meet diverse data presentation needs, offering high flexibility and customizability. Whether it's simple data listing or complex data analysis display scenarios, VTable can provide excellent solutions.
+
+VTable has the following core features:
+
+- Supports various table types: basic tables, pivot tables, transposed tables, pivot charts, etc.
+
+- Powerful interaction features: sorting, filtering, row and column dragging, cell editing, etc.
+
+- Rich cell types: text, charts, progress bars, checkboxes, sparklines, etc.
+
+- High-performance rendering: supports smooth display of millions of data
+
+- Multi-platform adaptation: perfect support for mainstream frameworks like Vue, React
+
+### Invoke AI Interaction Panel in Cursor and Generate Code
+
+After setting up the project environment, use `cmd + i` to invoke the AI interaction panel. We directly let AI generate a basic table code snippet for inserting VTable.
+
+
+
+However, the initial generation result shows that AI does not recognize VTable's `ListTable`, possibly due to the inability to accurately recognize VTable's ListTable configuration.
+
+
+
+### Inject Official Tutorial into @Docs
+
+To solve the above problem, we inject the official tutorial into @Docs.
+
+
+
+Explicitly specify `VisActor VTable` in the `prompt` in @Docs. After this step, we are pleasantly surprised to find that AI can correctly write the implementation logic according to the `option` in VTable.
+
+
+
+### Code Application and Effect Display
+
+Copy the generated code into the corresponding file, run the project, and you can see the initial effect, with the table correctly generated.
+
+
+
+Then, we continue to let AI modify the table style. AI provided reasonable modification suggestions,
+
+
+
+After running the project again, we got a display effect that better meets the requirements:
+
+
+
+## VChart Test
+
+### Add a Bar Chart
+
+Invoke AI interaction with the `cmd+i` command, and let AI help us generate a simple bar chart code first.
+
+
+
+Directly apply this spec, and we check the result; a simple bar chart is rendered. It can be seen that DeepSeek has a certain understanding of VChart, and simple charts can be directly added. Let's try a more complex scenario.
+
+
+
+### Complex Scenario, Inject Docs
+
+We hope to add an average auxiliary line on the y-axis, check the result, but the result is incorrect. Upon closer inspection, it can be found that although the markLine is written as if it is correct, the spec does not conform to the specification, and the average line is calculated. We solve this problem by injecting docs.
+
+
+
+
+
+#### Set Docs
+
+Enter the Cursor settings page, select `Features`, add new docs, the docs address is https://visactor.com/vchart (https://visactor.io/vchart); you can also directly add through @Docs on the editing page.
+
+
+
+### Experimental Results
+
+By editing again with the newly added docs, the correct result can be obtained!
+
+
+
+
+
+## VStory Test
+
+VStory (GitHub: https://github.com/VisActor/VStory/; site: https://www.visactor.io/vstory/, https://www.visactor.com/vstory/) is a narrative-oriented visualization development framework that integrates the capabilities of all VisActor visualization components, making it more challenging to use. We conduct a simple test.
+
+Invoke AI interaction with the `cmd+i` command, and let AI help us generate a simple dashboard demo first.
+
+
+
+It can be found that it is completely incorrect because DeepSeek uses data from 2023, and VStory had not been released at that time, so it does not know how to use it. At this point, we need to let it read the documentation to learn.
+
+### Inject Docs
+
+We solve this problem by injecting docs.
+
+Enter the Cursor settings page, select `Features`, add new docs, the docs address is https://visactor.com/vstory/guide/tutorial_docs/VStory_Website_Guide; you can also directly add through @Docs on the editing page.
+
+
+
+### Experimental Results
+
+By editing again with the newly added docs, the correct result can be obtained!
+
+
+
+
+
+**Since VStory uses VChart, VTable, and VRender, to achieve better results, you should add the documentation of VChart, VTable, and VRender to the context simultaneously.**
+
+# Simple Summary
+
+1. Improve Development Efficiency
+
+- Quick Access: Directly access VisActor API documentation through Cursor
+
+- Intelligent Suggestions: Precise code completion based on VisActor documentation
+
+2. Enhance Development Experience
+
+- Seamless Integration: Directly obtain VTable usage guidance in the development environment
+
+- Real-time Feedback: Quickly verify code effects
+
+3. Reduce Learning Costs
+
+- Documentation Assistance: Access VisActor official examples at any time
+
+- Code Generation: Automatically generate code that complies with VisActor standards
+
+4. Improve Code Quality
+
+- Standard Check: Ensure code complies with VTable best practices
+
+- Performance Optimization: Automatically generate high-performance table configurations
+
+# Contact Us
+
+GitHub: [github.com/VisActor](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2FVisActor)
+
+Leave a message on the VisActor WeChat subscription account (you can join the WeChat group through the subscription account menu):
+
+
+
+VisActor official website: [www.visactor.io/](https://link.juejin.cn/?target=https%3A%2F%2Fwww.visactor.io%2Fvtable); [www.visactor.](https://link.juejin.cn/?target=https%3A%2F%2Fwww.visactor.io%2Fvtable)com
+
+Feishu Group:
+
+
+
+Discord: https://discord.com/invite/3wPyxVyH6m
+
+
+---
+
+The doc is contributed by [玄魂](https://github.com/xuanhun)
\ No newline at end of file
diff --git a/docs/assets/guide/menu.json b/docs/assets/guide/menu.json
index 4e5648e80a..75ec31578f 100644
--- a/docs/assets/guide/menu.json
+++ b/docs/assets/guide/menu.json
@@ -63,6 +63,13 @@
"zh": "Cursor+DeepSeek，快速上手属于你的 VChart 代码",
"en": "Cursor+DeepSeek: Quick Start to Your VChart Code"
}
+ },
+ {
+ "path": "Quickly_Get_Started_with_VisActor_Using_Trae_Context_Doc",
+ "title": {
+ "zh": "使用 Trae Context Doc 快速上手 VisActor",
+ "en": "Quickly Get Started with VisActor Using Trae Context Doc"
+ }
}
]
},
diff --git a/docs/assets/guide/zh/tutorial_docs/Basic/DeepSeek_With_Cursor.md b/docs/assets/guide/zh/tutorial_docs/Basic/DeepSeek_With_Cursor.md
index 2911923b56..326fc71234 100644
--- a/docs/assets/guide/zh/tutorial_docs/Basic/DeepSeek_With_Cursor.md
+++ b/docs/assets/guide/zh/tutorial_docs/Basic/DeepSeek_With_Cursor.md
@@ -3,7 +3,7 @@
在前面的章节中，我们已经大致了解了一份基础 spec 的组成部分以及基础图表的具体生成。然而 VChart 因为其功能的强大和 API 的多样性，想要使用 VChart 快速实现一个复杂的图表可能较为困难，那么有没有一种简单轻松的方式，可以快速上手，无需在 API 文档中苦苦寻找呢？
答案是肯定的！得益于当前 AI 技术的飞速发展，通过 AI 工具不仅可以快速理解和掌握 VChart 的使用方法，还能显著提升编码效率，让开发者专注于创造力和业务逻辑的实现。
-这篇教程我们会通过配置`Cursor`和`DeepSeek`（可以是其他任何 AI），快速快速上手属于你的 VChart 代码！
+这篇教程我们会通过配置`Cursor`和`DeepSeek`（可以是其他任何 AI,当然使用Cursor 默认的模型也是ok的，重点是自定义引入文档），快速快速上手属于你的 VChart 代码！
## 1. 前期准备
diff --git a/docs/assets/guide/zh/tutorial_docs/Basic/Quickly_Get_Started_with_VisActor_Using_Trae_Context_Doc.md b/docs/assets/guide/zh/tutorial_docs/Basic/Quickly_Get_Started_with_VisActor_Using_Trae_Context_Doc.md
new file mode 100644
index 0000000000..c028f7d804
--- /dev/null
+++ b/docs/assets/guide/zh/tutorial_docs/Basic/Quickly_Get_Started_with_VisActor_Using_Trae_Context_Doc.md
@@ -0,0 +1,194 @@
+---
+title: 有了Trae 上下文doc功能 ，快速上手VisActor，再也不用提oncall了
+
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+# 什么是Trae
+
+Trae（中国区： https://www.trae.com.cn/?utm_source=school&utm_medium=oncam&utm_campaign=visactor ，海外版：https://www.trae.ai/ ），致力于成为真正的 AI 工程师（The Real Al Engineer）。Trae 旗下的 AI IDE 产品，以智能生产力为核心，无缝融入你的开发流程，与你默契配合，更高质量、高效率完成每一个任务。
+
+
+
+# 什么上下文Doc 功能
+
+指定上下文可以让 AI 助手提供更精准的回答，但是大模型对一个组件的理解的实时程度是低于组件自己的官方文档的。如果我们在使用一个不熟悉的组件的时候，如果能将该组件的相关文档引入到上下文中，可以大大的提升智能化编程水平。
+
+
+
+Trae 使用 “#” 来指定上下文。
+
+
+
+输入“#Doc：”，可以索引文档集。 我们添加VisActor 的文档，进行测试。 目前Trae 还没有内置任何文档集，所以需要手动添加。
+
+首先添加文档集：
+
+
+
+
+
+这里我们通过url的方式添加各组件的入口url：
+
+* VChart：https://www.visactor.io/vchart/
+
+* VTable：https://www.visactor.io/vtable
+
+* VMind：https://www.visactor.io/vmind
+
+* ....
+
+
+
+整个过程略微缓慢，但是索引效果，明显好于 Cursor。
+
+
+
+
+
+下面我们实地测试一下引用文档作为上下文是否会给编程带来实际的益处。
+
+# 效果测试
+
+## 创建测试项目
+
+我们创建一个最简单web 项目
+
+```
+npm create vite@latest my-ts-web -- --template typescript
+cd my-ts-web
+
+```
+
+
+# 实践验证
+
+## 新增一个线图
+
+我们要求Trae 生成一段代码，在当前文件中添加一个VChart 线图。
+
+
+
+生成的结果还是有错误的。
+
+
+
+我们下面引入文档，看看是不是会有所改变。
+
+
+
+重新生成的代码修复了之前的api 错误调用。
+
+
+
+生成了一个正确的线图。
+
+
+
+## 加大难度
+
+首先我们来修改数据，显示三条线。
+
+
+
+问题的分析和答案都比较靠谱：
+
+
+
+
+
+主要修改点：
+
+1. 重构了数据结构，使用type字段来区分不同系列
+
+1. 使用seriesField来指定系列的分类字段
+
+1. 每个数据点包含year（x轴）、value（y轴）和type（系列）三个字段
+
+
+
+修改入场动画效果：
+
+
+
+
+
+主要修改：
+
+1. 添加了animation配置
+
+1. appear设置入场动画为fadeIn（淡入淡出）
+
+1. duration设置动画持续时间为1000毫秒
+
+结果如下：
+
+
+
+
+
+## 更多问答
+
+因为有了官方文档，我们可以让Trae 回答更多类型的问题，不只是代码本身。
+
+比如基本的图表概念：
+
+
+
+或者 具体用法：
+
+
+
+导航到更相关文档：
+
+
+
+
+
+# 简单总结
+
+Trae 结合文档有如下好处：
+
+1. 提升开发效率
+
+- 快速访问：通过Marscode直接查阅VisActor API文档
+
+- 智能提示：基于VisActor文档的精准代码补全
+
+2. 增强开发体验
+
+- 无缝集成：在开发环境中直接获取VTable使用指导
+
+- 实时反馈：快速验证代码效果
+
+3. 降低学习成本
+
+- 文档辅助：随时查阅VisActor官方示例
+
+- 代码生成：自动生成符合VisActor规范的代码
+
+4. 提高代码质量
+
+- 规范检查：确保代码符合VisActor最佳实践
+
+- 性能优化：自动生成高性能表格配置
+
+# 联系我们
+
+github ：[github.com/VisActor](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2FVisActor)
+
+VisActor 微信订阅号留言（可以通过订阅号菜单加入微信群）：
+
+
+
+VisActor 官网：[www.visactor.io/](https://link.juejin.cn/?target=https%3A%2F%2Fwww.visactor.io%2Fvtable) ； [www.visactor.](https://link.juejin.cn/?target=https%3A%2F%2Fwww.visactor.io%2Fvtable)com
+
+飞书群：
+
+
+
+discord：https://discord.com/invite/3wPyxVyH6m
+
+
+---
+
+The doc is contributed by [玄魂](https://github.com/xuanhun)