feat(site): add the tiny-robot drawer to the official website.

examples/sites/demos/pc/app/grid/ai-agent/basic-usage-composition-api.vue

@@ -0,0 +1,100 @@
+<template>
+  <tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+    <tiny-grid-column
+      field="boole"
+      title="布尔值"
+      align="center"
+      format-text="boole"
+      :editor="checkboxEdit"
+    ></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script setup lang="jsx">
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
+import { reactive } from 'vue'
+
+const tableData = reactive([
+  {
+    id: '1',
+    name: 'GFD 科技 YX 公司',
+    city: '福州',
+    employees: 800,
+    createdDate: '2014-04-30 00:56:00',
+    boole: false
+  },
+  {
+    id: '2',
+    name: 'WWW 科技 YX 公司',
+    city: '深圳',
+    employees: 300,
+    createdDate: '2016-07-08 12:36:22',
+    boole: true
+  },
+  {
+    id: '3',
+    name: 'RFV 有限责任公司',
+    city: '中山',
+    employees: 1300,
+    createdDate: '2014-02-14 14:14:14',
+    boole: false
+  },
+  {
+    id: '4',
+    name: 'TGB 科技 YX 公司',
+    city: '龙岩',
+    employees: 360,
+    createdDate: '2013-01-13 13:13:13',
+    boole: true
+  },
+  {
+    id: '5',
+    name: 'YHN 科技 YX 公司',
+    city: '韶关',
+    employees: 810,
+    createdDate: '2012-12-12 12:12:12',
+    boole: true
+  },
+  {
+    id: '6',
+    name: 'WSX 科技 YX 公司',
+    city: '黄冈',
+    employees: 800,
+    createdDate: '2011-11-11 11:11:11',
+    boole: true
+  },
+  {
+    id: '7',
+    name: 'KBG 物业 YX 公司',
+    city: '赤壁',
+    employees: 400,
+    createdDate: '2016-04-30 23:56:00',
+    boole: false
+  },
+  {
+    id: '8',
+    name: '深圳市福德宝网络技术 YX 公司',
+    boole: true,
+    city: '厦门',
+    createdDate: '2016-06-03 13:53:25',
+    employees: 540
+  }
+])
+
+function checkboxEdit(h, { row }) {
+  return (
+    <input
+      type="checkbox"
+      checked={row.boole}
+      onChange={(event) => {
+        row.boole = event.target.checked
+      }}
+    />
+  )
+}
+</script>

examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vue

@@ -0,0 +1,183 @@
+<template>
+  <tiny-grid
+    :data="tableData"
+    :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+    :tiny_mcp_config="{
+      server,
+      business: {
+        id: 'company-information',
+        description: '公司人员信息表'
+      }
+    }"
+  >
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+    <tiny-grid-column
+      field="boole"
+      title="布尔值"
+      align="center"
+      format-text="boole"
+      :editor="checkboxEdit"
+    ></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script lang="jsx">
+import { TinyGrid, TinyGridColumn } 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
+  },
+  data() {
+    const tableData = [
+      {
+        id: '1',
+        name: 'GFD 科技 YX 公司',
+        city: '福州',
+        employees: 800,
+        createdDate: '2014-04-30 00:56:00',
+        boole: false
+      },
+      {
+        id: '2',
+        name: 'WWW 科技 YX 公司',
+        city: '深圳',
+        employees: 300,
+        createdDate: '2016-07-08 12:36:22',
+        boole: true
+      },
+      {
+        id: '3',
+        name: 'RFV 有限责任公司',
+        city: '中山',
+        employees: 1300,
+        createdDate: '2014-02-14 14:14:14',
+        boole: false
+      },
+      {
+        id: '4',
+        name: 'TGB 科技 YX 公司',
+        city: '龙岩',
+        employees: 360,
+        createdDate: '2013-01-13 13:13:13',
+        boole: true
+      },
+      {
+        id: '5',
+        name: 'YHN 科技 YX 公司',
+        city: '韶关',
+        employees: 810,
+        createdDate: '2012-12-12 12:12:12',
+        boole: true
+      },
+      {
+        id: '6',
+        name: 'WSX 科技 YX 公司',
+        city: '黄冈',
+        employees: 800,
+        createdDate: '2011-11-11 11:11:11',
+        boole: true
+      },
+      {
+        id: '7',
+        name: 'KBG 物业 YX 公司',
+        city: '赤壁',
+        employees: 400,
+        createdDate: '2016-04-30 23:56:00',
+        boole: false
+      },
+      {
+        id: '8',
+        name: '深圳市福德宝网络技术 YX 公司',
+        boole: true,
+        city: '厦门',
+        createdDate: '2016-06-03 13:53:25',
+        employees: 540
+      }
+    ]
+
+    return {
+      server: null,
+      sessionID: '',
+      op: {
+        editConfig: {
+          trigger: 'click',
+          mode: 'cell',
+          showStatus: true
+        },
+        columns: [
+          {
+            type: 'index',
+            width: 60
+          },
+          {
+            type: 'selection',
+            width: 60
+          },
+          {
+            field: 'employees',
+            title: '员工数'
+          },
+          {
+            field: 'createdDate',
+            title: '创建日期'
+          },
+          {
+            field: 'city',
+            title: '城市'
+          },
+          {
+            field: 'boole',
+            title: '布尔值',
+            align: 'center',
+            formatText: 'boole',
+            editor: this.checkboxEdit
+          }
+        ],
+        data: tableData
+      },
+      tableData
+    }
+  },
+  methods: {
+    checkboxEdit(h, { row }) {
+      return (
+        <input
+          type="checkbox"
+          checked={row.boole}
+          onChange={(event) => {
+            row.boole = event.target.checked
+          }}
+        />
+      )
+    }
+  },
+  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: 'http://39.108.160.245/sse'
+    })
+
+    this.sessionID = sessionId
+    window.$sessionId = this.sessionID
+
+    // 3、
+    const server = new McpServer({ name: 'base-config', version: '1.0.0' }, {})
+    await server.connect(transport)
+  }
+}
+</script>

