From fa862751fbfcaee13e3cc292c6ee0e4072fd66be Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Wed, 11 Jun 2025 17:57:11 +0800
Subject: [PATCH 1/6] feat: New MCP comprehensive example added to the official
 website (#3497)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 官网新增mcp综合示例

* fix: 修复 tiny-robot-chat 组件中的提示项和建议项的传递逻辑，优化 Demo 组件的 QR 码展示样式

* fix: 修复引入路径问题
---
 examples/sites/package.json                   |   1 +
 examples/sites/src/App.vue                    |   2 +-
 .../components-doc => }/components/anchor.vue |   0
 .../components/api-docs.vue                   |   0
 .../components/async-highlight.vue            |   0
 .../components/contributor.vue                |   0
 .../components-doc => }/components/demo.vue   |   2 +-
 .../components/float-settings.vue             |   0
 .../components-doc => }/components/header.vue |   0
 .../components/mcp-docs.vue                   |   0
 .../tiny-robot-chat.vue                       |  26 +-
 .../components/version-tip.vue                |   0
 .../DifyModelProvider.ts                      |   1 -
 examples/sites/src/composable/storage.ts      |  71 ++++
 .../useTasksFinish.ts                         |   0
 .../useTinyRobot.ts                           |   0
 .../composition => composable}/utils.ts       |   6 +-
 examples/sites/src/router.js                  |   6 +
 .../sites/src/views/components-doc/common.vue |  16 +-
 .../sites/src/views/comprehensive/Demo.vue    | 211 ++++++++++
 .../sites/src/views/comprehensive/index.vue   | 391 ++++++++++++++++++
 .../src/views/comprehensive/products.json     |  99 +++++
 .../src/views/comprehensive/types/index.ts    |  37 ++
 examples/sites/src/views/layout/layout.vue    |   4 +-
 24 files changed, 848 insertions(+), 25 deletions(-)
 rename examples/sites/src/{views/components-doc => }/components/anchor.vue (100%)
 rename examples/sites/src/{views/components-doc => }/components/api-docs.vue (100%)
 rename examples/sites/src/{views/components-doc => }/components/async-highlight.vue (100%)
 rename examples/sites/src/{views/components-doc => }/components/contributor.vue (100%)
 rename examples/sites/src/{views/components-doc => }/components/demo.vue (99%)
 rename examples/sites/src/{views/components-doc => }/components/float-settings.vue (100%)
 rename examples/sites/src/{views/components-doc => }/components/header.vue (100%)
 rename examples/sites/src/{views/components-doc => }/components/mcp-docs.vue (100%)
 rename examples/sites/src/{views/components-doc => components}/tiny-robot-chat.vue (80%)
 rename examples/sites/src/{views/components-doc => }/components/version-tip.vue (100%)
 rename examples/sites/src/{views/components-doc/composition => composable}/DifyModelProvider.ts (99%)
 create mode 100644 examples/sites/src/composable/storage.ts
 rename examples/sites/src/{views/components-doc/composition => composable}/useTasksFinish.ts (100%)
 rename examples/sites/src/{views/components-doc/composition => composable}/useTinyRobot.ts (100%)
 rename examples/sites/src/{views/components-doc/composition => composable}/utils.ts (97%)
 create mode 100644 examples/sites/src/views/comprehensive/Demo.vue
 create mode 100644 examples/sites/src/views/comprehensive/index.vue
 create mode 100644 examples/sites/src/views/comprehensive/products.json
 create mode 100644 examples/sites/src/views/comprehensive/types/index.ts

diff --git a/examples/sites/package.json b/examples/sites/package.json
index bd3c7575c8..5956602b10 100644
--- a/examples/sites/package.json
+++ b/examples/sites/package.json
@@ -58,6 +58,7 @@
     "@vue/shared": "^3.4.31",
     "@vueuse/core": "^12.7.0",
     "@vueuse/head": "0.7.13",
+    "crypto-js": "^4.2.0",
     "github-markdown-css": "~5.1.0",
     "highlight.js": "^11.5.1",
     "marked": "^4.3.0",
diff --git a/examples/sites/src/App.vue b/examples/sites/src/App.vue
index 96f7face8d..22969fc421 100644
--- a/examples/sites/src/App.vue
+++ b/examples/sites/src/App.vue
@@ -17,7 +17,7 @@ import { iconClose } from '@opentiny/vue-icon'
 import { appData } from './tools'
 import useTheme from './tools/useTheme'
 import { useNextClient } from '@opentiny/next-vue'
