feat: MCP tool for adding tree controls

docs/components.d.ts

@@ -19,5 +19,6 @@ declare module 'vue' {
     TinyQrCode: typeof import('@opentiny/vue-qr-code')['default']
     TinyRobotChat: typeof import('./src/components/tiny-robot-chat.vue')['default']
     TinyTag: typeof import('@opentiny/vue-tag')['default']
+    TinyTree: typeof import('@opentiny/vue-tree')['default']
   }
 }

docs/src/router/index.ts

@@ -17,6 +17,11 @@ const router = createRouter({
       name: 'Comprehensive',
       component: () => import('../views/comprehensive/index.vue')
     },
+    {
+      path: '/tree',
+      name: 'Tree',
+      component: () => import('../views/tree/tree.vue')
+    },
     {
       path: '/:pathMatch(.*)*',
       name: 'NotFound',

docs/src/views/tree/tree.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="ecs-container">
+    <tiny-tree
+      :tiny_mcp_config="{
+        server,
+        business: {
+          id: 'cpu-tree',
+          description: 'CPU规格的树'
+        }
+      }"
+      node-key="id"
+      :data="data"
+      show-checkbox
+      highlight-current
+    :default-expanded-keys="['1']"
+      :check-on-click-node="true"
+      :expand-on-click-node="false"
+    ></tiny-tree>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { useNextServer } from '@opentiny/next-vue'
+const data = ref([
+  {
+    id: '1',
+    label: '操作系统',
+    children: [
+      { id: '2', label: ' windows', 
+        children: [
+            { id: '3', label: ' windows 10' },
+            { id: '4', label: ' windows 11' },
+            { id: '5', label: ' windows 12' },
+            { id: '7', label: ' windows 13' }
+        ]
+        },
+      { id: '8', label: 'linux',
+        children: [
+            { id: '9', label: 'linux 10' },
+            { id: '10', label: 'linux 11' },
+            { id: '11', label: 'linux 12' },
+            { id: '12', label: 'linux 13' }
+        ]
+      },
+      { id: '13', label: 'macos'},
+      { id: '14', label: 'harmonyOS'},
+    ]
+  },
+])
+
+const { server } = useNextServer({
+  serverInfo: { name: 'ecs-console', version: '1.0.0' }
+})
+</script>
+
+<style scoped>
+.checkbox-demo {
+  display: flex;
+  margin: 16px;
+}
+
+.checkbox-demo .tiny-tree {
+  flex: 1;
+  min-width: 300px;
+}
+
+.checkbox-demo div {
+  margin-bottom: 8px;
+}
+
+.tip {
+  font-weight: bold;
+}
+</style>

packages/mcp/index.ts

@@ -4,6 +4,7 @@ import type { Business, ComponentMcpConfig } from './src/utils/defineTool'
 import zhCN from './src/lang/zh-CN'
 import enUS from './src/lang/en'
 import { getGridConfig } from './src/grid'
+import { getTreeConfig } from './src/tree'
 import { getBaseSelectConfig } from './src/base-select'
 import { i18n } from './src/utils/locale'
 import { getButtonConfig } from './src/button'
@@ -28,6 +29,7 @@ export const getTinyVueMcpConfig = ({ t }: { t?: ((path: string) => string) | nu
     version: '0.0.1',
     components: {
       Grid: getGridConfig(),
+      Tree: getTreeConfig(),
       BaseSelect: getBaseSelectConfig(),
       Button: getButtonConfig()
     }

packages/mcp/src/lang/en.ts

@@ -28,7 +28,16 @@ export default {
     },
     button: {
       description: 'Button component related tool set',
-      triggerClick: 'Button click, click the button'
+      triggerClick: 'trigger button click,click self'
+    },
+    tree: {
+      description: 'Collection of Tools Related to Tree Control Components',
+      setCurrentKey: 'Please enter the ID value to set the current selected state of a node',
+      expandHlNode: 'Please enter the ID value to set the current deployment status of a node',
+      collapseHlNode: 'Please enter the ID value to set the collapsed state of a node',
+      removeNode: 'Please enter the ID value to delete a node',
+      insertBefore: 'Add a node in front of a node',
+      insertAfter: 'Add a node after a node',
     }
   }
 }

packages/mcp/src/lang/zh-CN.ts

@@ -22,6 +22,15 @@ export default {
     button: {
       description: '按钮组件相关工具集合',
       triggerClick: '按钮点击，点击按钮'
+    },
+    tree: {
+      description: '树形控件组件相关工具集合',
+      setCurrentKey: '请输入id值设置某个节点的当前选中状态',
+      expandHlNode: '请输入id值设置某个节点的展开状态',
+      collapseHlNode: '请输入id值设置某个节点的收起状态',
+      removeNode: '请输入id值删除某个节点',
+      insertBefore: '在一个节点的前面增加一个节点',
+      insertAfter: '在一个节点的后面增加一个节点',
     }
   }
 }

