From 2b7fa0181b136af36e3c41d4eaf4bb6b34a90eeb Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Tue, 10 Jun 2025 19:39:34 +0800
Subject: [PATCH] =?UTF-8?q?feat(grid):=20=E4=BC=98=E5=8C=96mcp=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E7=94=A8=E6=B3=95=E5=92=8C=E7=A4=BA=E4=BE=8B=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grid/base/basic-usage-composition-api.vue | 99 +++++--------------
 .../pc/app/grid/base/basic-usage.spec.js      |  2 +-
 .../demos/pc/app/grid/base/basic-usage.vue    | 55 +----------
 examples/sites/package.json                   |  4 +-
 examples/sites/playground/App.vue             |  4 +-
 examples/sites/src/App.vue                    | 19 +++-
 .../composition/DifyModelProvider.ts          |  2 +-
 .../composition/useTinyRobot.ts               |  9 +-
 .../views/components-doc/composition/utils.ts |  3 +-
 9 files changed, 59 insertions(+), 138 deletions(-)

diff --git a/examples/sites/demos/pc/app/grid/base/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/grid/base/basic-usage-composition-api.vue
index 3708ad4648..82c853c603 100644
--- a/examples/sites/demos/pc/app/grid/base/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/base/basic-usage-composition-api.vue
@@ -1,19 +1,5 @@
 <template>
   <div>
-    <label style="font-size: 1.5em; margin-right: 8px">选择城市:</label>
-    <tiny-select
-      v-model="queryCity"
-      :options="options"
-      style="width: 200px; margin-bottom: 20px"
-      placeholder="选择城市"
-      :tiny_mcp_config="{
-        server,
-        business: {
-          id: 'city-dropdown',
-          description: '城市下拉框'
-        }
-      }"
-    ></tiny-select>
     <tiny-grid
       :data="tableData"
       :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
@@ -36,65 +22,34 @@
   </div>
 </template>
 