examples/sites/demos/pc/app/grid/webdoc/grid-ai-agent.cn.md

@@ -0,0 +1,7 @@
+---
+title: Grid 表格
+---
+
+# Grid 表格
+
+<div>表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。</div>

examples/sites/demos/pc/app/grid/webdoc/grid-ai-agent.en.md

@@ -0,0 +1,7 @@
+---
+title: Grid Table
+---
+
+# Grid Table
+
+<div>Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.</div>

examples/sites/demos/pc/app/grid/webdoc/grid-ai-agent.js

@@ -0,0 +1,23 @@
+export default {
+  column: '1',
+  owner: '',
+  demos: [
+    {
+      demoId: 'grid-ai-agent',
+      name: { 'zh-CN': '表格智能体', 'en-US': 'grid agent' },
+      desc: {
+        'zh-CN': `表格智能体是表格组件面向 AI 领域的应用，提供了一个基于表格数据的智能体交互界面。用户可以通过自然语言与表格进行交互，智能体会根据表格内容和用户输入执行操作。<br>
+        目前表格智能体支持的操作包括：<br>
+        - 查询表格数据：用户可以输入自然语言查询表格中的数据，智能体会解析查询并返回结果，以及根据结果执行后续的操作。<br>
+        - 滚动到指定行：用户可以通过自然语言指令，将表格滚动到指定位置。<br>    
+        - 选中表格数据：用户可以通过自然语言指令，选中表格数据。<br>    
+        - 选中全部数据：用户可以通过自然语言指令，选中全部数据。<br>    
+
+        通过属性 <code>tiny-mcp-config</code> 可以配置表格的业务意义以及传入<code>server</code>对象，详见示例。`,
+        'en-US': ``
+      },
+      codeFiles: ['ai-agent/basic-usage.vue']
+    }
+  ],
+  apis: [{ name: 'grid-ai-agent', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
+}

examples/sites/demos/pc/menus.js

@@ -175,6 +175,7 @@ export const cmpMenus = [
     'key': 'cmp-table-components',
     'children': [
       { 'nameCn': '基本用法', 'name': '', 'key': 'grid' },
+      { 'nameCn': 'AI智能休', 'name': '', 'key': 'grid-ai-agent' },
       { 'nameCn': '序号列', 'name': '', 'key': 'grid-serial-column' },
       { 'nameCn': '选中行', 'name': '', 'key': 'grid-operation-column' },
       { 'nameCn': '空数据', 'name': '', 'key': 'grid-empty' },

examples/sites/package.json

@@ -27,6 +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/tiny-robot": "0.2.0-alpha.7",
+    "@opentiny/tiny-robot-kit": "0.2.0-alpha.7",
+    "@opentiny/tiny-robot-svgs": "0.2.0-alpha.7",
+    "@opentiny/tiny-schema-renderer": "1.0.0-beta.5",
     "@opentiny/utils": "workspace:~",
     "@opentiny/vue": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
@@ -100,4 +106,4 @@
     "vite-svg-loader": "^3.6.0",
     "vue-tsc": "^1.8.5"
   }
-}
+}

examples/sites/src/main.js

@@ -2,6 +2,9 @@ import { createHead } from '@vueuse/head'
 import { createApp } from 'vue'
 import '@unocss/reset/eric-meyer.css'
 
+// tiny-robot 对话框
+import '@opentiny/tiny-robot/dist/style.css'
+
 // markdown文件内代码高亮
 import 'prismjs/themes/prism.css'
 import 'uno.css'