@opentiny/vue-docs 3.28.1 → 3.30.0

package/demos/saas/menus.js

@@ -18,6 +18,7 @@ const noSaasComponents = [
   'BaseSelect',
   'FluentEditor',
   'TreeSelect',
+  'TreeMenu',
   'GridSelect',
   'TimeSelect',
   'Milestone',

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@opentiny/vue-docs",
   "type": "module",
-  "version": "3.28.1",
+  "version": "3.30.0",
   "license": "MIT",
   "dependencies": {
     "@docsearch/css": "^3.8.0",
     "@docsearch/js": "^3.8.0",
     "@docsearch/react": "npm:@docsearch/css",
-    "@opentiny/tiny-vue-mcp": "^0.0.5",
     "@opentiny/vue-repl": "^1.1.2",
+    "@opentiny/vue-search-box": "~3.28.4",
+    "@opentiny/vue-search-box-saas": "~3.28.4",
     "@opentiny/vue-vite-import": "~1.2.0",
     "@unocss/reset": "0.38.2",
     "@vue/repl": "^2.5.5",
@@ -27,24 +28,24 @@
     "vue-i18n": "~9.14.3",
     "vue-router": "4.1.5",
     "zod": "^3.24.4",
-    "@opentiny/utils": "~3.28.0",
-    "@opentiny/vue": "~3.28.0",
-    "@opentiny/vue-common": "~3.28.0",
-    "@opentiny/vue-design-aurora": "~3.28.0",
-    "@opentiny/vue-design-saas": "~3.28.0",
-    "@opentiny/vue-design-smb": "~3.28.0",
-    "@opentiny/vue-directive": "~3.28.0",
-    "@opentiny/vue-flowchart": "~3.28.0",
-    "@opentiny/vue-icon": "~3.28.0",
-    "@opentiny/vue-hooks": "~3.28.0",
-    "@opentiny/vue-huicharts": "~3.28.0",
-    "@opentiny/vue-icon-multicolor": "~3.28.0",
-    "@opentiny/vue-icon-saas": "~3.28.0",
-    "@opentiny/vue-locale": "~3.28.0",
-    "@opentiny/vue-modal": "~3.28.0",
-    "@opentiny/vue-renderless": "~3.28.0",
-    "@opentiny/vue-theme-saas": "~3.28.0",
-    "@opentiny/vue-theme": "~3.28.0"
+    "@opentiny/utils": "~3.30.0",
+    "@opentiny/vue": "~3.30.0",
+    "@opentiny/vue-common": "~3.30.0",
+    "@opentiny/vue-design-aurora": "~3.30.0",
+    "@opentiny/vue-design-saas": "~3.30.0",
+    "@opentiny/vue-design-smb": "~3.30.0",
+    "@opentiny/vue-directive": "~3.30.0",
+    "@opentiny/vue-flowchart": "~3.30.0",
+    "@opentiny/vue-hooks": "~3.30.0",
+    "@opentiny/vue-huicharts": "~3.30.0",
+    "@opentiny/vue-icon": "~3.30.0",
+    "@opentiny/vue-icon-multicolor": "~3.30.0",
+    "@opentiny/vue-icon-saas": "~3.30.0",
+    "@opentiny/vue-modal": "~3.30.0",
+    "@opentiny/vue-locale": "~3.30.0",
+    "@opentiny/vue-renderless": "~3.30.0",
+    "@opentiny/vue-theme-saas": "~3.30.0",
+    "@opentiny/vue-theme": "~3.30.0"
   },
   "devDependencies": {
     "@playwright/test": "~1.49.0",

package/playground/App.vue

@@ -15,7 +15,7 @@ import Layout from './icons/Layout.vue'
 import Reverse from './icons/Reverse.vue'
 import Vertical from './icons/Vertical.vue'
 
-const VERSION = 'tiny-vue-version-3.28'
+const VERSION = 'tiny-vue-version-3.30'
 const NOTIFY_KEY = 'tiny-vue-playground-notify'
 const LAYOUT = 'playground-layout'
 const LAYOUT_REVERSE = 'playground-layout-reverse'
@@ -26,7 +26,7 @@ const tinyTheme = searchObj.get('theme')
 const isMobileFirst = tinyMode === 'mobile-first'
 const isSaas = tinyTheme === 'saas'
 const isPreview = searchObj.get('openMode') === 'preview'
-const versions = ['3.28', '3.27', '3.26']
+const versions = ['3.30', '3.29', '3.28']
 const manualShow = ref(false)
 
 const getVersion = () => {
@@ -90,8 +90,9 @@ const createImportMap = (version) => {
     'sortablejs': `${cdnHost}/sortablejs${versionDelimiter}1.15.0/${fileDelimiter}modular/sortable.esm.js`
   }
   if (['aurora', 'saas', 'smb'].includes(tinyTheme)) {
-    imports[`@opentiny/vue-design-${tinyTheme}`] =
-      `${cdnHost}/@opentiny/vue-design-${tinyTheme}${versionDelimiter}${version}/${fileDelimiter}index.js`
+    imports[
+      `@opentiny/vue-design-${tinyTheme}`
+    ] = `${cdnHost}/@opentiny/vue-design-${tinyTheme}${versionDelimiter}${version}/${fileDelimiter}index.js`
   }
   if (isSaas) {
     imports['@opentiny/vue-icon'] = `${getRuntime(version)}tiny-vue-icon-saas.mjs`
@@ -100,6 +101,7 @@ const createImportMap = (version) => {
     imports['@opentiny/vue-common'] = `${getRuntime(version)}tiny-vue-saas-common.mjs`
     imports['@opentiny/vue'] = `${getRuntime(version)}tiny-vue-all.mjs`
   }
+  imports['@opentiny/vue-search-box'] = '/playground/shims/vue-search-box.mjs'
   return { imports }
 }
 

package/playground/shims/vue-search-box.mjs

@@ -0,0 +1,154 @@
+// 演练场用的 @opentiny/vue-search-box 和 @opentiny/vue-search-box-saas 统一 shim
+// 作用：从 CDN 拉取 JS，移除其中的 CSS import，并手动注入 CSS，避免浏览器将 CSS 当作模块加载导致 MIME 错误
+
+// 通过检查 URL 参数来判断是哪个包
+// 由于两个包在 import map 中都映射到同一个文件，我们通过 URL 参数 theme=saas 来判断
+let isSaas = false
+let packageName = '@opentiny/vue-search-box'
+let cssId = 'tiny-search-box-css'
+
+// 通过 URL 参数判断是否为 saas 模式
+if (typeof location !== 'undefined') {
+  try {
+    const searchParams = new URLSearchParams(window.parent.location.search)
+    const theme = searchParams.get('theme')
+    if (theme === 'saas') {
+      isSaas = true
+      packageName = '@opentiny/vue-search-box-saas'
+      cssId = 'tiny-search-box-saas-css'
+    }
+  } catch (e) {
+    // 忽略错误，使用默认值
+  }
+}
+
+// 从 localStorage 获取 CDN 和版本，若未配置则使用默认
+const cdnHost =
+  typeof localStorage !== 'undefined'
+    ? localStorage.getItem('setting-cdn') || 'https://registry.npmmirror.com'
+    : 'https://registry.npmmirror.com'
+
+
+const version = '3.28.4' 
+const versionDelimiter = cdnHost.includes('npmmirror') ? '/' : '@'
+const fileDelimiter = cdnHost.includes('npmmirror') ? 'files/' : ''
+
+// 构造 CDN 资源地址
+const cdnUrl = `${cdnHost}/${packageName}${versionDelimiter}${version}/${fileDelimiter}index.js`
+const cssUrl = `${cdnHost}/${packageName}${versionDelimiter}${version}/${fileDelimiter}index.css`
+
+// 以 <link> 方式手动注入 CSS
+function injectCSS() {
+  const doc = typeof document !== 'undefined' ? document : null
+  if (!doc) return
+
+  // 检查是否已经注入过
+  const existingLink = doc.querySelector(`link#${cssId}`)
+  if (existingLink) {
+    return
+  }
+
+  const link = doc.createElement('link')
+  link.rel = 'stylesheet'
+  link.href = cssUrl
+  link.id = cssId
+
+  // 确保 CSS 加载完成
+  if (isSaas) {
+    link.onload = () => {
+      console.log('Search-box CSS loaded successfully')
+    }
+  }
+  link.onerror = () => {
+    console.error(`Failed to load ${packageName} CSS:`, cssUrl)
+  }
+
+  if (doc.head) {
+    doc.head.appendChild(link)
+  } else {
+    // 如果 head 不存在，等待它创建
+    const observer = new MutationObserver((mutations, obs) => {
+      if (doc.head) {
+        doc.head.appendChild(link)
+        obs.disconnect()
+      }
+    })
+    observer.observe(doc.documentElement, { childList: true })
+  }
+}
+
+// 立即注入 CSS（在 iframe 环境下运行）
+// 确保 CSS 被正确导入，即使 document 还未准备好也会在后续注入
+if (typeof document !== 'undefined') {
+  // 如果 document 已经准备好，立即注入
+  if (document.readyState === 'loading') {
+    // 如果还在加载中，等待 DOMContentLoaded
+    document.addEventListener('DOMContentLoaded', injectCSS)
+  } else {
+    // 如果已经加载完成，立即注入
+    injectCSS()
+  }
+} else {
+  // 如果 document 还未准备好，等待 DOMContentLoaded 后再注入
+  if (typeof window !== 'undefined' && window.addEventListener) {
+    window.addEventListener('DOMContentLoaded', injectCSS)
+  }
+}
+
+// 拉取并处理 JS 模块
+async function loadModule() {
+  try {
+    // Fetch the JS file
+    const response = await fetch(cdnUrl)
+    if (!response.ok) {
+      throw new Error(`Failed to fetch: ${response.statusText}`)
+    }
+
+    let jsCode = await response.text()
+
+    // 去掉 JS 中的 CSS import，避免 MIME 错误
+    jsCode = jsCode.replace(/import\s+['"]\.\/index\.css['"];?\s*/g, '')
+    jsCode = jsCode.replace(/import\s+['"]\.\/index\.css['"]\s*/g, '')
+
+    const blob = new Blob([jsCode], { type: 'application/javascript' })
+    const moduleUrl = URL.createObjectURL(blob)
+
+    try {
+      const module = await import(moduleUrl)
+      URL.revokeObjectURL(moduleUrl)
+      return module
+    } catch (importError) {
+      URL.revokeObjectURL(moduleUrl)
+      throw importError
+    }
+  } catch (error) {
+    console.error(`Failed to load ${packageName}:`, error)
+    throw error
+  }
+}
+
+// 加载模块
+const TinySearchBoxModule = await loadModule()
+
+// 模块加载完成后，再次确保 CSS 已注入（防止之前注入失败）
+if (typeof document !== 'undefined') {
+  // 延迟一点时间确保 DOM 已准备好
+  setTimeout(() => {
+    injectCSS()
+  }, 100)
+}
+
+// 提取默认组件并重新导出其他组件
+const {
+  default: TinySearchBox,
+  TinySearchBoxFirstLevelPanel,
+  TinySearchBoxSecondLevelPanel,
+  enUS,
+  setGlobalApp,
+  t,
+  zhCN
+} = TinySearchBoxModule
+
+export { TinySearchBoxFirstLevelPanel, TinySearchBoxSecondLevelPanel, enUS, setGlobalApp, t, zhCN }
+
+export { TinySearchBox as default }

package/public/static/css/mobile-dark-theme.css

@@ -0,0 +1 @@
+@import "@opentiny/vue-theme/dark-theme-index.css";

package/src/i18n/index.js

@@ -5,9 +5,8 @@ import zh from './zh.json'
 import en from './en.json'
 import esLA from './es.json'
 import ptBR from './pt.json'
-import { zhCN, enUS } from '@opentiny/tiny-vue-mcp'
 
-const messages = { enUS: { ...en, ...enUS }, zhCN: { ...zh, ...zhCN }, esLA: { ...esLA }, ptBR: { ...ptBR } }
+const messages = { enUS: { ...en }, zhCN: { ...zh }, esLA: { ...esLA }, ptBR: { ...ptBR } }
 
 const langMap = new Map([
   ['zhCN', 'zhCN'],

package/src/main.js

@@ -33,11 +33,16 @@ import '@docsearch/css'
 import { doSearchEverySite } from './tools/docsearch'
 import { getLocaleMode } from './tools/utils.js'
 import '@opentiny/vue-theme/dark-theme-index.css'
-import { createMcpTools, getTinyVueMcpConfig } from '@opentiny/tiny-vue-mcp'
-import { t } from '@opentiny/vue-locale'
-import { registerMcpConfig, customDesignConfig } from '@opentiny/vue-common'
+
+import { customDesignConfig } from '@opentiny/vue-common'
 import { twMerge } from 'tailwind-merge'
 
+// 检测 navigator.webdriver（自动化标记）,如果为 true 则说明当前环境是被自动化测试工具（如 Playwright）控制的
+const isOpenPlaywright = navigator.webdriver
+
+if (!isOpenPlaywright) {
+  import('@opentiny/vue-theme/responsive-index.css')
+}
 // 适配层集成twMerge能力
 if (isSaas) {
   customDesignConfig.twMerge = twMerge
@@ -94,8 +99,6 @@ app.config.globalProperties.tiny_theme = { value: import.meta.env.VITE_TINY_THEM
 if (isSaas) {
   import('./tailwind.css')
 }
-// 注册TinyVue组件mcp配置
-registerMcpConfig(getTinyVueMcpConfig({ t }), createMcpTools)
 
 app.use(router).use(i18n).use(createHead()) // 支持md修改title
 

package/src/style.css

@@ -114,3 +114,8 @@ html.dark {
     padding: 0 11px;
   }
 }
+
+/* TinyVue暂时隐藏opentiny.design的公共头部 */
+#header > .opentiny-design-header .nav-center {
+  display: none !important;
+}

package/src/views/components-doc/common.vue

@@ -74,9 +74,6 @@
               <!-- 主题变量 -->
               <design-token :name="state.cmpId" :tokenList="state.tokenList" />
             </tiny-tab-item>
-            <tiny-tab-item v-if="mcpInfo.length > 0" title="MCP" name="MCP">
-              <McpDocs :data="mcpInfo" :name="capName" />
-            </tiny-tab-item>
           </tiny-tabs>
 
           <slot name="main-right" />
@@ -119,12 +116,9 @@ import ComponentHeader from '../../components/header.vue'
 import ComponentContributor from '../../components/contributor.vue'
 import ApiDocs from '../../components/api-docs.vue'
 import DesignToken from '../../components/design-token.vue'
-import McpDocs from '../../components/mcp-docs.vue'
 import useTasksFinish from '../../composable/useTasksFinish'
 import list from '@opentiny/vue-theme/token'
 import { isSaas } from '../../const'
-import { getTinyVueMcpConfig } from '@opentiny/tiny-vue-mcp'
-import { camelize, capitalize } from '@vue/shared'
 
 const props = defineProps({ loadData: {}, appMode: {}, demoKey: {} })
 
@@ -476,25 +470,6 @@ const handleAnchorClick = (e, data) => {
   }
 }
 
-// MCP tab页签的数据
-const mcpTools = getTinyVueMcpConfig({ t: null })
-const capName = computed(() => capitalize(camelize(state.cmpId || '')))
-
-const mcpInfo = computed(() => {
-  const schema = mcpTools.components[capName.value]?.paramsSchema
-  if (schema) {
-    return Object.keys(schema).map((name) => {
-      const item = schema[name]
-      return {
-        name,
-        param: item._def?.innerType?._def?.typeName || '',
-        desc: item._def?.description || ''
-      }
-    })
-  }
-  return []
-})
-
 defineExpose({ loadPage })
 </script>
 

package/src/views/components-doc/mobile.vue

@@ -11,7 +11,7 @@
         <!-- 移动端展示内容 -->
         <div class="phone-container">
           <div class="mobile-iframe-container">
-            <iframe ref="iframeRef" width="100%" height="100%" :src="iframeUrl" frameborder="0"></iframe>
+            <iframe id="iframeDom" ref="iframeRef" width="100%" height="100%" :src="iframeUrl" frameborder="0"></iframe>
           </div>
         </div>
       </div>
@@ -20,7 +20,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onBeforeUnmount } from 'vue'
 import { router } from '@/router.js'
 import { fetchDemosFile } from '@/tools'
 import ComponentDocs from './common.vue'
@@ -60,6 +60,53 @@ const pageInit = (demo) => {
   const { cmpId } = router.currentRoute.value.params
   iframeUrl.value = `${mobilePreview}?component=${cmpId}&demo=${demo.codeFiles[0]}`
 }
+
+let observer = new MutationObserver(() => {
+  const isDarkMode = document.documentElement.classList.contains('dark')
+  if (isDarkMode) {
+    onIframeLoad()
+  } else {
+    try {
+      const iframeDocument = iframeRef.value.contentDocument || iframeRef.value.contentWindow.document
+      iframeDocument.documentElement.classList.remove('dark')
+      const linkElement = iframeDocument.getElementById('theme-style-link')
+      if (linkElement) {
+        linkElement.remove()
+      }
+    } catch (error) {
+      console.error('无法访问 iframe:', error)
+    }
+  }
+})
+
+observer.observe(document.documentElement, {
+  attributes: true,
+  attributeFilter: ['class']
+})
+
+const onIframeLoad = () => {
+  try {
+    const iframeDocument = iframeRef.value.contentDocument || iframeRef.value.contentWindow.document
+    const htmlElement = iframeDocument.documentElement
+
+    // 添加 dark 类
+    htmlElement.classList.add('dark')
+
+    const link = iframeDocument.createElement('link')
+    link.rel = 'stylesheet'
+    link.href = '/public/static/css/mobile-dark-theme.css'
+    link.id = 'theme-style-link'
+
+    iframeDocument.head.appendChild(link)
+  } catch (error) {
+    console.error('无法访问 iframe:', error)
+  }
+}
+
+onBeforeUnmount(() => {
+  observer?.disconnect()
+  observer = null
+})
 </script>
 
 <style scoped lang="less">

package/vite.config.ts

@@ -13,7 +13,7 @@ import vue3SvgPlugin from 'vite-svg-loader'
 import { getAlias, pathFromWorkspaceRoot, getOptimizeDeps } from '../../internals/cli/src/config/vite'
 import virtualTemplatePlugin from '@opentiny-internal/unplugin-virtual-template/vite'
 import { visualizer } from 'rollup-plugin-visualizer'
-import { delStaticPlugin, viteDocsearchPlugin, modifyViteConfig } from './vite.extend.ts'
+import { delStaticPlugin, viteDocsearchPlugin, modifyViteConfig, fixIconSrcPlugins } from './vite.extend.ts'
 
 export default defineConfig((config) => {
   const env = loadEnv(config.mode, process.cwd() + '/env', '')
@@ -35,6 +35,7 @@ export default defineConfig((config) => {
     envDir: './env',
     base: env.VITE_APP_BUILD_BASE_URL || '/tiny-vue/',
     plugins: [
+      ...fixIconSrcPlugins(),
       virtualTemplatePlugin({ include: ['**/packages/vue/**/src/index.ts'], env }),
       vue({
         include: [/\.vue$/, /\.md$/]
@@ -131,7 +132,7 @@ export default defineConfig((config) => {
     viteConfig.define['process.env'] = {}
   }
 
-  const newViteConfig = modifyViteConfig(viteConfig, env, { plugins: { viteStaticCopy } })
+  const newViteConfig = modifyViteConfig(viteConfig, env)
 
   newViteConfig.plugins.push(
     viteStaticCopy({

package/vite.extend.ts

@@ -46,6 +46,70 @@ export const viteDocsearchPlugin = (env) => {
   }
 }
 
+// 修复 @opentiny/vue-icon 和 @opentiny/vue-icon-saas 的解析问题
+// 确保图标包指向 index.ts 而不是 src 目录
+// 根据 package.json 的 exports 配置，"./*": "./src/*" 会将某些导入解析为目录
+// 这个插件拦截该导入并重定向到 index.ts
+const createFixIconSrcPlugin = (packageName, packagePath, pluginName) => {
+  const currentFileUrl = import.meta.url
+  const currentDir = path.dirname(new URL(currentFileUrl).pathname)
+  const normalizedDir = process.platform === 'win32' ? currentDir.replace(/^\//, '') : currentDir
+  const workspaceRoot = path.resolve(normalizedDir, '../..')
+  const iconSrcPath = path.resolve(workspaceRoot, packagePath, 'src')
+  const iconIndexPath = path.resolve(workspaceRoot, packagePath, 'index.ts')
+
+  return {
+    name: pluginName,
+    enforce: 'pre',
+    resolveId(id) {
+      // 拦截对包名的导入（不带子路径），确保指向 index.ts
+      if (id === packageName) {
+        return iconIndexPath
+      }
+      // 拦截对 @opentiny/vue-icon-saas/src 的导入（模块路径）
+      if (id === `${packageName}/src`) {
+        return iconIndexPath
+      }
+      // 拦截文件系统路径中的图标包/src 目录访问
+      const normalizedId = id.replace(/\\/g, '/')
+      const normalizedSrcPath = iconSrcPath.replace(/\\/g, '/')
+      if (normalizedId === normalizedSrcPath) {
+        return iconIndexPath
+      }
+      return null
+    },
+    load(id) {
+      // 如果请求的是图标包/src 目录，返回 index.ts 的内容
+      const normalizedId = id.replace(/\\/g, '/')
+      const normalizedSrcPath = iconSrcPath.replace(/\\/g, '/')
+      if (normalizedId === normalizedSrcPath) {
+        if (fs.existsSync(iconIndexPath)) {
+          return fs.readFileSync(iconIndexPath, 'utf-8')
+        }
+      }
+      return null
+    }
+  }
+}
+
+// 修复 @opentiny/vue-icon 和 @opentiny/vue-icon-saas 的解析问题
+// 返回包含两个插件的数组，方便在 vite.config.ts 中使用
+export const fixIconSrcPlugins = () => {
+  return [
+    createFixIconSrcPlugin('@opentiny/vue-icon', 'packages/vue-icon', 'fix-icon-src-plugin'),
+    createFixIconSrcPlugin('@opentiny/vue-icon-saas', 'packages/vue-icon-saas', 'fix-icon-saas-src-plugin')
+  ]
+}
+
+// 保持向后兼容，单独导出（如果需要单独使用）
+export const fixIconSrcPlugin = () => {
+  return createFixIconSrcPlugin('@opentiny/vue-icon', 'packages/vue-icon', 'fix-icon-src-plugin')
+}
+
+export const fixIconSaasSrcPlugin = () => {
+  return createFixIconSrcPlugin('@opentiny/vue-icon-saas', 'packages/vue-icon-saas', 'fix-icon-saas-src-plugin')
+}
+
 // 针对不同主题对配置进行响应修改
 const themeModifyMap = {
   saas(viteConfig) {
@@ -66,6 +130,7 @@ const themeModifyMap = {
     if (!viteConfig.resolve.alias['@opentiny/vue-theme']) {
       viteConfig.resolve.alias['@opentiny/vue-theme'] = '@opentiny/vue-theme-saas'
       viteConfig.resolve.alias['@opentiny/vue-icon'] = '@opentiny/vue-icon-saas'
+      viteConfig.resolve.alias['@opentiny/vue-search-box'] = '@opentiny/vue-search-box-saas'
     }
     return viteConfig
   }

package/demos/pc/app/grid/webdoc/grid-ai-agent.js

@@ -1,23 +0,0 @@
-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': [] }]
-}

package/demos/pc/webdoc/mcp-en.md

@@ -1,101 +0,0 @@
-# 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