-<script>
-import { TinyGrid, TinyGridColumn, TinyBaseSelect } from '@opentiny/vue'
-import { createTransportPair, createSseProxy } from '@opentiny/next'
-import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
-import { Client } from '@modelcontextprotocol/sdk/client/index.js'
-
-export default {
-  components: {
-    TinyGrid,
-    TinyGridColumn,
-    TinySelect: TinyBaseSelect
-  },
-  data() {
-    const _table = [
-      { company: 'GFD 有限责任公司', city: '广州', employees: 800, createdDate: '2014-04-30 00:56:00' },
-      { company: 'AWE 有限责任公司', city: '深圳', employees: 500, createdDate: '2015-05-01 01:01:01' },
-      { company: 'ASD 有限责任公司', city: '中山', employees: 200, createdDate: '2013-03-03 03:03:03' },
-      { company: 'ZXC 有限责任公司', city: '广州', employees: 1000, createdDate: '2012-02-02 02:02:02' },
-      { company: 'VBN 有限责任公司', city: '深圳', employees: 600, createdDate: '2011-01-01 01:01:01' },
-      { company: 'QWE 有限责任公司', city: '中山', employees: 700, createdDate: '2016-08-08 08:08:08' },
-      { company: 'RTY 有限责任公司', city: '广州', employees: 900, createdDate: '2015-09-09 09:09:09' },
-      { company: 'UIO 有限责任公司', city: '深圳', employees: 1100, createdDate: '2014-10-10 10:10:10' },
-      { company: 'HJK 有限责任公司', city: '中山', employees: 1200, createdDate: '2013-11-11 11:11:11' },
-      { company: 'WWW 有限责任公司', city: '深圳', employees: 300, createdDate: '2016-07-08 12:36:22' },
-      { company: 'RFV 有限责任公司', city: '中山', employees: 1300, createdDate: '2014-02-14 14:14:14' },
-      { company: 'TGB 有限责任公司', city: '广州', employees: 360, createdDate: '2013-01-13 13:13:13' },
-      { company: 'YHN 有限责任公司', city: '深圳', employees: 810, createdDate: '2012-12-12 12:12:12' },
-      { company: 'WSX 有限责任公司', city: '中山', employees: 800, createdDate: '2011-11-11 11:11:11' },
-      { company: 'KBG 有限责任公司', city: '深圳', employees: 400, createdDate: '2014-04-30 23:56:00' },
-      { company: 'SZB 有限责任公司', city: '深圳', employees: 1400, createdDate: '2016-06-03 13:53:25' }
-    ]
-    return {
-      server: new McpServer({ name: 'base-config', version: '1.0.0' }, {}),
-      sessionID: '',
-      tableData: _table,
-      queryCity: '',
-      options: Array.from(new Set(_table.map((item) => item.city))).map((city) => ({
-        label: city,
-        value: city
-      }))
-    }
-  },
-  async mounted() {
-    // 1、
-    const [transport, clientTransport] = createTransportPair()
+<script setup>
+import { ref } from 'vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
+import { useNextServer } from '@opentiny/next-vue'
 
-    // 2、
-    const client = new Client({ name: 'ai-agent', version: '1.0.0' }, {})
-    await client.connect(clientTransport)
-    const { sessionId } = await createSseProxy({
-      client,
-      url: 'https://39.108.160.245/sse'
-    })
+// 初始化表格数据
+const _table = [
+  { company: 'GFD 有限责任公司', city: '广州', employees: 800, createdDate: '2014-04-30 00:56:00' },
+  { company: 'AWE 有限责任公司', city: '深圳', employees: 500, createdDate: '2015-05-01 01:01:01' },
+  { company: 'ASD 有限责任公司', city: '中山', employees: 400, createdDate: '2013-03-03 03:03:03' },
+  { company: 'ZXC 有限责任公司', city: '广州', employees: 1000, createdDate: '2012-02-02 02:02:02' },
+  { company: 'VBN 有限责任公司', city: '深圳', employees: 600, createdDate: '2011-01-01 01:01:01' },
+  { company: 'QWE 有限责任公司', city: '中山', employees: 700, createdDate: '2016-08-08 08:08:08' },
+  { company: 'RTY 有限责任公司', city: '广州', employees: 900, createdDate: '2015-09-09 09:09:09' },
+  { company: 'UIO 有限责任公司', city: '深圳', employees: 1100, createdDate: '2014-10-10 10:10:10' },
+  { company: 'HJK 有限责任公司', city: '中山', employees: 1200, createdDate: '2013-11-11 11:11:11' },
+  { company: 'WWW 有限责任公司', city: '深圳', employees: 300, createdDate: '2016-07-08 12:36:22' },
+  { company: 'RFV 有限责任公司', city: '中山', employees: 1300, createdDate: '2014-02-14 14:14:14' },
+  { company: 'TGB 有限责任公司', city: '广州', employees: 360, createdDate: '2013-01-13 13:13:13' },
+  { company: 'YHN 有限责任公司', city: '深圳', employees: 810, createdDate: '2012-12-12 12:12:12' },
+  { company: 'WSX 有限责任公司', city: '中山', employees: 800, createdDate: '2011-11-11 11:11:11' },
+  { company: 'KBG 有限责任公司', city: '深圳', employees: 400, createdDate: '2014-04-30 23:56:00' },
+  { company: 'SZB 有限责任公司', city: '深圳', employees: 1400, createdDate: '2016-06-03 13:53:25' }
+]
 
-    this.sessionID = sessionId
-    window.$sessionId = this.sessionID
+const tableData = ref(_table)
 
-    // 3、
-    await this.server.connect(transport)
-  }
-}
+const { server } = useNextServer({
+  serverInfo: { name: 'company-information', version: '1.0.0' }
+})
 </script>
diff --git a/examples/sites/demos/pc/app/grid/base/basic-usage.spec.js b/examples/sites/demos/pc/app/grid/base/basic-usage.spec.js
index 4fde3edf38..0ca9629bdc 100644
--- a/examples/sites/demos/pc/app/grid/base/basic-usage.spec.js
+++ b/examples/sites/demos/pc/app/grid/base/basic-usage.spec.js
@@ -4,5 +4,5 @@ test('标签式表格', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid#base-basic-usage')
 
-  // await expect(page.getByRole('row', { name: '1 800 2014-04-30 00:56:00 福州' })).toBeVisible()
+  await expect(page.getByRole('cell', { name: 'GFD 有限责任公司' })).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/grid/base/basic-usage.vue b/examples/sites/demos/pc/app/grid/base/basic-usage.vue
index 3708ad4648..8ce06e0799 100644
--- a/examples/sites/demos/pc/app/grid/base/basic-usage.vue
+++ b/examples/sites/demos/pc/app/grid/base/basic-usage.vue
@@ -1,31 +1,6 @@
 <template>
   <div>
-    <label style="font-size: 1.5em; margin-right: 8px">选择城市:</label>
-    <tiny-select
-      v-model="queryCity"
-      :options="options"
-      style="width: 200px; margin-bottom: 20px"
-      placeholder="选择城市"
-      :tiny_mcp_config="{
-        server,
-        business: {
-          id: 'city-dropdown',
-          description: '城市下拉框'
-        }
-      }"
-    ></tiny-select>
-    <tiny-grid
-      :data="tableData"
-      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
-      height="420px"
-      :tiny_mcp_config="{
-        server,
-        business: {
-          id: 'company-information',
-          description: '公司人员信息表'
-        }
-      }"
-    >
+    <tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }" height="420px">
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column type="selection" width="60"></tiny-grid-column>
       <tiny-grid-column field="company" title="公司名称"></tiny-grid-column>