-import { globalConversation } from './views/components-doc/composition/utils'
+import { globalConversation } from './composable/utils'
 
 export default defineComponent({
   name: 'AppVue',
diff --git a/examples/sites/src/views/components-doc/components/anchor.vue b/examples/sites/src/components/anchor.vue
similarity index 100%
rename from examples/sites/src/views/components-doc/components/anchor.vue
rename to examples/sites/src/components/anchor.vue
diff --git a/examples/sites/src/views/components-doc/components/api-docs.vue b/examples/sites/src/components/api-docs.vue
similarity index 100%
rename from examples/sites/src/views/components-doc/components/api-docs.vue
rename to examples/sites/src/components/api-docs.vue
diff --git a/examples/sites/src/views/components-doc/components/async-highlight.vue b/examples/sites/src/components/async-highlight.vue
similarity index 100%
rename from examples/sites/src/views/components-doc/components/async-highlight.vue
rename to examples/sites/src/components/async-highlight.vue
diff --git a/examples/sites/src/views/components-doc/components/contributor.vue b/examples/sites/src/components/contributor.vue
similarity index 100%
rename from examples/sites/src/views/components-doc/components/contributor.vue
rename to examples/sites/src/components/contributor.vue
diff --git a/examples/sites/src/views/components-doc/components/demo.vue b/examples/sites/src/components/demo.vue
similarity index 99%
rename from examples/sites/src/views/components-doc/components/demo.vue
rename to examples/sites/src/components/demo.vue
index 71a57c2663..ce4c8e3fe1 100644
--- a/examples/sites/src/views/components-doc/components/demo.vue
+++ b/examples/sites/src/components/demo.vue
@@ -75,7 +75,7 @@ import { i18nByKey, getWord } from '@/i18n'
 import { $split, fetchDemosFile } from '@/tools'
 import { Tabs as TinyTabs, TabItem as TinyTabItem, Button as TinyButton } from '@opentiny/vue'
 import { AutoTip as vAutoTip } from '@opentiny/vue-directive'
-import { languageMap, vueComponents, getWebdocPath, staticDemoPath } from '../cmp-config'
+import { languageMap, vueComponents, getWebdocPath, staticDemoPath } from '../views/components-doc/cmp-config'
 import { router } from '@/router.js'
 import demoConfig from '@demos/config.js'
 import { useApiMode, useTemplateMode } from '@/tools'
diff --git a/examples/sites/src/views/components-doc/components/float-settings.vue b/examples/sites/src/components/float-settings.vue
similarity index 100%
rename from examples/sites/src/views/components-doc/components/float-settings.vue
rename to examples/sites/src/components/float-settings.vue
diff --git a/examples/sites/src/views/components-doc/components/header.vue b/examples/sites/src/components/header.vue
similarity index 100%
rename from examples/sites/src/views/components-doc/components/header.vue
rename to examples/sites/src/components/header.vue
diff --git a/examples/sites/src/views/components-doc/components/mcp-docs.vue b/examples/sites/src/components/mcp-docs.vue
similarity index 100%
rename from examples/sites/src/views/components-doc/components/mcp-docs.vue
rename to examples/sites/src/components/mcp-docs.vue
diff --git a/examples/sites/src/views/components-doc/tiny-robot-chat.vue b/examples/sites/src/components/tiny-robot-chat.vue
similarity index 80%
rename from examples/sites/src/views/components-doc/tiny-robot-chat.vue
rename to examples/sites/src/components/tiny-robot-chat.vue
index 6ef89550b6..92ea9e692f 100644
--- a/examples/sites/src/views/components-doc/tiny-robot-chat.vue
+++ b/examples/sites/src/components/tiny-robot-chat.vue
@@ -2,13 +2,13 @@
   <!-- mcp-robot弹窗 -->
   <tr-container v-model:show="appData.showTinyRobot" v-model:fullscreen="fullscreen">
     <div v-if="messages.length === 0">
-      <tr-welcome title="智能助手" description="您好，我是Opentiny AI智能助手" :icon="welcomeIcon">
+      <tr-welcome title="智能助手" description="您好，我是OpenTiny AI智能助手" :icon="welcomeIcon">
         <template #footer>
           <div class="welcome-footer"></div>
         </template>
       </tr-welcome>
       <tr-prompts
-        :items="promptItems"
+        :items="customPromptItems"
         :wrap="true"
         item-class="prompt-item"
         class="tiny-prompts"
@@ -18,7 +18,7 @@
     <tr-bubble-list v-else :items="messages" :roles="roles" auto-scroll></tr-bubble-list>
     <template #footer>
       <div class="chat-input">
-        <TrSuggestionPills :items="suggestionPillItems" @item-click="handleSuggestionPillItemClick" /><br />
+        <TrSuggestionPills :items="customSuggestionPillItems" @item-click="handleSuggestionPillItemClick" /><br />
         <tr-sender
           ref="senderRef"
           mode="single"
@@ -42,20 +42,21 @@
 <script setup lang="ts">
 import { TrBubbleList, TrContainer, TrPrompts, TrSender, TrWelcome, TrSuggestionPills } from '@opentiny/tiny-robot'
 import { GeneratingStatus } from '@opentiny/tiny-robot-kit'
-import { useTinyRobot } from './composition/useTinyRobot'
-import { appData } from '../../tools/appData'
+import { useTinyRobot } from '../composable/useTinyRobot'
+import { appData } from '../tools/appData'
+
+const props = defineProps<{
+  promptItems: any[]
+  suggestionPillItems: any[]
+}>()
 
 const {
-  client,
   fullscreen,
-  show,
   welcomeIcon,
-  promptItems,
-  computedMessages,
+  promptItems: defaultPromptItems,
   messages,
   messageState,
   inputMessage,
-  sendMessage,
   abortRequest,
   roles,
   handlePromptItemClick,
@@ -64,9 +65,12 @@ const {
   clearTemplate,
   handleSendMessage,
   handleMessageKeydown,
-  suggestionPillItems,
+  suggestionPillItems: defaultSuggestionPillItems,
   handleSuggestionPillItemClick
 } = useTinyRobot()
+
+const customPromptItems = props.promptItems || defaultPromptItems
+const customSuggestionPillItems = props.suggestionPillItems || defaultSuggestionPillItems
 </script>
 
 <style scoped lang="less">
diff --git a/examples/sites/src/views/components-doc/components/version-tip.vue b/examples/sites/src/components/version-tip.vue
similarity index 100%
rename from examples/sites/src/views/components-doc/components/version-tip.vue
rename to examples/sites/src/components/version-tip.vue
diff --git a/examples/sites/src/views/components-doc/composition/DifyModelProvider.ts b/examples/sites/src/composable/DifyModelProvider.ts
similarity index 99%
rename from examples/sites/src/views/components-doc/composition/DifyModelProvider.ts
rename to examples/sites/src/composable/DifyModelProvider.ts
index 58b12cfda4..dd4f830d51 100644
--- a/examples/sites/src/views/components-doc/composition/DifyModelProvider.ts
+++ b/examples/sites/src/composable/DifyModelProvider.ts
@@ -33,7 +33,6 @@ export class DifyModelProvider extends BaseModelProvider {
     try {
       // 验证请求的messages属性，必须是数组，且每个消息必须有role\content属性
       const lastMessage = request.messages[request.messages.length - 1].content
-
       // 模拟异步流式响应
       const response = await fetch(`${this.config.apiUrl}/chat-messages`, {
         method: 'POST',
diff --git a/examples/sites/src/composable/storage.ts b/examples/sites/src/composable/storage.ts
new file mode 100644
index 0000000000..b1ecee9f0c
--- /dev/null
+++ b/examples/sites/src/composable/storage.ts
@@ -0,0 +1,71 @@
+import { ref, watch } from 'vue'
+
+function parse(str) {
+  if (str === null) return undefined
+  const type = str[0]
+  const strVal = str.slice(1)
+  // 对象时，有可能是Date, 否则反解析后统一是对象
+  if (type === 'o' || type === 'b') {
+    let val = JSON.parse(strVal)
+    return typeof val === 'string' ? new Date(val) : val
+  }
+  if (type === 'n') return +Number(strVal)
+  if (type === 's') return strVal
+}
+
+// 带前缀的保存值
+function save(store, k, v) {
+  const type = typeof v
+  store.setItem(k, type[0] + (type === 'object' ? JSON.stringify(v) : v))
+}
+
+/**
+ * 快速的保存值到 sessionStorage, localStorage.
+ * 支持基本类型，时间，数组，对象,null，不存在的键值返回undefined 。
+ * 不支持：Map,Set, 以及多级串联赋值，比如：$session.obj.name="abcd"
+ */
+function handler(storage) {
+  return {
+    get(target, propKey, receiver) {
+      return parse(storage.getItem(propKey))
+    },
+    set(target, propKey, value) {
+      save(storage, propKey, value)
+      return true
+    }
+  }
+}
+
+/** * 快速读写sessionStorage 示例： $session.abc="shen" */
+const $session = new Proxy({}, handler(sessionStorage))
+
+/** * 快速读写 localStorage 示例： $local.abc="shen" */
+const $local = new Proxy({}, handler(localStorage))
+
+/** * 全局共享值，刷新即丢失！  示例： $cache.abc="shen" */
+const $cache = {}
+
+const typeMatcher = { session: $session, local: $local, api: null }
+
+/**
+ * 用于记录用户行为,并保存到session,local 或api接口（api保存的功能还未实现）
+ * 示例：useAutoStore("session","key1")
+ *       useAutoStore("session","key2",100)
+ *       useAutoStore("session","key2",$session.key2 || 100)
+ * @param type 自动存储到的目标
+ * @param key 存储时的key
+ * @param defaultValue 默认值。
+ * @returns 响应式ref
+ */
+const useAutoStore = (type, key, defaultValue) => {
+  let refVar = ref(typeMatcher[type][key])
+  watch(refVar, (curr, prev) => {
+    typeMatcher[type][key] = curr
+  })
+
+  refVar.value = refVar.value ?? defaultValue
+
+  return refVar
+}
+
+export { $session, $local, $cache, useAutoStore }
diff --git a/examples/sites/src/views/components-doc/composition/useTasksFinish.ts b/examples/sites/src/composable/useTasksFinish.ts
similarity index 100%
rename from examples/sites/src/views/components-doc/composition/useTasksFinish.ts
rename to examples/sites/src/composable/useTasksFinish.ts
diff --git a/examples/sites/src/views/components-doc/composition/useTinyRobot.ts b/examples/sites/src/composable/useTinyRobot.ts
similarity index 100%
rename from examples/sites/src/views/components-doc/composition/useTinyRobot.ts
rename to examples/sites/src/composable/useTinyRobot.ts
diff --git a/examples/sites/src/views/components-doc/composition/utils.ts b/examples/sites/src/composable/utils.ts
similarity index 97%
rename from examples/sites/src/views/components-doc/composition/utils.ts
rename to examples/sites/src/composable/utils.ts
index 66745f654d..217bcfc3aa 100644
--- a/examples/sites/src/views/components-doc/composition/utils.ts
+++ b/examples/sites/src/composable/utils.ts
@@ -5,7 +5,11 @@
 
 import type { ChatMessage, ChatCompletionResponse, StreamHandler } from '@opentiny/tiny-robot-kit'
 import type { ChatCompletionRequest } from '@opentiny/tiny-robot-kit'
-import type { Ref } from 'vue'
+import { ref, type Ref } from 'vue'
+
+export { $local } from './storage'
+
+export const showTinyRobot = ref(true)
 
 export const globalConversation = {
   id: '',
diff --git a/examples/sites/src/router.js b/examples/sites/src/router.js
index d16aa59e1e..9b471c4a94 100644
--- a/examples/sites/src/router.js
+++ b/examples/sites/src/router.js
@@ -7,6 +7,7 @@ const Components = () => import('@/views/components-doc/index.vue')
 const Docs = () => import('@/views/docs/docs.vue')
 const Overview = () => import('@/views/overview.vue')
 const Features = () => import('@/views/features.vue')
+const Comprehensive = () => import('@/views/comprehensive/index.vue')
 
 const context = import.meta.env.VITE_CONTEXT
 
@@ -18,6 +19,11 @@ let routes = [
     name: 'overview',
     children: [{ name: 'Overview', path: '', component: Overview, meta: { title: '组件总览 | TinyVue' } }]
   },
+  {
+    path: `${context}:all?/zh-CN/:theme/comprehensive`,
+    component: Comprehensive,
+    name: 'comprehensive'
+  },
   // 文档
   {
     path: `${context}:all?/:lang/:theme/docs/:docId`,
diff --git a/examples/sites/src/views/components-doc/common.vue b/examples/sites/src/views/components-doc/common.vue
index 855dd35a12..eeaaca598e 100644
--- a/examples/sites/src/views/components-doc/common.vue
+++ b/examples/sites/src/views/components-doc/common.vue
@@ -99,16 +99,16 @@ import { debounce } from '@opentiny/utils'
 import { i18nByKey, getWord, $clone, useApiMode } from '@/tools'
 import { router } from '@/router.js'
 import { getWebdocPath } from './cmp-config'
-import DemoBox from './components/demo.vue'
-import AsideAnchor from './components/anchor.vue'
-import ComponentHeader from './components/header.vue'
-import ComponentContributor from './components/contributor.vue'
-import ApiDocs from './components/api-docs.vue'
-import McpDocs from './components/mcp-docs.vue'
-import useTasksFinish from './composition/useTasksFinish'
+import DemoBox from '../../components/demo.vue'
+import AsideAnchor from '../../components/anchor.vue'
+import ComponentHeader from '../../components/header.vue'
+import ComponentContributor from '../../components/contributor.vue'
+import ApiDocs from '../../components/api-docs.vue'
+import McpDocs from '../../components/mcp-docs.vue'
+import useTasksFinish from '../../composable/useTasksFinish'
 import { appData } from '../../tools/appData'
 
-import robotChat from './tiny-robot-chat.vue'
+import robotChat from '../../components/tiny-robot-chat.vue'
 
 const props = defineProps({ loadData: {}, appMode: {}, demoKey: {} })
 
diff --git a/examples/sites/src/views/comprehensive/Demo.vue b/examples/sites/src/views/comprehensive/Demo.vue
new file mode 100644
index 0000000000..b15af5467d
--- /dev/null
+++ b/examples/sites/src/views/comprehensive/Demo.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="products-page">
+    <div class="page-header">
+      <h3>商品管理</h3>
+    </div>
+    <div class="page-content">
+      <div class="button-box">
+        <tiny-button type="info" @click="addProductToEdit"> 添加商品 </tiny-button>
+        <tiny-button type="danger" @click="removeProduct"> 删除商品 </tiny-button>
+        <tiny-button type="success" @click="saveProduct"> 保存 </tiny-button>
+      </div>
+      <tiny-grid
+        auto-resize
+        ref="gridRef"
+        :data="products"
+        :height="500"
+        :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+        :tiny_mcp_config="{
+          server,
+          business: {
+            id: 'product-list',
+            description: '商品列表'
+          }
+        }"
+      >
+        <tiny-grid-column type="index" width="50" />
+        <tiny-grid-column type="selection" width="50" />
+        <tiny-grid-column title="商品图片" width="100">
+          <template #default="{ row }">
+            <tiny-image :src="row.image" :preview-src-list="[row.image]" class="product-image" />
+          </template>
+        </tiny-grid-column>
+
+        <tiny-grid-column field="name" title="商品名称" :editor="{ component: 'input' }" />
+        <tiny-grid-column
+          field="price"
+          :editor="{
+            component: 'input',
+            attrs: { type: 'number' }
+          }"
+          title="价格"
+        >
+          <template #default="{ row }"> ¥{{ row.price }} </template>
+        </tiny-grid-column>
+        <tiny-grid-column
+          field="stock"
+          :editor="{
+            component: 'input',
+            attrs: { type: 'number' }
+          }"
+          title="库存"
+        />
+        <tiny-grid-column
+          field="category"
+          :editor="{
+            component: 'select',
+            options: [
+              { label: '手机', value: 'phones' },
+              { label: '笔记本', value: 'laptops' },
+              { label: '平板', value: 'tablets' }
+            ]
+          }"
+          title="分类"
+        >
+          <template #default="{ row }">
+            {{ categoryLabels[row.category] }}
+          </template>
+        </tiny-grid-column>
+        <tiny-grid-column
+          field="status"
+          :editor="{
+            component: 'select',
+            options: [
+              { label: '上架', value: 'on' },
+              { label: '下架', value: 'off' }
+            ]
+          }"
+          title="状态"
+        >
+          <template #default="{ row }">
+            <tiny-tag :type="row.status === 'on' ? 'success' : 'warning'">
+              {{ row.status === 'on' ? '上架' : '下架' }}
+            </tiny-tag>
+          </template>
+        </tiny-grid-column>
+      </tiny-grid>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import productsData from './products.json'
+import { $local } from '../../composable/utils'
+import { useNextServer } from '@opentiny/next-vue'
+import { TinyGrid, TinyGridColumn, TinyButton, TinyTag, TinyModal, TinyImage } from '@opentiny/vue'
+
+if (!$local.products) {
+  $local.products = productsData
+}
+
+const products = ref($local.products)
+const gridRef = ref(null)
+
+const categoryLabels: Record<string, string> = {
+  phones: '手机',
+  laptops: '笔记本',
+  tablets: '平板'
+}
+
+// 新增商品到编辑弹窗
+const addProductToEdit = async () => {
+  gridRef?.value?.insert({
+    'image': 'https://img1.baidu.com/it/u=1559062020,1043707656&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
+    price: 10000,
+    stock: 100,
+    category: 'phones',
+    status: 'on'
+  })
+}
+
+const removeProduct = () => {
+  const selectedRows = gridRef?.value?.getSelectRecords()
+  if (selectedRows.length === 0) {
+    TinyModal.confirm({
+      message: '请选择要删除的商品',
+      title: '删除商品',
+      status: 'warning'
+    })
+    return
+  }
+  if (selectedRows.length > 0) {
+    gridRef?.value?.removeSelecteds()
+  }
+}
+
+const saveProduct = () => {
+  setTimeout(() => {
+    const data = gridRef?.value?.getTableData()
+    $local.products = data.tableData
+    TinyModal.message({
+      message: '保存成功',
+      status: 'success'
+    })
+  }, 1000)
+}
+
+const { server } = useNextServer({
+  serverInfo: { name: 'commodity-config', version: '1.0.0' }
+})
+</script>
+
+<style scoped lang="less">
+.products-page {
+  .page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding: 16px 20px;
+    background-color: #ffffff;
+    border-radius: 8px;
+    position: relative;
+    border: 1px solid #edf2f7;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 4px;
+      height: 24px;
+      background: #1677ff;
+      border-radius: 2px;
+      transform: translateY(-50%);
+    }
+
+    h3 {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 600;
+      color: #1f2937;
+      position: relative;
+      padding-left: 20px;
+      letter-spacing: 0.3px;
+    }
+  }
+}
+
+.button-box {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 20px;
+  justify-content: flex-end;
+}
+.loading-state {
+  padding: 20px;
+}
+
+.product-image {
+  width: 40px;
+  height: 40px;
+  border-radius: 4px;
+}
+.page-content {
+  padding: 20px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
+}
+</style>
diff --git a/examples/sites/src/views/comprehensive/index.vue b/examples/sites/src/views/comprehensive/index.vue
new file mode 100644
index 0000000000..310d78cc59
--- /dev/null
+++ b/examples/sites/src/views/comprehensive/index.vue
@@ -0,0 +1,391 @@
+<template>
+  <div class="header">
+    <div class="qr-code-trigger" @click="showQrCode = true">
+      <IconAi class="qr-icon" />
+      <div class="qr-text-wrapper">
+        <span class="qr-label">手机遥控</span>
+        <span class="qr-desc">扫码体验移动端操作</span>
+      </div>
+    </div>
+  </div>
+  <div class="app-container">
+    <!-- 主体内容区域 -->
+    <div class="main-content">
+      <Demo />
+    </div>
+    <div class="right-panel" :class="{ collapsed: !appData.showTinyRobot }">
+      <tiny-robot-chat :prompt-items="promptItems" :suggestion-pill-items="suggestionPillItems" />
+    </div>
+    <IconAi @click="appData.showTinyRobot = !appData.showTinyRobot" class="style-settings-icon"></IconAi>
+  </div>
+
+  <!-- QR Code Modal -->
+  <Teleport to="body">
+    <div class="qr-modal" v-if="showQrCode" @click.self="showQrCode = false">
+      <div class="qr-modal-content">
+        <div class="qr-modal-header">
+          <h3>手机遥控体验</h3>
+        </div>
+        <div class="qr-modal-body">
+          <div class="qr-wrapper">
+            <tiny-qr-code :value="sessionUrl" :size="200" color="#1677ff"></tiny-qr-code>
+            <div class="qr-status">
+              <div class="status-dot"></div>
+              <span>链接已生成</span>
+            </div>
+          </div>
+          <div class="qr-instructions">
+            <p class="instruction-title">使用说明</p>
+            <ol class="instruction-steps">
+              <li>使用微信扫一扫，扫描上方二维码</li>
+              <li>然后点击微信右上角的 "..." 图标</li>
+              <li>选择在默认浏览器中打开</li>
+              <li>可以选择直接语音交互也可使用AI对话框进行交互</li>
+            </ol>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { watch, ref, h } from 'vue'
+import TinyRobotChat from '@/components/tiny-robot-chat.vue'
+import { globalConversation } from '@/composable/utils'
+import { IconAi } from '@opentiny/tiny-robot-svgs'
+import CryptoJS from 'crypto-js'
+import { TinyQrCode } from '@opentiny/vue'
+import Demo from './Demo.vue'
+import { appData } from '@/tools/appData'
+
+appData.showTinyRobot = true
+const showQrCode = ref(false)
+const sessionUrl = ref('placeholder')
+
+const promptItems = [
+  {
+    label: '识别网页的内容',
+    description: '帮我在商品列表中查询最贵的手机和最便宜的笔记本',
+    icon: h('span', { style: { fontSize: '18px' } }, '💡')
+  },
+  {
+    label: '智能操作网页',
+    description: '帮我在商品列表中删除最贵的且分类为手机的商品',
+    icon: h('span', { style: { fontSize: '18px' } }, '🕹')
+  },
+  {
+    label: '智能操作网页',
+    description: '帮我在商品列表中添加一个华为p60品牌的手机商品',
+    icon: h('span', { style: { fontSize: '18px' } }, '🕹')
+  }
+]
+
+const suggestionPillItems = [
+  {
+    id: '1',
+    text: '商品列表',
+    icon: h('span', { style: { fontSize: '18px' } }, '🏢')
+  }
+]
+
+watch(
+  () => globalConversation.sessionId,
+  (newVal) => {
+    if (newVal) {
+      const encryptedId = CryptoJS.AES.encrypt(newVal, 'secret-session-id').toString()
+
+      const secretId = encodeURIComponent(encryptedId)
+      sessionUrl.value = 'http://39.108.160.245?id=' + secretId
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped>
+.header {
+  width: calc(100% - 502px);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+  background-color: #f5f5f5;
+}
+
+.qr-code-trigger {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 12px 20px;
+  border-radius: 12px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: linear-gradient(135deg, #1677ff 0%, #06b6d4 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+.qr-code-trigger::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
+  transform: translateX(-100%);
+  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.qr-code-trigger:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(22, 119, 255, 0.3);
+}
+
+.qr-code-trigger:hover::before {
+  transform: translateX(100%);
+}
+
+.qr-icon {
+  font-size: 24px;
+  margin-right: 12px;
+  color: white;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+  animation: float 3s ease-in-out infinite;
+}
+
+.qr-text-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.qr-label {
+  font-size: 16px;
+  font-weight: 600;
+  color: white;
+  margin-bottom: 2px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.qr-desc {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.9);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-3px);
+  }
+}
+
+.qr-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  animation: fadeIn 0.3s ease;
+}
+
+.qr-modal-content {
+  background: white;
+  border-radius: 12px;
+  padding: 32px;
+  width: 460px;
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.qr-modal-header {
+  margin-bottom: 32px;
+}
+
+.qr-modal-header h3 {
+  font-size: 22px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.close-icon {
+  cursor: pointer;
+  font-size: 20px;
+  color: #999;
+  transition: color 0.3s;
+}
+
+.close-icon:hover {
+  color: #666;
+}
+
+.qr-modal-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.qr-wrapper {
+  background-color: #f8f9fa;
+  padding: 24px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 24px;
+  position: relative;
+  animation: glow 2s ease-in-out infinite;
+}
+
+.qr-wrapper::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  background: linear-gradient(45deg, #1677ff, #10b981, #1677ff);
+  border-radius: 10px;
+  z-index: -1;
+  filter: blur(8px);
+  opacity: 0.5;
+  transition: opacity 0.3s ease;
+}
+
+.qr-wrapper:hover::before {
+  opacity: 0.7;
+}
+
+@keyframes glow {
+  0% {
+    box-shadow:
+      0 0 5px rgba(22, 119, 255, 0.2),
+      0 0 10px rgba(22, 119, 255, 0.2),
+      0 0 15px rgba(22, 119, 255, 0.2);
+  }
+  50% {
+    box-shadow:
+      0 0 10px rgba(22, 119, 255, 0.3),
+      0 0 20px rgba(22, 119, 255, 0.3),
+      0 0 30px rgba(22, 119, 255, 0.3);
+  }
+  100% {
+    box-shadow:
+      0 0 5px rgba(22, 119, 255, 0.2),
+      0 0 10px rgba(22, 119, 255, 0.2),
+      0 0 15px rgba(22, 119, 255, 0.2);
+  }
+}
+
+.qr-status {
+  display: flex;
+  align-items: center;
+  margin-top: 16px;
+  background: #fff;
+  padding: 6px 12px;
+  border-radius: 16px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  background-color: #10b981;
+  border-radius: 50%;
+  margin-right: 8px;
+  animation: pulse 2s infinite;
+}
+
+.qr-instructions {
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.instruction-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #1f2937;
+  margin-bottom: 12px;
+}
+
+.instruction-steps {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.instruction-steps li {
+  color: #4b5563;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+
+.instruction-steps li:last-child {
+  margin-bottom: 0;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.app-container {
+  display: flex;
+  height: 100%;
+  position: relative;
+}
+
+.main-content {
+  padding: 10px 10px;
+  height: 100%;
+  width: calc(100% - 502px);
+  position: relative;
+}
+
+.right-panel {
+  width: 480px;
+  height: 100%;
+  position: relative;
+  background: #fff;
+  border-left: 1px solid #e4e7ed;
+}
+
+.right-panel.collapsed {
+  width: 0;
+  overflow: hidden;
+}
+
+.style-settings-icon {
+  position: fixed;
+  bottom: 100px;
+  right: 100px;
+  font-size: 24px;
+  z-index: 30;
+  cursor: pointer;
+}
+</style>
diff --git a/examples/sites/src/views/comprehensive/products.json b/examples/sites/src/views/comprehensive/products.json
new file mode 100644
index 0000000000..718fff1c72
--- /dev/null
+++ b/examples/sites/src/views/comprehensive/products.json
@@ -0,0 +1,99 @@
+[
+  
+  {
+    "id": 1,
+    "name": "iPhone 16",
+    "price": 5999,
+    "description": "苹果手机",
+    "image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2FO1CN011qHTQ81edxfMcnfNR_%21%216000000003895-0-yinhe.jpg_300x300.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1750986769&t=4570d81c9f0301ab1745c75dfff9f272",
+    "category": "phones",
+    "stock": 100,
+    "status": "on",
+    "createdAt": "2024-03-20",
+    "updatedAt": "2025-05-29T21:56:30.481Z"
+  },
+  {
+    "id": 2,
+    "name": "MacBook Pro",
+    "price": 12999,
+    "description": "笔记本电脑",
+    "image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fg-search1.alicdn.com%2Fimg%2Fbao%2Fuploaded%2Fi3%2F1831488473%2FO1CN01I8MRyC2CSgWGbhVjJ_%21%211831488473.jpg_300x300.jpg&refer=http%3A%2F%2Fg-search1.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1750986810&t=9eb9c9e0765244130200dd0f935b9cea",
+    "category": "laptops",
+    "stock": 50,
+    "status": "off",
+    "createdAt": "2024-03-20",
+    "updatedAt": "2024-03-20"
+  },
+  {
+    "id": 3,
+    "name": "iPad",
+    "price": 2399,
+    "description": "平板电脑",
+    "image": "https://respic.3d66.com/coverimg/cache/f2d1/53893cd4d00efe87132f1e3371b72339.jpg%21medium-size-2?v=17611204&k=D41D8CD98F00B204E9800998ECF8427E",
+    "category": "tablets",
+    "stock": 12999,
+    "status": "on",
+    "createdAt": "2025-05-27T00:49:29.993Z",
+    "updatedAt": "2025-05-29T16:11:49.743Z"
+  },
+  {
+    "id": 4,
+    "name": "Huawei Pura 70",
+    "price": 6499,
+    "description": "华为手机",
+    "image": "https://img1.baidu.com/it/u=1559062020,1043707656&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
+    "category": "phones",
+    "stock": 1999,
+    "status": "on",
+    "createdAt": "2025-05-27T00:54:38.771Z",
+    "updatedAt": "2025-05-29T22:29:40.124Z"
+  },
+  {
+    "id": 5,
+    "name": "Huawei Mate XT ultimate",
+    "price": 23999,
+    "description": "华为手机 非凡大师",
+    "image": "https://img2.baidu.com/it/u=2892977680,910281472&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
+    "category": "phones",
+    "stock": 100,
+    "status": "on",
+    "createdAt": "2025-05-27T00:54:38.771Z",
+    "updatedAt": "2025-05-30T17:40:59.199Z"
+  },
+  {
+    "id": 6,
+    "name": "小米15",
+    "price": 4999,
+    "description": "小米手机",
+    "image": "https://img2.baidu.com/it/u=2892977680,910281472&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
+    "category": "phones",
+    "stock": 222,
+    "status": "off",
+    "createdAt": "2025-05-29T00:30:02.226Z",
+    "updatedAt": "2025-05-29T16:14:35.150Z"
+  },
+  {
+    "id": 7,
+    "name": "小米 13",
+    "price": 3999,
+    "description": "小米手机",
+    "image": "https://img1.baidu.com/it/u=809120544,2106407569&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
+    "category": "phones",
+    "stock": 2222,
+    "status": "on",
+    "createdAt": "2025-05-29T00:32:46.308Z",
+    "updatedAt": "2025-05-30T21:28:28.543Z"
+  },
+  {
+    "id": 8,
+    "name": "Vivo X90",
+    "price": 2999,
+    "description": "Vivo手机",
+    "image": "https://img2.baidu.com/it/u=2892977680,910281472&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
+    "category": "phones",
+    "stock": 3999,
+    "status": "on",
+    "createdAt": "2025-05-27T00:54:38.771Z",
+    "updatedAt": "2025-05-30T17:40:59.199Z"
+  }
+]
diff --git a/examples/sites/src/views/comprehensive/types/index.ts b/examples/sites/src/views/comprehensive/types/index.ts
new file mode 100644
index 0000000000..ac736adb2b
--- /dev/null
+++ b/examples/sites/src/views/comprehensive/types/index.ts
@@ -0,0 +1,37 @@
+// 用户类型
+export interface User {
+  id: number
+  username: string
+  avatar?: string
+}
+
+// 商品类型
+export interface Product {
+  id: number
+  name: string
+  price: number
+  description?: string
+  image: string
+  category: string
+  stock: number
+  status: 'on' | 'off' // on: 上架, off: 下架
+  createdAt?: string
+  updatedAt?: string
+}
+
+// 登录表单类型
+export interface LoginForm {
+  username: string
+  password: string
+}
+
+// 商品表单类型
+export interface ProductForm {
+  name: string
+  price: number
+  description: string
+  image: string
+  category: string
+  stock: number
+  status: 'on' | 'off'
+}
diff --git a/examples/sites/src/views/layout/layout.vue b/examples/sites/src/views/layout/layout.vue
index 26f7b5401e..abd216984f 100644
--- a/examples/sites/src/views/layout/layout.vue
+++ b/examples/sites/src/views/layout/layout.vue
@@ -63,8 +63,8 @@ import { genMenus, getMenuIcons } from '@/menus.jsx'
 import { router } from '@/router.js'
 import { getWord, i18nByKey, appData, appFn, useApiMode, useTemplateMode } from '@/tools'
 import useTheme from '@/tools/useTheme'
-import FloatSettings from '@/views/components-doc/components/float-settings.vue'
-import VersionTip from '@/views/components-doc/components/version-tip.vue'
+import FloatSettings from '@/components/float-settings.vue'
+import VersionTip from '@/components/version-tip.vue'
 
 export default defineComponent({
   name: 'LayoutVue',

From 299734c83b7b5adc03d165fb8c2386d5a502fbdb Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Fri, 13 Jun 2025 09:28:36 +0800
Subject: [PATCH 2/6] chore: Update changelog and add TinyVue intelligent
 component access documentation (#3498)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: 更新changelog，并添加TinyVue智能化组件接入文档

* chore: 添加菜单优化文档

* chore: 更新mcp.md文档中的sessionId说明，简化调试提示

* chore: 更新mcp-en.md文档中的标题和内容，统一语言为英文
---
 examples/sites/demos/pc/menus.js            |   5 +
 examples/sites/demos/pc/webdoc/changelog.md | 171 ++++++--------------
 examples/sites/demos/pc/webdoc/mcp-en.md    | 101 ++++++++++++
 examples/sites/demos/pc/webdoc/mcp.md       | 101 ++++++++++++
 4 files changed, 259 insertions(+), 119 deletions(-)
 create mode 100644 examples/sites/demos/pc/webdoc/mcp-en.md
 create mode 100644 examples/sites/demos/pc/webdoc/mcp.md

diff --git a/examples/sites/demos/pc/menus.js b/examples/sites/demos/pc/menus.js
index 1f95d26254..66d4c44f7c 100644
--- a/examples/sites/demos/pc/menus.js
+++ b/examples/sites/demos/pc/menus.js
@@ -42,6 +42,11 @@ const docMenusChildren = [
     'titleEn': 'theme-dark',
     'key': 'theme-dark'
   },
+  {
+    'title': '智能化',
+    'titleEn': 'mcp',
+    'key': 'mcp'
+  },
   { 'title': '表单校验配置', 'titleEn': 'formValid', 'key': 'form-valid' },
   { 'title': '常见问题', 'titleEn': 'faq', 'key': 'faq' },
   {
diff --git a/examples/sites/demos/pc/webdoc/changelog.md b/examples/sites/demos/pc/webdoc/changelog.md
index 02bd0460f7..17ed6762a0 100644
--- a/examples/sites/demos/pc/webdoc/changelog.md
+++ b/examples/sites/demos/pc/webdoc/changelog.md
@@ -4,6 +4,58 @@ Tiny Vue 团队在正常情况下使用 每月 发布策略。
 
 在此页面上，您只能看到我们的 更新日志 最新三个迭代的日志记录，如您要查看完整记录可以查看：[Release](https://github.com/opentiny/tiny-vue/releases)
 
+## v3.24.0/v2.24.0
+
+`2025/06/12`
+
+## What's Changed
+
+### Exciting New Features 🎉
+
+- feat(pager): reconstruct the multi-terminal template of the pager component from the vue template by @zzcr in <https://github.com/opentiny/tiny-vue/pull/3422>
+- feat(steps): Add style functionality for multi terminal custom step blocks by @chenxi-20 in <https://github.com/opentiny/tiny-vue/pull/3435>
+- feat(dialog-select): add support for clear and delete events, update related documents and sample codes by @zzcr in <https://github.com/opentiny/tiny-vue/pull/3437>
+- feat(qr-code): Add the necessary attributes to the responsive by @zzcr in <https://github.com/opentiny/tiny-vue/pull/3456>
+- feat(common): add support for MCP configuration in component setup by @zzcr in <https://github.com/opentiny/tiny-vue/pull/3469>
+- feat(site): add the tiny-robot drawer to the official website. by @shenjunjian in <https://github.com/opentiny/tiny-vue/pull/3467>
+- feat(dialog-select): [dialog-select] add attribute lock-scroll by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/3489>
+- feat(popeditor): [popeditor] add attribute lock-scroll by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/3490>
+- feat(grid): optimize mcp configuration usage and sample code by @zzcr in <https://github.com/opentiny/tiny-vue/pull/3494>
+
+### Bug Fixes 🐛
+
+- fix(file-upload): Fix bug in file-upload component where multiple selections are merge-service and uploaded by @chenxi-20 in <https://github.com/opentiny/tiny-vue/pull/3424>
+- fix(steps): Modify the multi terminal rendering logic and style of steps by @chenxi-20 in <https://github.com/opentiny/tiny-vue/pull/3441>
+- fix(drowdown): add tiny-\* className to drowdown-menu's wrapper dom by @shenjunjian in <https://github.com/opentiny/tiny-vue/pull/3445>
+- fix(select): fix can not set grid rowId in select by @gimmyhehe in <https://github.com/opentiny/tiny-vue/pull/3448>
+- fix(tree-menu): change the color of the dark mode icon by @wuyiping0628 in <https://github.com/opentiny/tiny-vue/pull/3457>
+- fix(tiny-split):The panel split animation is not displayed properly by @discreted66 in <https://github.com/opentiny/tiny-vue/pull/3452>
+- fix(search): Fix the margin issue of multi terminal mode dropdown type by @chenxi-20 in <https://github.com/opentiny/tiny-vue/pull/3453>
+- fix(icon):Fixed the icon color issue in dark mode by @discreted66 in <https://github.com/opentiny/tiny-vue/pull/3460>
+- fix(autocomplete): autocomplete component defaults to 100% of the width by @shenjunjian in <https://github.com/opentiny/tiny-vue/pull/3462>
+- fix(tag): theme saas warning token value refresh, tag component style specification refresh by @wuyiping0628 in <https://github.com/opentiny/tiny-vue/pull/3463>
+- fix(form): fix the textarea style issue under the form by @wuyiping0628 in <https://github.com/opentiny/tiny-vue/pull/3468>
+- fix(select): fix the malfunction of the select component when automatically pulling down focus by @shenjunjian in <https://github.com/opentiny/tiny-vue/pull/3464>
+- fix(robot): add the role message markdown and upgrade the tiny-robot version by @shenjunjian in <https://github.com/opentiny/tiny-vue/pull/3471>
+- fix(basic-usage): update SSE URL to use HTTPS for secure connection by @zzcr in <https://github.com/opentiny/tiny-vue/pull/3472>
+- fix(date-picker):fix the init panel width and month name by @discreted66 in <https://github.com/opentiny/tiny-vue/pull/3466>
+- fix: the issue of modifying line breaks for display by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/3470>
+- fix(grid): increase the length of drag and drop lines in the grid and remove empty values when filtering by @wuyiping0628 in <https://github.com/opentiny/tiny-vue/pull/3475>
+- fix(robot): add examples of Perfecting AI Agents by @shenjunjian in <https://github.com/opentiny/tiny-vue/pull/3476>
+- fix(dialog):fix dialog title line-height by @discreted66 in <https://github.com/opentiny/tiny-vue/pull/3477>
+- fix(icon):delete the iconPushPinSolid default color by @discreted66 in <https://github.com/opentiny/tiny-vue/pull/3479>
+- fix(calendar-view):fix the E2E test by @discreted66 in <https://github.com/opentiny/tiny-vue/pull/3483>
+- fix(robot): optimized the example and added sessions and UI adjustment. by @shenjunjian in <https://github.com/opentiny/tiny-vue/pull/3484>
+- fix(robot): add the API tab of the MCP and adjust the display control of the robot. by @shenjunjian in <https://github.com/opentiny/tiny-vue/pull/3485>
+- fix(package): update @opentiny/tiny-vue-mcp version to 0.0.1-alpha.1 by @zzcr in <https://github.com/opentiny/tiny-vue/pull/3487>
+- fix(robot): message processing of the robot is optimized. by @shenjunjian in <https://github.com/opentiny/tiny-vue/pull/3491>
+- fix(select): modify the DOM structure of all options in the select to be consistent with that of the regular options to solve the text alignment issue by @shenjunjian in <https://github.com/opentiny/tiny-vue/pull/3488>
+- fix(grid): add a border to the last row of the grid under the saas theme by @wuyiping0628 in <https://github.com/opentiny/tiny-vue/pull/3492>
+
+## New Contributors
+
+- @afkdsghk211331 made their first contribution in <https://github.com/opentiny/tiny-vue/pull/3447>
+
 ## v2.23.0/v3.23.0
 
 `2025/05/21`
@@ -390,122 +442,3 @@ Tiny Vue 团队在正常情况下使用 每月 发布策略。
 - @lcy0620 made their first contribution in <https://github.com/opentiny/tiny-vue/pull/2964>
 - @tsinghua-lau made their first contribution in <https://github.com/opentiny/tiny-vue/pull/2992>
 - @hu-qi made their first contribution in <https://github.com/opentiny/tiny-vue/pull/3189>
-
-## v2.21.0/v3.21.0
-
-`2025/01/15`
-
-## What's Changed
-
-### Exciting New Features 🎉
-
-- feat(tiny-vue-nuxt): [tiny-vue-nuxt] add tiny-vue-nuxt module and add… by @18003228289 in <https://github.com/opentiny/tiny-vue/pull/1761>
-- feat(tiny-vue-nuxt): [tiny-vue-nuxt] finish importing all components to nuxt module by @18003228289 in <https://github.com/opentiny/tiny-vue/pull/1838>
-- fix(random): [random] use Math.random() instead to support SSR by @18003228289 in <https://github.com/opentiny/tiny-vue/pull/1868>
-- feat: add nuxt dev environment by @zzcr in <https://github.com/opentiny/tiny-vue/pull/1993>
-- feat: add mobile dependence by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2609>
-- feat: sync 3.20.0 to dev by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2639>
-- feat: support nuxt by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2635>
-- feat(dropdown): [dropdown] add right side expansion function for dropdown by @MomoPoppy in <https://github.com/opentiny/tiny-vue/pull/2608>
-- feat: support nuxt by @kagol in <https://github.com/opentiny/tiny-vue/pull/2641>
-- feat: add @opentiny/utils package by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2661>
-- feat(fluent-editor): add before-editor-init props by @kagol in <https://github.com/opentiny/tiny-vue/pull/2670>
-- feat: [grid,alert,form]use catalog to globally upgrade vite and vitest; and add mobile build config by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2680>
-- feat(site): Optimize site documentation typesetting by @dufu1991 in <https://github.com/opentiny/tiny-vue/pull/2688>
-- feat(site): optimize the performance of the official website, use lazy loading for document examples by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2713>
-- feat(nav-menu): [nav-menu] Add custom selected mode by @wuyiping0628 in <https://github.com/opentiny/tiny-vue/pull/2718>
-- feat(nav-menu): [nav-menu] Simplify the demo data by @wuyiping0628 in <https://github.com/opentiny/tiny-vue/pull/2728>
-- feat: add utils packages type module by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2731>
-- feat: update version to 3.21.0 by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2734>
-- feat: remove chart e2e-test cases by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2742>
-- feat(alert): [alert] display title when size is large by @wuyiping0628 in <https://github.com/opentiny/tiny-vue/pull/2744>
-- feat: enhance the divider dialogbox treemenu function by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2758>
-- feat: update playground versions by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2763>
-- feat(alert): [alert] display title when size is large in mobile-first by @wuyiping0628 in <https://github.com/opentiny/tiny-vue/pull/2765>
-
-### Bug Fixes 🐛
-
-- fix(crypto): [crypto] use nanoid instead to support SSR by @18003228289 in <https://github.com/opentiny/tiny-vue/pull/1860>
-- fix(ssr): [ssr] fix ssr problems by @18003228289 in <https://github.com/opentiny/tiny-vue/pull/1935>
-- fix(nuxt): update vue version to fix button slot error by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2026>
-- fix(plugin): [plugin] fix nuxt plugin by @18003228289 in <https://github.com/opentiny/tiny-vue/pull/2220>
-- fix(plugin): [plugin] fix nuxt plugin by @18003228289 in <https://github.com/opentiny/tiny-vue/pull/2212>
-- fix(chart): huiCharts 打包替换为 Chart by @Davont in <https://github.com/opentiny/tiny-vue/pull/2622>
-- fix: fix slider compilation error in vue2 by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2625>
-- fix(tabbar): modify mobile tabbar problem by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2638>
-- fix(dropdown-menu): fix mobile problem by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2642>
-- fix(form): modify mobile form problem by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2643>
-- fix(container): modify mobile problem by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2646>
-- fix(dialog-box): modify mobile dialog-box problem by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2644>
-- fix(select): [select] fix the vertical centering of the suffix icon by @MomoPoppy in <https://github.com/opentiny/tiny-vue/pull/2645>
-- fix(tree-select): solve the problem of tree attributes not being passed through by @kagol in <https://github.com/opentiny/tiny-vue/pull/2659>
-- fix(label): modify mobile bug by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2672>
-- fix(input): modify mobile problem by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2671>
-- fix(slider): modify mobile problem by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2669>
-- fix(tree): default-expanded-keys description is wrong by @shenjunjian in <https://github.com/opentiny/tiny-vue/pull/2667>
-- fix(checkbox): modify mobile problem by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2666>
-- fix(form): modify mobile problem by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2665>
-- fix(popover): remove aria-hidden by @shenjunjian in <https://github.com/opentiny/tiny-vue/pull/2664>
-- fix(progress): modify mobile problem by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2654>
-- fix(button): modify mobile problem by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2660>
-- fix(auto-import-plugin): support functional components by @mengqiuleo in <https://github.com/opentiny/tiny-vue/pull/2511>
-- fix: fix warning in cascader component by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2662>
-- fix(nuxt): fix the error when starting the nuxt project by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2668>
-- fix(unplugin-tiny-vue): fix error TinyVueResolver name by @shenjunjian in <https://github.com/opentiny/tiny-vue/pull/2676>
-- fix(action-sheet): modify mobile problem by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2692>
-- fix(pull-refresh): modify mobile bug by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2677>
-- fix(exception): modify mobile problem by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2690>
-- fix(file-upload): [file-upload] Optimized the usage of the customized upload example. by @chenxi-20 in <https://github.com/opentiny/tiny-vue/pull/2694>
-- fix(vue-renderless): [action-menu, alert] fix site: Optimize site documentation typesetting by @dufu1991 in <https://github.com/opentiny/tiny-vue/pull/2693>
-- fix: fix change theme error when open playground by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2681>
-- fix(vue-renderless): [autocomplete,base-select,amount,anchor,area] fix site: Optimize site documentation typesetting by @dufu1991 in <https://github.com/opentiny/tiny-vue/pull/2695>
-- fix(mobile): fix mobile components build error by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2696>
-- fix(site): fix error when build saas site by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2701>
-- fix(mini-picker): the demo on the mobile client is modified. by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2698>
-- fix(modal): modify the display and error issues of the mobile demo by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2704>
-- fix(user-head): the problem and type of the demo on the mobile client are modified by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2699>
-- fix(vue-renderless): [breadcrumb, bulletin-board, button, button-group,calendar, calendar-view, card, carousel, cascader, cascader-panel, chart,checkbox, collapse, color-picker, color-select-panel,company,config-provider,container,crop,currency,date-picker,dept,dialog-box,dialog-select,directives,divider,drawer,drop-roles,drop-times,dropdown,espace,fall-menu,file-upload,filter-panel,float-button,floatbar,flowchart,fluent-editor,form,fullscreen] fix site: Optimize site documentation typesetting by @dufu1991 in <https://github.com/opentiny/tiny-vue/pull/2709>
-- fix(tabs): modify the issue of the mobile demo not displaying and reporting errors by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2710>
-- fix(vue-renderless): [grid] fix site: Optimize site documentation typesetting by @dufu1991 in <https://github.com/opentiny/tiny-vue/pull/2714>
-- fix(grid): [grid] fix the initial position on the left when dragging … by @gimmyhehe in <https://github.com/opentiny/tiny-vue/pull/2719>
-- fix(statistic): [statistic] synchronize the statistic component of the release-3.18 version to the dev branch by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2717>
-- fix(file-upload): modify the error reported by the upload component on the mobile client and add the demo by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2724>
-- fix(input): [input] cancel bacground style of input count in textarea by @wNing50 in <https://github.com/opentiny/tiny-vue/pull/2715>
-- fix(modal): [modal] repeatedly dispatch the close event by @betavs in <https://github.com/opentiny/tiny-vue/pull/2573>
-- fix(vue-renderless): [grid-select,guide,hrapprover,hrapprover,icon,icon-multicolor,image,infinite-scroll,input,ip-address,layout,link,link-menu,loading,locales,logon-user,logout,milestone,mind-map,modal,nav-menu,notify,numeric,pager,pop-upload,popconfirm,popeditor,popover,progress,qr-code,query-builder] fix site: Optimize site documentation typesetting by @dufu1991 in <https://github.com/opentiny/tiny-vue/pull/2721>
-- fix(modal): [modal] modifying the modal component and clicking the confirm button accidentally triggered the close event by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2727>
-- fix(vue-renderless): [radio,rate,rich-text-editor,roles,scroll-text,search,select,skeleton,slider,split,statistic,steps,sticky,switch,tabs,tag,tag-group,text-popup,time-line,time-line-new,time-picker,time-select,toggle-menu,tooltip,transfer,tree,tree-menu,tree-select] fix site: Optimize site documentation typesetting by @dufu1991 in <https://github.com/opentiny/tiny-vue/pull/2729>
-- fix(vite-import): fix the issue of escaping comment code in on-demand packaging plugin by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2726>
-- fix(vue-renderless): [user,user-account,user-contact,user-head,user-link,virtual-scroll-box,virtual-tree,watermark,wizard] fix site: Optimize site documentation typesetting by @dufu1991 in <https://github.com/opentiny/tiny-vue/pull/2732>
-- fix: supplement mistakenly deleted files by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2736>
-- fix(e2e): [tooltip,select] fix the security that causes e2e test failures. by @shenjunjian in <https://github.com/opentiny/tiny-vue/pull/2743>
-- fix(e2e): [file-upload] Fix the error reported in the E2E test case of the upload component. by @chenxi-20 in <https://github.com/opentiny/tiny-vue/pull/2741>
-- fix(e2e): [cascader,color-picker,crop] fix cascader color-picker crop components e2e-test error by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2746>
-- fix(demos/checkbox): [checkbox] fix checkbox e2e-test error by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2745>
-- fix(modal): [modal] modify e2e test case error by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2747>
-- fix(date-picker): [date-picker] fix date-picker e2e test error by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2749>
-- fix(time-select): [time-select] Fix and optimize issues with invalid … by @Youyou-smiles in <https://github.com/opentiny/tiny-vue/pull/2735>
-- fix(popeditor): the default width of the label in popeditor is added by @shenjunjian in <https://github.com/opentiny/tiny-vue/pull/2750>
-- fix(modal): [modal] the style does not take effect by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2751>
-- fix(carousel): [carousel] modify the vertical arrow display issue of the carousel component by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2752>
-- fix(grid): [grid] fix can not select first option when value is empty by @gimmyhehe in <https://github.com/opentiny/tiny-vue/pull/2756>
-- fix(dialog-box): [dialog-box] modify the style of the dialog box by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2757>
-- fix(loading): [loading] v-loading's lifecycle name replace by inserted by @shenjunjian in <https://github.com/opentiny/tiny-vue/pull/2759>
-- fix(grid): [grid] fix checkbox border become smaller when config show… by @gimmyhehe in <https://github.com/opentiny/tiny-vue/pull/2762>
-- fix: fix huichart build error by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2760>
-- fix(renderless): fix renderless package publish error by @zzcr in <https://github.com/opentiny/tiny-vue/pull/2761>
-- fix(divider): [divider] modify e2e test cases for the divider component by @James-9696 in <https://github.com/opentiny/tiny-vue/pull/2766>
-
-### Other Changes
-
-- docs: hide the search input on the left menu at open source sites by @kagol in <https://github.com/opentiny/tiny-vue/pull/2607>
-- ci: auto deploy site by @kagol in <https://github.com/opentiny/tiny-vue/pull/2617>
-- docs: add dufu1991 as a contributor for doc by @allcontributors in <https://github.com/opentiny/tiny-vue/pull/2703>
-- docs(select): add the description of the filterMethod prop for Select by @shenjunjian in <https://github.com/opentiny/tiny-vue/pull/2708>
-- docs: fix back to top does not work and the document tab title does n… by @gimmyhehe in <https://github.com/opentiny/tiny-vue/pull/2712>
-- test(grid): [grid] fix unit test error by @gimmyhehe in <https://github.com/opentiny/tiny-vue/pull/2754>
-
-## New Contributors
-
-- @18003228289 made their first contribution in <https://github.com/opentiny/tiny-vue/pull/1761>
-- @dufu1991 made their first contribution in <https://github.com/opentiny/tiny-vue/pull/2688>
diff --git a/examples/sites/demos/pc/webdoc/mcp-en.md b/examples/sites/demos/pc/webdoc/mcp-en.md
new file mode 100644
index 0000000000..8d51fb76a8
--- /dev/null
+++ b/examples/sites/demos/pc/webdoc/mcp-en.md
@@ -0,0 +1,101 @@
+# TinyVue Intelligent Component Access Guide
+
+TinyVue's intelligent components provide a complete intelligent solution, allowing your application to have AI conversation, voice interaction, and other capabilities. This guide will walk you through how to integrate TinyVue's intelligent components into your project.
+
+## Install dependencies
+
+First, you need to install the following core dependency packages:
+
+```bash
+npm install @opentiny/tiny-vue-mcp @opentiny/next-vue @opentiny/vue-common @opentiny/vue
+```
+
+## Access steps
+
+### 1. Initialize MCP Configuration
+
+Initialize MCP configuration in the application entry file (e.g., `main.js`):
+
+```js
+import { registerMcpConfig } from '@opentiny/vue-common'
+import { createMcpTools, getTinyVueMcpConfig } from '@opentiny/tiny-vue-mcp'
+
+// Register TinyVue component MCP configuration
+registerMcpConfig(getTinyVueMcpConfig(), createMcpTools)
+```
+
+### 2. Create NextClient Proxy Client
+
+Create a NextClient proxy client in `App.vue` to establish real-time communication:
+
+```html
+<script setup lang="ts">
+  import { useNextClient } from '@opentiny/next-vue'
+
+  const { sessionId } = useNextClient({
+    clientInfo: {
+      name: 'your-app-name', // Application name
+      version: '1.0.0', // Application version
+      sessionId: 'your-session-id' // Optional, will be passed in by the backend if not provided; for debugging, you can use crypto.randomUUID() to generate a fixed one
+    },
+    proxyOptions: {
+      url: 'your-sse-url', // SSE service address
+      token: 'your-token' // Authentication token
+    }
+  })
+</script>
+
+<template>
+  <div>
+    <h1>NextClient Proxy Client</h1>
+    <p>Session ID: {{ sessionId }}</p>
+  </div>
+</template>
+```
+
+### 3. MCP Component Configuration
+
+When using
+
+```html
+<script setup lang="ts">
+  import { useNextServer } from '@opentiny/next-vue'
+
+  const { server } = useNextServer({
+    serverInfo: { name: 'your-server-name', version: '1.0.0' }
+  })
+</script>
+
+<template>
+  <tiny-grid
+    :tiny_mcp_config="{
+      server,
+      business: {
+        id: 'your-business-id',
+        description: 'Business description'
+      }
+    }"
+  >
+    <!-- Table content -->
+  </tiny-grid>
+</template>
+```
+
+## Notes
+
+1. Ensure that the server supports SSE (Server-Sent Events) connections
+2. It is recommended to use HTTPS in production environments
+3. CORS needs to be correctly configured to support cross-origin requests
+
+## Common issues
+
+1. Session connection failed
+
+   - Check if the SSE service address is correct
+   - Confirm that the network connection is normal
+   - Verify that the authentication information is valid
+
+2. AI conversation response is not available
+   - Check if the session is established normally
+   - Confirm that the prompt item configuration is correct
+   - Check if there are errors in the network request
diff --git a/examples/sites/demos/pc/webdoc/mcp.md b/examples/sites/demos/pc/webdoc/mcp.md
new file mode 100644
index 0000000000..f7c83b4cc6
--- /dev/null
+++ b/examples/sites/demos/pc/webdoc/mcp.md
@@ -0,0 +1,101 @@
+# TinyVue 智能化组件接入指南
+
+TinyVue 的智能化组件提供了一套完整的智能化解决方案，让您的应用具备 AI 对话、语音交互等能力。本文将指导您如何在项目中接入 TinyVue 的智能化组件。
+
+## 安装依赖
+
+首先需要安装以下核心依赖包：
+
+```bash
+npm install @opentiny/tiny-vue-mcp @opentiny/next-vue @opentiny/vue-common @opentiny/vue
+```
+
+## 接入步骤
+
+### 1. 初始化 MCP 配置
+
+在应用入口文件（如 `main.js`）中初始化 MCP 配置：
+
+```js
+import { registerMcpConfig } from '@opentiny/vue-common'
+import { createMcpTools, getTinyVueMcpConfig } from '@opentiny/tiny-vue-mcp'
+
+// 注册 TinyVue 组件 MCP 配置
+registerMcpConfig(getTinyVueMcpConfig(), createMcpTools)
+```
+
+### 2. 创建 NextClient 代理客户端
+
+在 `App.vue` 中创建 NextClient 代理客户端，用于建立实时通信：
+
+```html
+<script setup lang="ts">
+  import { useNextClient } from '@opentiny/next-vue'
+
+  const { sessionId } = useNextClient({
+    clientInfo: {
+      name: 'your-app-name', // 应用名称
+      version: '1.0.0', // 应用版本
+      sessionId: 'your-session-id' // 可选，不传由后台自动生成。调试时可使用 crypto.randomUUID() 生成固定值
+    },
+    proxyOptions: {
+      url: 'your-sse-url', // SSE 服务地址，目前agent代理服务器代码未开源，如想进一步了解可以在github中提issue单
+      token: 'your-token' // 认证 token
+    }
+  })
+</script>
+
+<template>
+  <div>
+    <h1>NextClient 代理客户端</h1>
+    <p>会话 ID: {{ sessionId }}</p>
+  </div>
+</template>
+```
+
+### 3. MCP 组件配置
+
+在子页面中使用 Grid 等支持 MCP 的组件时，添加 MCP 配置：
+
+```html
+<script setup lang="ts">
+  import { useNextServer } from '@opentiny/next-vue'
+
+  const { server } = useNextServer({
+    serverInfo: { name: 'your-server-name', version: '1.0.0' }
+  })
+</script>
+
+<template>
+  <tiny-grid
+    :tiny_mcp_config="{
+      server,
+      business: {
+        id: 'your-business-id',
+        description: '业务描述'
+      }
+    }"
+  >
+    <!-- 表格内容 -->
+  </tiny-grid>
+</template>
+```
+
+## 注意事项
+
+1. 确保服务端支持 SSE（Server-Sent Events）连接
+2. 建议在生产环境使用 HTTPS 协议
+3. 需要正确配置 CORS 以支持跨域请求
+
+## 常见问题
+
+1. 会话连接失败
+
+   - 检查 SSE 服务地址是否正确
+   - 确认网络连接是否正常
+   - 验证认证信息是否有效
+
+2. AI 对话无响应
+   - 检查会话是否正常建立
+   - 确认提示项配置是否正确
+   - 查看网络请求是否有错误

From 63a172ad472e9bfb132e5f3b34bcb28cbb3a429c Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Fri, 13 Jun 2025 17:25:38 +0800
Subject: [PATCH 3/6] feat: add remote control page, update next dependency
 (#3501)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 添加遥控器页面，更新next依赖

* chore: 修改代理为https url
---
 examples/sites/package.json                   |   5 +-
 examples/sites/src/App.vue                    |   4 +-
 examples/sites/src/components/MessageCard.vue | 117 ++++++
 examples/sites/src/composable/utils.ts        |   8 +-
 examples/sites/src/router.js                  |   6 +
 .../sites/src/views/comprehensive/index.vue   |  21 +-
 examples/sites/src/views/remoter/index.vue    |  63 ++++
 examples/sites/src/views/remoter/sound.vue    | 349 ++++++++++++++++++
 8 files changed, 548 insertions(+), 25 deletions(-)
 create mode 100644 examples/sites/src/components/MessageCard.vue
 create mode 100644 examples/sites/src/views/remoter/index.vue
 create mode 100644 examples/sites/src/views/remoter/sound.vue

diff --git a/examples/sites/package.json b/examples/sites/package.json
index 5956602b10..49eebbf846 100644
--- a/examples/sites/package.json
+++ b/examples/sites/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-docs",
   "type": "module",
-  "version": "3.24.0",
+  "version": "3.24.3",
   "license": "MIT",
   "scripts": {
     "start": "vite",
@@ -27,8 +27,7 @@
     "@docsearch/css": "^3.8.0",
     "@docsearch/js": "^3.8.0",
     "@docsearch/react": "npm:@docsearch/css",
-    "@opentiny/next": "0.1.2",
-    "@opentiny/next-vue": "0.0.1-alpha.1",
+    "@opentiny/next-vue": "0.0.1",
     "@opentiny/tiny-robot": "0.2.1",
     "@opentiny/tiny-robot-kit": "0.2.1",
     "@opentiny/tiny-robot-svgs": "0.2.1",
diff --git a/examples/sites/src/App.vue b/examples/sites/src/App.vue
index 22969fc421..c9f43ba785 100644
--- a/examples/sites/src/App.vue
+++ b/examples/sites/src/App.vue
@@ -17,7 +17,7 @@ import { iconClose } from '@opentiny/vue-icon'
 import { appData } from './tools'
 import useTheme from './tools/useTheme'
 import { useNextClient } from '@opentiny/next-vue'
-import { globalConversation } from './composable/utils'
+import { globalConversation, $session } from './composable/utils'
 
 export default defineComponent({
   name: 'AppVue',
@@ -33,7 +33,7 @@ export default defineComponent({
 
     const { sessionId } = useNextClient({
       clientInfo: { name: 'tiny-vue-website', version: '1.0.0' },
-      proxyOptions: { url: 'https://39.108.160.245/sse', token: '' }
+      proxyOptions: { url: 'https://agent.icjs.ink/sse', token: '', sessionId: $session.sessionId }
     })
 
     watch(
diff --git a/examples/sites/src/components/MessageCard.vue b/examples/sites/src/components/MessageCard.vue
new file mode 100644
index 0000000000..503704abff
--- /dev/null
+++ b/examples/sites/src/components/MessageCard.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="message-card" :class="role">
+    <div class="avatar">
+      <component :is="avatarIcon" class="avatar-icon" />
+    </div>
+    <div class="content">
+      <div class="role-name">{{ roleName }}</div>
+      <div class="message">{{ message }}</div>
+      <div class="time">{{ formatTime }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { IconAi, IconUser } from '@opentiny/tiny-robot-svgs'
+
+interface Props {
+  role: 'user' | 'assistant'
+  message: string
+  timestamp: number
+}
+
+const props = defineProps<Props>()
+
+const roleName = computed(() => (props.role === 'assistant' ? '智能助手' : '我'))
+
+const avatarIcon = computed(() => (props.role === 'assistant' ? IconAi : IconUser))
+
+const formatTime = computed(() => {
+  const date = new Date(props.timestamp)
+  return date.toLocaleTimeString('zh-CN', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false
+  })
+})
+</script>
+
+<style scoped lang="less">
+.message-card {
+  display: flex;
+  margin: 16px;
+  gap: 12px;
+  max-width: 80%;
+
+  &.assistant {
+    margin-right: auto;
+
+    .content {
+      background-color: #f0f2f5;
+    }
+
+    .avatar-icon {
+      color: #2080f0;
+    }
+  }
+
+  &.user {
+    margin-left: auto;
+    flex-direction: row-reverse;
+
+    .content {
+      background-color: #e8f5e9;
+    }
+
+    .avatar-icon {
+      color: #18a058;
+    }
+  }
+
+  .avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    overflow: hidden;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f5f7fa;
+
+    .avatar-icon {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .content {
+    padding: 12px;
+    border-radius: 12px;
+    position: relative;
+    min-width: 120px;
+    max-width: calc(100% - 60px);
+
+    .role-name {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 4px;
+    }
+
+    .message {
+      font-size: 16px;
+      line-height: 1.5;
+      word-break: break-word;
+      white-space: pre-wrap;
+    }
+
+    .time {
+      font-size: 12px;
+      color: #999;
+      margin-top: 4px;
+      text-align: right;
+    }
+  }
+}
+</style>
diff --git a/examples/sites/src/composable/utils.ts b/examples/sites/src/composable/utils.ts
index 217bcfc3aa..82453888a2 100644
--- a/examples/sites/src/composable/utils.ts
+++ b/examples/sites/src/composable/utils.ts
@@ -5,16 +5,16 @@
 
 import type { ChatMessage, ChatCompletionResponse, StreamHandler } from '@opentiny/tiny-robot-kit'
 import type { ChatCompletionRequest } from '@opentiny/tiny-robot-kit'
-import { ref, type Ref } from 'vue'
+import { ref, reactive, type Ref } from 'vue'
 
-export { $local } from './storage'
+export { $local, $session } from './storage'
 
 export const showTinyRobot = ref(true)
 
-export const globalConversation = {
+export const globalConversation = reactive({
   id: '',
   sessionId: ''
-}
+})
 /**
  * 处理SSE流式响应
  * @param response fetch响应对象
diff --git a/examples/sites/src/router.js b/examples/sites/src/router.js
index 9b471c4a94..c438df9d23 100644
--- a/examples/sites/src/router.js
+++ b/examples/sites/src/router.js
@@ -8,6 +8,7 @@ const Docs = () => import('@/views/docs/docs.vue')
 const Overview = () => import('@/views/overview.vue')
 const Features = () => import('@/views/features.vue')
 const Comprehensive = () => import('@/views/comprehensive/index.vue')
+const Remoter = () => import('@/views/remoter/index.vue')
 
 const context = import.meta.env.VITE_CONTEXT
 
@@ -24,6 +25,11 @@ let routes = [
     component: Comprehensive,
     name: 'comprehensive'
   },
+  {
+    path: `${context}:all?/zh-CN/:theme/remoter`,
+    component: Remoter,
+    name: 'remoter'
+  },
   // 文档
   {
     path: `${context}:all?/:lang/:theme/docs/:docId`,
diff --git a/examples/sites/src/views/comprehensive/index.vue b/examples/sites/src/views/comprehensive/index.vue
index 310d78cc59..289b88157b 100644
--- a/examples/sites/src/views/comprehensive/index.vue
+++ b/examples/sites/src/views/comprehensive/index.vue
@@ -96,7 +96,7 @@ watch(
       const encryptedId = CryptoJS.AES.encrypt(newVal, 'secret-session-id').toString()
 
       const secretId = encodeURIComponent(encryptedId)
-      sessionUrl.value = 'http://39.108.160.245?id=' + secretId
+      sessionUrl.value = `https://agent.icjs.ink?id=${secretId}`
     }
   },
   { immediate: true }
@@ -202,9 +202,7 @@ watch(
   border-radius: 12px;
   padding: 32px;
   width: 460px;
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 
 .qr-modal-header {
@@ -267,22 +265,13 @@ watch(
 
 @keyframes glow {
   0% {
-    box-shadow:
-      0 0 5px rgba(22, 119, 255, 0.2),
-      0 0 10px rgba(22, 119, 255, 0.2),
-      0 0 15px rgba(22, 119, 255, 0.2);
+    box-shadow: 0 0 5px rgba(22, 119, 255, 0.2), 0 0 10px rgba(22, 119, 255, 0.2), 0 0 15px rgba(22, 119, 255, 0.2);
   }
   50% {
-    box-shadow:
-      0 0 10px rgba(22, 119, 255, 0.3),
-      0 0 20px rgba(22, 119, 255, 0.3),
-      0 0 30px rgba(22, 119, 255, 0.3);
+    box-shadow: 0 0 10px rgba(22, 119, 255, 0.3), 0 0 20px rgba(22, 119, 255, 0.3), 0 0 30px rgba(22, 119, 255, 0.3);
   }
   100% {
-    box-shadow:
-      0 0 5px rgba(22, 119, 255, 0.2),
-      0 0 10px rgba(22, 119, 255, 0.2),
-      0 0 15px rgba(22, 119, 255, 0.2);
+    box-shadow: 0 0 5px rgba(22, 119, 255, 0.2), 0 0 10px rgba(22, 119, 255, 0.2), 0 0 15px rgba(22, 119, 255, 0.2);
   }
 }
 
diff --git a/examples/sites/src/views/remoter/index.vue b/examples/sites/src/views/remoter/index.vue
new file mode 100644
index 0000000000..61af1798a2
--- /dev/null
+++ b/examples/sites/src/views/remoter/index.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+// 导入 CryptoJS 库
+import CryptoJS from 'crypto-js'
+import { reactive } from 'vue'
+import { TinyButton, TinyDrawer } from '@opentiny/vue'
+import RobotChat from '../../components/tiny-robot-chat.vue'
+import Sound from './sound.vue'
+import { globalConversation } from '../../composable/utils'
+
+// 加密密钥，需要和生成二维码的页面保持一致
+const secretKey = 'secret-session-id'
+// 获取 URL 参数
+const urlParams = new URLSearchParams(window.location.search)
+const encryptedId = urlParams.get('id')
+const state = reactive({ isShow: true, showChat: false, showSound: false })
+
+if (encryptedId) {
+  // 解密 id
+  const bytes = CryptoJS.AES.decrypt(encryptedId, secretKey)
+  const originalText = bytes.toString(CryptoJS.enc.Utf8)
+  // 存储解密后的 id 到 window.sessionId
+  globalConversation.sessionId = originalText
+}
+const showMoter = (type) => {
+  state.isShow = false
+  state[type] = true
+}
+</script>
+
+<template>
+  <div>
+    <RobotChat v-if="state.showChat" />
+    <Sound v-if="state.showSound" />
+    <tiny-drawer
+      v-if="state.isShow"
+      title="请选择控制器"
+      placement="bottom"
+      :mask-closable="false"
+      :show-close="false"
+      v-model:visible="state.isShow"
+      height="400px"
+    >
+      <div class="link-box">
+        <tiny-button @click="showMoter('showSound')" type="info" size="large">语音控制器</tiny-button>
+
+        <tiny-button @click="showMoter('showChat')" type="info" size="large">综合控制器</tiny-button>
+      </div>
+    </tiny-drawer>
+  </div>
+</template>
+
+<style scoped lang="less">
+.link-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .tiny-button {
+    margin-bottom: 20px;
+  }
+}
+</style>
diff --git a/examples/sites/src/views/remoter/sound.vue b/examples/sites/src/views/remoter/sound.vue
new file mode 100644
index 0000000000..d9a7b17718
--- /dev/null
+++ b/examples/sites/src/views/remoter/sound.vue
@@ -0,0 +1,349 @@
+<template>
+  <div class="sound-container">
+    <div class="messages-container" ref="messagesContainer">
+      <template v-if="messages && messages.length > 0">
+        <message-card
+          v-for="(msg, index) in messages"
+          :key="index"
+          :role="msg.role === 'system' ? 'assistant' : msg.role"
+          :message="msg.content"
+          :timestamp="messageTimestamps[index]"
+        />
+      </template>
+      <div v-else class="empty-message">
+        <p>暂无对话记录</p>
+      </div>
+    </div>
+    <div class="sound-box">
+      <div class="recording-status" v-show="isTalk">
+        <div class="wave-animation"></div>
+        <span>{{ recordingTime }}s</span>
+      </div>
+      <tiny-button
+        @touchstart.prevent="handleStart"
+        @touchend.prevent="handleEnd"
+        @touchcancel.prevent="handleEnd"
+        :type="isTalk ? 'danger' : 'info'"
+        class="talk-button"
+        size="large"
+        :reset-time="0"
+        :disabled="!isSupported"
+      >
+        {{ buttonText }}
+      </tiny-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onUnmounted, watch, nextTick } from 'vue'
+import { TinyButton, TinyNotify } from '@opentiny/vue'
+import { useTinyRobot } from '../../composable/useTinyRobot'
+import MessageCard from '../../components/MessageCard.vue'
+
+// 类型定义
+interface SpeechRecognitionResult {
+  [index: number]: {
+    transcript: string
+    confidence: number
+  }
+  isFinal?: boolean
+  length: number
+}
+
+interface SpeechRecognitionResultList {
+  [index: number]: SpeechRecognitionResult
+  length: number
+}
+
+interface SpeechRecognitionEvent extends Event {
+  results: SpeechRecognitionResultList
+}
+
+interface SpeechRecognitionErrorEvent extends Event {
+  error: string
+  message: string
+}
+
+// 获取SpeechRecognition构造函数
+const getSpeechRecognition = () => {
+  const SpeechRecognition =
+    (window as any).SpeechRecognition ||
+    (window as any).webkitSpeechRecognition ||
+    (window as any).mozSpeechRecognition ||
+    (window as any).msSpeechRecognition
+  return SpeechRecognition
+}
+
+// 状态管理
+const isTalk = ref(false)
+const isSupported = ref(false)
+const recordingTime = ref(0)
+const maxRecordingTime = 60
+let recognition: any = null
+let recordingTimer: number | null = null
+const messagesContainer = ref<HTMLElement | null>(null)
+const messageTimestamps = ref<number[]>([])
+const { sendMessage, messages } = useTinyRobot()
+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+
+// 计算属性
+const buttonText = computed(() => {
+  if (!isSupported.value) return '当前浏览器不支持语音识别'
+  if (isTalk.value) return `录音中 ${recordingTime.value}s`
+  return '长按说话'
+})
+
+// 监听消息变化，更新时间戳和自动滚动
+watch(
+  () => messages.value,
+  async (newMessages) => {
+    if (!newMessages) return
+
+    // 更新时间戳
+    if (messageTimestamps.value.length < newMessages.length) {
+      const timestamp = Date.now()
+      messageTimestamps.value = newMessages.map((_, index) => messageTimestamps.value[index] || timestamp)
+    }
+
+    // 自动滚动到底部
+    await nextTick()
+    if (messagesContainer.value) {
+      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
+    }
+  },
+  { deep: true }
+)
+
+// 初始化语音识别
+const initSpeechRecognition = () => {
+  const SpeechRecognition = getSpeechRecognition()
+
+  if (SpeechRecognition) {
+    isSupported.value = true
+    recognition = new SpeechRecognition()
+    recognition.lang = 'zh-CN'
+    recognition.continuous = false
+    recognition.interimResults = false
+    recognition.maxAlternatives = 1
+
+    // Safari 需要特殊处理
+    if (isSafari) {
+      recognition.interimResults = true
+    }
+
+    let finalTranscript = ''
+
+    recognition.addEventListener('result', (event: SpeechRecognitionEvent) => {
+      const transcript = event.results[0][0].transcript
+      if (transcript.trim()) {
+        finalTranscript = transcript
+      }
+    })
+
+    recognition.addEventListener('end', () => {
+      stopRecording()
+      // 确保在录音结束时发送消息
+      if (finalTranscript.trim()) {
+        sendMessage(finalTranscript)
+        finalTranscript = ''
+      }
+    })
+
+    recognition.addEventListener('error', (event: SpeechRecognitionErrorEvent) => {
+      handleRecognitionError(event)
+      finalTranscript = ''
+    })
+  } else {
+    isSupported.value = false
+    TinyNotify({
+      type: 'error',
+      title: '提示',
+      message: '您的浏览器不支持语音识别，请使用Chrome、Safari或Edge浏览器',
+      position: 'top-right',
+      duration: 5000
+    })
+  }
+}
+
+// 错误处理
+const handleRecognitionError = (event: SpeechRecognitionErrorEvent) => {
+  stopRecording()
+  let errorMessage = '语音识别出错'
+
+  switch (event.error) {
+    case 'not-allowed':
+      errorMessage = '请允许浏览器使用麦克风'
+      break
+    case 'no-speech':
+      errorMessage = '未检测到语音，请重试'
+      break
+    case 'network':
+      errorMessage = '网络连接出错，请检查网络后重试'
+      break
+    case 'aborted':
+      return // 用户主动取消，不显示错误
+    default:
+      errorMessage = `语音识别失败: ${event.message || '未知错误'}`
+  }
+
+  TinyNotify({
+    type: 'error',
+    title: '语音识别出错',
+    message: errorMessage,
+    position: 'top-right',
+    duration: 3000
+  })
+}
+
+// 开始录音
+const handleStart = async (event: TouchEvent) => {
+  event.preventDefault()
+  event.stopPropagation()
+
+  if (!isSupported.value) {
+    TinyNotify({
+      type: 'error',
+      title: '提示',
+      message: '当前浏览器不支持语音识别',
+      position: 'top-right',
+      duration: 3000
+    })
+    return
+  }
+
+  if (isTalk.value) return
+
+  try {
+    recognition.start()
+    isTalk.value = true
+    recordingTime.value = 0
+    startRecordingTimer()
+  } catch (error) {
+    handleRecognitionError({
+      error: 'start_error',
+      message: '启动语音识别失败，请重试'
+    } as SpeechRecognitionErrorEvent)
+  }
+}
+
+// 结束录音
+const handleEnd = () => {
+  if (!isTalk.value) return
+  try {
+    recognition.stop()
+  } catch (error) {
+    console.error('停止录音失败:', error)
+  }
+  stopRecording()
+}
+
+// 开始计时
+const startRecordingTimer = () => {
+  recordingTimer = window.setInterval(() => {
+    recordingTime.value++
+    if (recordingTime.value >= maxRecordingTime) {
+      handleEnd()
+      TinyNotify({
+        type: 'warning',
+        title: '提示',
+        message: '已达到最大录音时长',
+        position: 'top-right',
+        duration: 3000
+      })
+    }
+  }, 1000)
+}
+
+// 停止录音
+const stopRecording = () => {
+  isTalk.value = false
+  if (recordingTimer) {
+    clearInterval(recordingTimer)
+    recordingTimer = null
+  }
+}
+
+// 初始化
+initSpeechRecognition()
+
+// 组件卸载时清理
+onUnmounted(() => {
+  if (recordingTimer) {
+    clearInterval(recordingTimer)
+  }
+  if (recognition) {
+    try {
+      recognition.abort()
+    } catch (error) {
+      console.error('清理语音识别失败:', error)
+    }
+  }
+})
+</script>
+
+<style scoped lang="less">
+.sound-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  position: relative;
+
+  .messages-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    margin-bottom: 120px;
+
+    .empty-message {
+      text-align: center;
+      color: #999;
+      padding: 20px;
+    }
+  }
+
+  .sound-box {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: 10px;
+    background: white;
+    padding: 10px;
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+
+    .recording-status {
+      text-align: center;
+      margin-bottom: 10px;
+
+      .wave-animation {
+        width: 100px;
+        height: 20px;
+        margin: 0 auto 5px;
+        background: linear-gradient(90deg, #ff4d4f 25%, #ff7875 50%, #ff4d4f 75%);
+        background-size: 200% 100%;
+        animation: wave 2s linear infinite;
+      }
+    }
+
+    .talk-button {
+      width: 100%;
+      margin: 20px 0;
+      transition: all 0.3s;
+
+      &:active {
+        transform: scale(0.98);
+      }
+    }
+  }
+}
+
+@keyframes wave {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+</style>

From 355bf712c00827a4a6f0b3e77aabf411130a18d6 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Sat, 14 Jun 2025 10:17:26 +0800
Subject: [PATCH 4/6] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E4=BC=9A?=
 =?UTF-8?q?=E8=AF=9DID=E7=9A=84=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/sites/src/App.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/examples/sites/src/App.vue b/examples/sites/src/App.vue
index c9f43ba785..ac64fc584c 100644
--- a/examples/sites/src/App.vue
+++ b/examples/sites/src/App.vue
@@ -40,6 +40,7 @@ export default defineComponent({
       () => sessionId.value,
       (newVal) => {
         if (newVal) {
+          $session.sessionId = newVal
           globalConversation.sessionId = newVal
         }
       }

From cbdf04d55c1bab1c9cdf8f7ec6808e9474bfefe0 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Sat, 14 Jun 2025 11:42:13 +0800
Subject: [PATCH 5/6] =?UTF-8?q?fix:=20=E6=9B=B4=E6=96=B0=E4=BE=9D=E8=B5=96?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC=E7=BA=A6=E6=9D=9F=E4=BB=A5=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=9B=B4=E9=AB=98=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/sites/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/sites/package.json b/examples/sites/package.json
index 49eebbf846..0a9e0d8aa3 100644
--- a/examples/sites/package.json
+++ b/examples/sites/package.json
@@ -27,11 +27,11 @@
     "@docsearch/css": "^3.8.0",
     "@docsearch/js": "^3.8.0",
     "@docsearch/react": "npm:@docsearch/css",
-    "@opentiny/next-vue": "0.0.1",
+    "@opentiny/next-vue": "^0.0.1",
     "@opentiny/tiny-robot": "0.2.1",
     "@opentiny/tiny-robot-kit": "0.2.1",
     "@opentiny/tiny-robot-svgs": "0.2.1",
-    "@opentiny/tiny-vue-mcp": "0.0.1-alpha.3",
+    "@opentiny/tiny-vue-mcp": "^0.0.1",
     "@opentiny/utils": "workspace:~",
     "@opentiny/vue": "workspace:~",
     "@opentiny/vue-common": "workspace:~",

From ac2c054497aa9f2569100c1ea9f118d8aae77150 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Sat, 14 Jun 2025 11:46:27 +0800
Subject: [PATCH 6/6] =?UTF-8?q?fix:=20=E6=9B=B4=E6=96=B0=E7=89=88=E6=9C=AC?=
 =?UTF-8?q?=E5=8F=B7=E8=87=B33.24.4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/sites/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/sites/package.json b/examples/sites/package.json
index 0a9e0d8aa3..b7908c130d 100644
--- a/examples/sites/package.json
+++ b/examples/sites/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-docs",
   "type": "module",
-  "version": "3.24.3",
+  "version": "3.24.4",
   "license": "MIT",
   "scripts": {
     "start": "vite",