packages/mcp/src/tree/index.ts

@@ -0,0 +1,70 @@
+import { z } from 'zod'
+import { defineComponentTool } from '../utils/defineComponentTool'
+import resourcesZh from './resouces.zh.md?raw'
+import resourcesEn from './resouces.en.md?raw'
+import { t } from '../utils/locale'
+
+export const resources = {
+  zh: resourcesZh,
+  en: resourcesEn
+}
+
+export const getTreeConfig = () =>
+  defineComponentTool({
+    name: 'tree_component_tools',
+    description: t('ai.tree.description'),
+    tools: {
+      setCurrentKey: {
+        paramsSchema:  z.string().optional().describe(t('ai.tree.setCurrentKey')),
+        cb: (instance, value) => {
+          if(instance.showCheckbox){
+            instance.setCheckedKeys([value])
+          }else{
+            instance.setCurrentKey(value)
+          }
+          return { type: 'text', text: 'success' }
+        }
+      },
+      expandHlNode: {
+        paramsSchema:  z.string().optional().describe(t('ai.tree.expandHlNode')),
+        cb: (instance, value) => {
+          const node = instance.getNode(value)
+          node.expand()
+          return { type: 'text', text: 'success' }
+        }
+      },
+      collapseHlNode: {
+        paramsSchema:  z.string().optional().describe(t('ai.tree.collapseHlNode')),
+        cb: (instance, value) => {
+          const node = instance.getNode(value)
+          node.collapse()
+          return { type: 'text', text: 'success' }
+        }
+      },
+      removeNode: {
+        paramsSchema:  z.string().optional().describe(t('ai.tree.removeNode')),
+        cb: (instance, value) => {
+          instance.remove(value)
+          return { type: 'text', text: 'success' }
+        }
+      },
+      insertBefore: {
+        paramsSchema: z.record(z.any()).optional().describe(t('ai.tree.insertBefore')),
+        cb: (instance, value) => {
+          let id = 1000
+          instance.insertBefore({ id, label: value.label }, value.id)
+          id++
+          return { type: 'text', text: 'success' }
+        }
+      },
+      insertAfter: {
+        paramsSchema: z.record(z.any()).optional().describe(t('ai.tree.insertAfter')),
+        cb: (instance, value) => {
+          let id = 1000
+          instance.insertAfter({ id, label: value.label }, value.id)
+          id++
+          return { type: 'text', text: 'success' }
+        }
+      },
+    }
+  })

packages/mcp/src/tree/resouces.en.md

@@ -0,0 +1,3 @@
+# Tree Component
+
+It can display data with parent-child hierarchy, and supports functions such as selecting, dragging, and editing nodes.

packages/mcp/src/tree/resouces.zh.md

@@ -0,0 +1,3 @@
+# Tree 树形控件
+
+可进行展示有父子层级的数据，支持选择，拖拽和编辑节点等功能。