@@ -37,22 +12,18 @@
 </template>
 
 <script>
-import { TinyGrid, TinyGridColumn, TinyBaseSelect } from '@opentiny/vue'
-import { createTransportPair, createSseProxy } from '@opentiny/next'
-import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
-import { Client } from '@modelcontextprotocol/sdk/client/index.js'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
     TinyGrid,
-    TinyGridColumn,
-    TinySelect: TinyBaseSelect
+    TinyGridColumn
   },
   data() {
     const _table = [
       { company: 'GFD 有限责任公司', city: '广州', employees: 800, createdDate: '2014-04-30 00:56:00' },
       { company: 'AWE 有限责任公司', city: '深圳', employees: 500, createdDate: '2015-05-01 01:01:01' },
-      { company: 'ASD 有限责任公司', city: '中山', employees: 200, createdDate: '2013-03-03 03:03:03' },
+      { company: 'ASD 有限责任公司', city: '中山', employees: 400, createdDate: '2013-03-03 03:03:03' },
       { company: 'ZXC 有限责任公司', city: '广州', employees: 1000, createdDate: '2012-02-02 02:02:02' },
       { company: 'VBN 有限责任公司', city: '深圳', employees: 600, createdDate: '2011-01-01 01:01:01' },
       { company: 'QWE 有限责任公司', city: '中山', employees: 700, createdDate: '2016-08-08 08:08:08' },
@@ -77,24 +48,6 @@ export default {
         value: city
       }))
     }
-  },
-  async mounted() {
-    // 1、
-    const [transport, clientTransport] = createTransportPair()
-
-    // 2、
-    const client = new Client({ name: 'ai-agent', version: '1.0.0' }, {})
-    await client.connect(clientTransport)
-    const { sessionId } = await createSseProxy({
-      client,
-      url: 'https://39.108.160.245/sse'
-    })
-
-    this.sessionID = sessionId
-    window.$sessionId = this.sessionID
-
-    // 3、
-    await this.server.connect(transport)
   }
 }
 </script>
diff --git a/examples/sites/package.json b/examples/sites/package.json
index 2f75c60070..c80ad9686e 100644
--- a/examples/sites/package.json
+++ b/examples/sites/package.json
@@ -27,12 +27,12 @@
     "@docsearch/css": "^3.8.0",
     "@docsearch/js": "^3.8.0",
     "@docsearch/react": "npm:@docsearch/css",
-    "@modelcontextprotocol/sdk": "1.12.1",
     "@opentiny/next": "0.1.2",
+    "@opentiny/next-vue": "0.0.1-alpha.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.1",
+    "@opentiny/tiny-vue-mcp": "0.0.1-alpha.2",
     "@opentiny/utils": "workspace:~",
     "@opentiny/vue": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
diff --git a/examples/sites/playground/App.vue b/examples/sites/playground/App.vue
index a83eb68380..b9b9f5ca69 100644
--- a/examples/sites/playground/App.vue
+++ b/examples/sites/playground/App.vue
@@ -11,7 +11,7 @@ import logoUrl from './assets/opentiny-logo.svg?url'
 import GitHub from './icons/Github.vue'
 import Share from './icons/Share.vue'
 
-const VERSION = 'tiny-vue-version-3.23'
+const VERSION = 'tiny-vue-version-3.24'
 const NOTIFY_KEY = 'tiny-vue-playground-notify'
 const LAYOUT = 'playground-layout'
 const LAYOUT_REVERSE = 'playground-layout-reverse'
