feat: Adjust the prompt to ensure that the generated code binds the s…

…tate-managed data correctly

packages/plugins/robot/docs/README.md

@@ -32,4 +32,8 @@
 
 # 通过继续提问，让AI修改生成的页面
 
-如需对生成的页面进行调整，只需继续提问。AI 将根据您的新指令对页面进行迭代修改，帮助您逐步完善设计与功能。
+如需对生成的页面进行调整，只需继续提问。AI 将根据您的新指令对页面进行迭代修改，帮助您逐步完善设计与功能。
+
+# 演示视频
+
+[AI插件搭建能力增强功能演示视频](https://www.bilibili.com/video/BV11PxpefEsK/?share_source=copy_web&vd_source=269fa603804b1bac348290de346b943c)

packages/plugins/robot/src/js/codeRules.js

@@ -9,10 +9,11 @@ export const codeRules = `\`\`\`
 2. 命名规范：
   •所有组件遵循首字母大写的命名规则，如 TinyForm, TinyFormItem, Text 等。
 3. 组件选择和匹配：
-  •细致分析页面的每个功能区域，使用最贴合的 TinyVue 组件。例如，表单区使用 TinyForm 和 TinyFormItem，按钮使用 TinyButton，模态框使用 TinyModal。
+  •细致分析页面的每个功能区域，使用最贴合的 TinyVue 组件。
+   例如，表格组件是用 Grid 表格,表单区使用 TinyForm 和 TinyFormItem，按钮使用 TinyButton，模态框使用 TinyModal, 搜索使用 TinySearch。
   •各区域组件应与最合适的 TinyVue 组件匹配，以最大程度还原页面的预期样式与功能效果。
 4. 页面布局：
-  •页面分为主标题区、导航栏、内容展示区、操作按钮区等。使用 TinyVue 布局组件（如 TinyGrid, TinyRow, TinyCol），结合 Flex 布局，实现响应式布局适配各类屏幕尺寸。
+  •页面分为主标题区、导航栏、内容展示区、操作按钮区等。使用 TinyVue 布局组件（如TinyContainer,TinyRow, TinyCol），结合 Flex 布局，实现响应式布局适配各类屏幕尺寸。
 5. 样式细节：
   •确保页面视觉效果与参考样式一致，包含背景色、阴影、边框和动画。按钮、卡片和表单元素需具备悬停动画和边框样式。
   •确保组件间距、字体、颜色与参考页面保持一致。
@@ -181,7 +182,7 @@ export const codeRules = `\`\`\`
       <tiny-time-select v-model="timeSelectValue" placeholder="选择时间"></tiny-time-select>
     </div>
 
-    <!-- Grid 表格 -->
+    <!-- Grid 表格组件 -->
     <tiny-grid :data="gridData" border :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true}" :pager="pagerConfig">
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column type="selection" width="60"></tiny-grid-column>
@@ -190,6 +191,8 @@ export const codeRules = `\`\`\`
       <tiny-grid-column field="city" title="城市"></tiny-grid-column>
       <tiny-grid-column field="boole" title="布尔值" align="center" format-text="boole" :editor="checkboxEdit"></tiny-grid-column>
     </tiny-grid>
+    
+    
     <!-- Badge 标记 -->
     <tiny-badge :value="2" data="我的待办"></tiny-badge>
 
@@ -678,8 +681,29 @@ function decreaseProgress() {
 (1)顶层结构必须包含以下字段： state, methods, componentName, css, props, children, fileName
 (2)字段解释：以下是对预定 Schema 配置模板中每个部分的详细解释：
 1.state 对象：
-用途：定义组件的内部状态，这些状态通常与组件的数据绑定和交互逻辑相关。
-例如："state": { "dataDisk": [] } 中的 dataDisk 数组可以用来存储组件需要展示的数据。
+用途：state 对象用于存储响应式数据。状态管理面板负责系统管理 state 中的响应式变量，包括添加、删除、搜索和编辑操作。
+注意事项：
+  当使用 state 存储组件需要展示的数据时，必须在对象的属性中内置 type 和 value，并将 value 绑定到属性值。
+  步骤：
+  1. 首先在state内部定义一个属性值：
+  "state": {
+    "tableData": []
+  }
+  2. 在需要展示数据的字段中引用该属性：
+  错误示例：
+  "componentName": "TinyGrid",
+  "props": {
+    "data": "state.tableData",
+    "border": true
+  },
+  正确示例：
+  "componentName": "TinyGrid",
+  "props": {
+    "data": {
+      "type": "JSExpression",
+      "value": "this.state.tableData"
+    }
+  }
 2.methods 对象：
 用途：定义组件的方法，这些方法可以是事件处理器、工具函数或任何其他逻辑。
 例如：在模板中定义一个 handleSubmit 方法，它将在表单提交时被调用。
@@ -706,12 +730,12 @@ function decreaseProgress() {
 用途：用于定义组件可以接受的外部属性（即参数），这些属性可以是静态的（固定值）或动态的（可变化的数据）。通过props，父组件可以控制子组件的行为或外观，而无需直接修改子组件的内部状态。
 例如："props": { "placeholder": "请输入用户名" } 定义了一个名为 placeholder 的属性，其值为 "请输入用户名"。
 注意：
-· 在书写上不要包含特殊字符
-  例如：
+· 在书写上不要包含特殊字符，如"@"、":"等等
+  示例：
   错误写法："props": { "@click": "resetForm" }"
   正确写法："props": { "click": "resetForm" }"
 · 按钮文本作为 props 属性：若在组件（如按钮）上添加显示文字，不应在 props 外部定义，应包含在 props 中。
-  例如：
+  示例：
   错误写法：{
     "componentName": "TinyButton",
     "props": {
@@ -797,21 +821,6 @@ function decreaseProgress() {
                   "id": ""
                 }
               ]
-            },
-            {
-              "componentName": "TinyFormItem",
-              "children": [
-                {
-                  "componentName": "TinyButton",
-                  "props": {
-                    "text": "",
-                    "type": "",
-                    "onClick": ""
-                  },
-                  "id": ""
-                }
-              ],
-              "id": ""
             }
           ]
         }
@@ -821,5 +830,5 @@ function decreaseProgress() {
   "fileName": "" //顶层结构必须包含该字段
 }
 
-需求如下：需要一个个人信息填写表单
+需求如下：
 \`\`\``