Merge remote-tracking branch 'origin/ospp-2024/optimize-schema-genera…

…tion' into ospp-2024/optimize-schema-generation

packages/plugins/robot/docs/README.md

@@ -0,0 +1,35 @@
+# 打开 AI 聊天窗口
+
+![robot_process1.png](image/robot_process1.png)
+
+
+# 配置 AI 访问令牌
+
+为了确保您的会话安全且有效，您需要输入属于您个人的 AI 访问令牌。请按照以下步骤操作：
+
+1. 在聊天窗口中找到令牌输入区域。
+2. 输入您从对应 AI 模型官网获取的访问令牌。
+3. 确保令牌的准确性，以避免连接错误。
+
+![robot_process2.png](image/robot_process2.png)
+
+**如何获取 Kimi 接口访问令牌？**
+
+- 访问令牌需要您自行前往 [Moonshot AI 开放平台](https://platform.moonshot.cn/console/api-keys) 生成并保存。
+  - 在左侧菜单选择 “ API Key 管理 ”，根据指引创建个人密钥。
+    ![key_process1.png](image/key_process1.png)
+
+  - 注意密钥只会在新建后显示一次，妥善保存您所生成的密钥。如果您遗失了令牌，请登录到您的 API Key 管理页面重新生成新的令牌。
+    ![key_process2.png](image/key_process2.png)
+
+
+# 通过提问，让AI生成页面
+
+您可以上传图片，并通过语音或手动输入需求描述生成代码。AI 生成的代码将自动渲染在画布上，实时显示页面效果。
+
+![img_1.png](image/robot_process3.png)
+
+
+# 通过继续提问，让AI修改生成的页面
+
+如需对生成的页面进行调整，只需继续提问。AI 将根据您的新指令对页面进行迭代修改，帮助您逐步完善设计与功能。

packages/plugins/robot/src/ContentDialog.vue

@@ -45,24 +45,36 @@ export default {
 .code-block {
   position: relative;
 }
-.code-block:hover .copy-btn {
+
+.code-block:hover .code-block-btn {
   opacity: 1;
   transition: opacity 0.3s ease, transform 0.3s ease;
 }
+
 .code-container {
   padding: 10px;
   border-radius: 5px;
 }
+
+.generate-btn {
+  right: 75px;
+}
+
 .copy-btn {
   width: 56px;
   font-size: 12px;
+  right: 8px;
+}
+
+.code-block-btn {
+  cursor: pointer;
+  position: absolute;
+  top: 8px;
+  font-size: 12px;
+  line-height: 12px;
   background-color: #ccc;
   border: none;
   padding: 5px 10px;
-  cursor: pointer;
-  position: absolute;
-  top: 5px;
-  right: 5px;
   border-radius: 3px;
   transition: all 0.3s;
   opacity: 0;

packages/plugins/robot/src/Main.vue

@@ -183,6 +183,8 @@ export default {
       )
     }
 
+    // TODO：返回schema格式的代码
+    // eslint-disable-next-line no-unused-vars
     const createNewPage = (schema) => {
       if (!(pageSettingState.isNew && pageSettingState.isAIPage)) {
         pageSettingState.isNew = true

packages/plugins/robot/src/js/useDialogContent.js

@@ -23,8 +23,8 @@ export default function useMarkdown() {
       } else {
         highlighted = md.utils.escapeHtml(str)
       }
-      const copyButtonText = '复制' // Make this configurable
-      return `<div class="code-block"><pre class="hljs code-container"><code>${highlighted}</code></pre><button class="copy-btn">${copyButtonText}</button></div>`
+      const copyButtonText = '复制'
+      return `<div class="code-block"><pre class="hljs code-container"><code>${highlighted}</code></pre><button class="copy-btn code-block-btn">${copyButtonText}</button></div>`
     }
   })