@@ -23,7 +23,7 @@ const isMobileFirst = tinyMode === 'mobile-first'
 const isSaas = tinyTheme === 'saas'
 const isPreview = searchObj.get('openMode') === 'preview' // 是否多端弹窗预览
 
-const versions = ['3.23', '3.22', '3.21']
+const versions = ['3.24', '3.23', '3.22']
 const getVersion = () => {
   if (isPreview) {
     return versions[0]
diff --git a/examples/sites/src/App.vue b/examples/sites/src/App.vue
index bd1eb03827..b482a918bb 100644
--- a/examples/sites/src/App.vue
+++ b/examples/sites/src/App.vue
@@ -11,11 +11,13 @@
 </template>
 
 <script>
-import { defineComponent, onMounted, provide, ref } from 'vue'
+import { defineComponent, onMounted, provide, ref, watch } from 'vue'
 import { ConfigProvider, Modal } from '@opentiny/vue'
 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'
 
 export default defineComponent({
   name: 'AppVue',
@@ -28,6 +30,21 @@ export default defineComponent({
   setup() {
     const previewUrl = ref(import.meta.env.VITE_PLAYGROUND_URL)
     const modalSHow = ref(false)
+
+    const { sessionId } = useNextClient({
+      clientInfo: { name: 'my-project', version: '1.0.0' },
+      proxyOptions: { url: 'http://39.108.160.245/sse', token: '' }
+    })
+
+    watch(
+      () => sessionId.value,
+      (newVal) => {
+        if (newVal) {
+          globalConversation.sessionId = newVal
+        }
+      }
+    )
+
     onMounted(() => {
       // 加载header
       const common = new window.TDCommon(['#header'], {
diff --git a/examples/sites/src/views/components-doc/composition/DifyModelProvider.ts b/examples/sites/src/views/components-doc/composition/DifyModelProvider.ts
index 93ac9fdae3..58b12cfda4 100644
--- a/examples/sites/src/views/components-doc/composition/DifyModelProvider.ts
+++ b/examples/sites/src/views/components-doc/composition/DifyModelProvider.ts
@@ -47,7 +47,7 @@ export class DifyModelProvider extends BaseModelProvider {
           user: 'user',
           response_mode: 'streaming',
           inputs: {
-            sessionId: window.$sessionId
+            sessionId: globalConversation.sessionId
           },
           conversation_id: globalConversation.id
         })
diff --git a/examples/sites/src/views/components-doc/composition/useTinyRobot.ts b/examples/sites/src/views/components-doc/composition/useTinyRobot.ts
index c3167d3dd8..a78300e867 100644
--- a/examples/sites/src/views/components-doc/composition/useTinyRobot.ts
+++ b/examples/sites/src/views/components-doc/composition/useTinyRobot.ts
@@ -27,12 +27,12 @@ export function useTinyRobot() {
   const promptItems = [
     {
       label: '识别网页的内容',
-      description: '公司人员表有多少列，有多少行数据，帮我统计一下！',
+      description: '公司人员表中员工最多和最少的公司，帮我统计一下！',
       icon: h('span', { style: { fontSize: '18px' } }, '💡')
     },
     {
       label: '智能操作网页',
-      description: '请勾选公司人员表最后一行',
+      description: '请帮我选中公司人员表中员工最多的公司',
       icon: h('span', { style: { fontSize: '18px' } }, '🕹')
     }
   ]
@@ -64,11 +64,6 @@ export function useTinyRobot() {
       id: '1',
       text: '公司人员表',
       icon: h('span', { style: { fontSize: '18px' } }, '🏢')
-    },
-    {
-      id: '2',
-      text: '城市下拉框',
-      icon: h('span', { style: { fontSize: '18px' } }, '🌐')
     }
   ]
 
diff --git a/examples/sites/src/views/components-doc/composition/utils.ts b/examples/sites/src/views/components-doc/composition/utils.ts
index 4ed5968931..66745f654d 100644
--- a/examples/sites/src/views/components-doc/composition/utils.ts
+++ b/examples/sites/src/views/components-doc/composition/utils.ts
@@ -8,7 +8,8 @@ import type { ChatCompletionRequest } from '@opentiny/tiny-robot-kit'
 import type { Ref } from 'vue'
 
 export const globalConversation = {
-  id: ''
+  id: '',
+  sessionId: ''
 }
 /**
  * 处理SSE流式响应