@opentiny/vue-docs 3.24.6 → 3.26.0

package/src/composable/useTinyRemoter.ts

@@ -0,0 +1,176 @@
+import { WebMcpServer, WebMcpClient, createMessageChannelPairTransport, z } from '@opentiny/next-sdk'
+import { genMenus } from '../menus'
+import { useRouter } from 'vue-router'
+import { ref } from 'vue'
+
+export const AGENT_ROOT = 'https://agent.opentiny.design/api/v1/webmcp-trial/'
+
+// 调用 useTinyRemoter() 完毕后，下面三个变量变会有值。
+export const webMcpServer: { value: null | WebMcpServer } = { value: null }
+export const webMcpClient: { value: null | WebMcpClient } = { value: null }
+export const webMcpSessionId: { value: null | string } = ref('')
+
+export async function useTinyRemoter() {
+  const [serverTransport, clientTransport] = createMessageChannelPairTransport()
+
+  // 定义 MCP Server
+  const server = new WebMcpServer(
+    { name: 'base-config', version: '1.0.0' },
+    {
+      capabilities: {
+        prompts: { listChanged: true },
+        resources: { subscribe: true, listChanged: true },
+        tools: { listChanged: true },
+        completions: {},
+        logging: {}
+      }
+    }
+  )
+  webMcpServer.value = server
+  createGlobalMcpTool(server)
+
+  serverTransport.onerror = (error) => {
+    console.error(`ServerTransport error:`, error)
+  }
+  await server.connect(serverTransport)
+
+  // 定义 MCP Client
+  const client = new WebMcpClient(
+    { name: 'mcp-web-client', version: '1.0.0' },
+    { capabilities: { roots: { listChanged: true }, sampling: {}, elicitation: {} } }
+  )
+  webMcpClient.value = client
+
+  await client.connect(clientTransport)
+
+  // 不能传入固定的sessionId, 让它每次自动生成一个。
+  const { sessionId } = await client.connect({
+    url: AGENT_ROOT + 'mcp',
+    agent: true,
+    onError: (error: Error) => {
+      console.error('Connect proxy error:', error)
+    }
+  })
+  webMcpSessionId.value = sessionId
+
+  window.addEventListener('pagehide', client.onPagehide)
+}
+
+// 组件页面的右上导航的数据回调函数
+export const cmpAnchorDataCallback = { value: null }
+
+export const createGlobalMcpTool = (server) => {
+  const router = useRouter()
+  server.registerResource(
+    'site-menus',
+    'site-menus://app',
+    {
+      title: 'TinyVue官网的菜单数据',
+      description: 'TinyVue官网的菜单数据，其中"key"为路由路径，"name"为菜单名称，"children"为子菜单',
+      mimeType: 'text/plain'
+    },
+    async (uri) => ({
+      contents: [
+        {
+          uri: uri.href,
+          text: JSON.stringify(genMenus())
+        }
+      ]
+    })
+  )
+  // 帮我查看button组件的API
+  server.registerTool(
+    'swtich-router',
+    {
+      title: 'router',
+      description: '可以帮用户跳转到文档页面，组件示例的总页面或组件API文档页面，或组件库的概览页面',
+      inputSchema: {
+        key: z.string().describe('跳转页面路径'),
+        type: z
+          .enum(['components', 'docs', 'overview', 'features'])
+          .describe('跳转页面类型，比如：组件的页面，文档的页面，组件的概览页面'),
+        isOpenApi: z.boolean().describe('跳转到组件页面时，是否打开API文档')
+      }
+    },
+    async ({ key, type, isOpenApi }) => {
+      const { params, fullPath } = router.currentRoute.value
+      const { theme } = params
+      const themeIndex = fullPath.indexOf(theme)
+      const linkUrl =
+        fullPath.slice(0, themeIndex) + `${theme}/${type}/${key === 'overview' ? '' : key}${isOpenApi ? '#api' : ''}`
+      router.push(linkUrl)
+      return {
+        content: [
+          {
+            type: 'text',
+            text: `跳转页面成功: ${key}`
+          }
+        ]
+      }
+    }
+  )
+
+  server.registerTool(
+    'get-component-demos',
+    {
+      title: '查询全部示例的信息',
+      description:
+        '查询当前组件的全部示例信息，demos信息。返回值是一个数组，其中每一项的 demoId 属性是示例的键，通过键可以跳转到该示例。desc属性是示例的详细描述。',
+      inputSchema: {}
+    },
+    async () => {
+      // 通知组件页面返回右侧导航的数据
+      if (cmpAnchorDataCallback.value != null) {
+        const links = cmpAnchorDataCallback.value()
+
+        return {
+          content: [{ type: 'text', text: JSON.stringify(links) }]
+        }
+      } else {
+        return {
+          content: [{ type: 'text', text: '找不到示例' }]
+        }
+      }
+    }
+  )
+
+  server.registerTool(
+    'jump-to-demo',
+    {
+      title: '跳转到组件的示例demo',
+      description: '根据参数demoId, 跳转到指定的示例demo。',
+      inputSchema: {
+        demoId: z.string().describe('示例的id,唯一标识。')
+      }
+    },
+    async ({ demoId }) => {
+      // 通知组件页面返回右侧导航的数据
+      location.hash = '#' + demoId
+
+      return {
+        content: [{ type: 'text', text: '跳转示例成功' }]
+      }
+    }
+  )
+
+  // 长任务示例
+  server.registerTool(
+    'long-task',
+    {
+      title: 'long-task',
+      description: '可以帮用户订机票'
+    },
+    async () => {
+      // 执行一个长任务
+      await new Promise((resolve) => setTimeout(resolve, 10000))
+      return {
+        content: [
+          {
+            type: 'text',
+            text: '执行一个长任务，执行完成'
+          }
+        ]
+      }
+    }
+  )
+}

package/src/composable/utils.ts

@@ -3,170 +3,6 @@
  * 提供一些实用的辅助函数
  */
 
-import type { ChatMessage, ChatCompletionResponse, StreamHandler } from '@opentiny/tiny-robot-kit'
-import type { ChatCompletionRequest } from '@opentiny/tiny-robot-kit'
-import { ref, reactive, type Ref } from 'vue'
+import { $local, $session } from './storage'
 
-export { $local, $session } from './storage'
-
-export const showTinyRobot = ref(true)
-
-export const globalConversation = reactive({
-  id: '',
-  sessionId: ''
-})
-/**
- * 处理SSE流式响应
- * @param response fetch响应对象
- * @param handler 流处理器
- */
-export async function handleSSEStream(
-  response: Response,
-  handler: StreamHandler,
-  message: Ref<ChatCompletionRequest['messages']>,
-  signal?: AbortSignal
-): Promise<void> {
-  // 获取ReadableStream
-  const reader = response.body?.getReader()
-  if (!reader) {
-    throw new Error('Response body is null')
-  }
-
-  // 处理流式数据
-  const decoder = new TextDecoder()
-  let buffer = ''
-
-  if (signal) {
-    signal.addEventListener(
-      'abort',
-      () => {
-        reader.cancel().catch((err) => console.error('Error cancelling reader:', err))
-      },
-      { once: true }
-    )
-  }
-
-  let messageIndex = 0
-  function printMessage(data, str: string, endln = false) {
-    handler.onData({
-      id: '',
-      created: data.created_at,
-      choices: [
-        {
-          index: messageIndex++,
-          delta: {
-            role: 'assistant',
-            content: str + (endln ? '\n\n' : '')
-          },
-          finish_reason: null
-        }
-      ],
-      object: '',
-      model: ''
-    })
-  }
-  try {
-    while (true) {
-      if (signal?.aborted) {
-        await reader.cancel()
-        break
-      }
-
-      const { done, value } = await reader.read()
-      if (done) break
-
-      // 解码二进制数据
-      const chunk = decoder.decode(value, { stream: true })
-      buffer += chunk
-
-      // 处理完整的SSE消息
-      const lines = buffer.split('\n\n')
-      buffer = lines.pop() || ''
-
-      for (const line of lines) {
-        if (line.trim() === '') continue
-        if (line.trim() === 'data: [DONE]') {
-          handler.onDone()
-          continue
-        }
-
-        try {
-          // 解析SSE消息
-          const dataMatch = line.match(/^data: (.+)$/m)
-          if (!dataMatch) continue
-
-          const data = JSON.parse(dataMatch[1])
-          // console.log('SSE data:', data)
-          if (data?.event === 'node_started') {
-            printMessage(data, `${data.data.title} 节点运行...`, true)
-          }
-          if (data?.event === 'node_finished') {
-            printMessage(
-              data,
-              `${data.data.title} 节点结束\n\n` +
-                (data.data.node_type === 'answer' ? `${data.data.outputs.answer}` : '')
-            )
-          }
-          if (data?.event === 'agent_log' && data.data.status === 'success' && data.data.label.startsWith('CALL')) {
-            printMessage(data, `--${data.data.label}(${JSON.stringify(data.data.data.output.tool_call_input)})`, true)
-          }
-        } catch (error) {
-          console.error('Error parsing SSE message:', error)
-        }
-      }
-    }
-
-    if (buffer.trim() === 'data: [DONE]' || signal?.aborted) {
-      handler.onDone()
-    }
-  } catch (error) {
-    if (signal?.aborted) return
-    throw error
-  }
-}
-
-/**
- * 格式化消息
- * 将各种格式的消息转换为标准的ChatMessage格式
- * @param messages 消息数组
- * @returns 标准格式的消息数组
- */
-export function formatMessages(messages: Array<ChatMessage | string>): ChatMessage[] {
-  return messages.map((msg) => {
-    // 如果已经是标准格式，直接返回
-    if (typeof msg === 'object' && 'role' in msg && 'content' in msg) {
-      return {
-        role: msg.role,
-        content: String(msg.content),
-        ...(msg.name ? { name: msg.name } : {})
-      }
-    }
-
-    // 如果是字符串，默认为用户消息
-    if (typeof msg === 'string') {
-      return {
-        role: 'user',
-        content: msg
-      }
-    }
-
-    // 其他情况，尝试转换为字符串
-    return {
-      role: 'user',
-      content: String(msg)
-    }
-  })
-}
-
-/**
- * 从响应中提取文本内容
- * @param response 聊天完成响应
- * @returns 文本内容
- */
-export function extractTextFromResponse(response: ChatCompletionResponse): string {
-  if (!response.choices || !response.choices.length) {
-    return ''
-  }
-
-  return response.choices[0].message?.content || ''
-}
+export { $local, $session }

package/src/const.ts

@@ -5,10 +5,15 @@ export const LANG_KEY = '_lang'
 // localStorage中保存语言的value
 export const ZH_CN_LANG = 'zhCN'
 export const EN_US_LANG = 'enUS'
+export const ES_LA_LANG = 'esLA'
+export const PT_BR_LANG = 'ptBR'
+
 // 语言key值对应的路由
 export const LANG_PATH_MAP = {
   [ZH_CN_LANG]: 'zh-CN',
-  [EN_US_LANG]: 'en-US'
+  [EN_US_LANG]: 'en-US',
+  [ES_LA_LANG]: 'es-LA',
+  [PT_BR_LANG]: 'pt-BR'
 }
 
 export const CURRENT_THEME_KEY = 'tiny-current-theme'

package/src/i18n/en.json

@@ -1,6 +1,8 @@
 {
   "zh-cn": "Chinese",
   "en-us": "English",
+  "es-la": "Spanish",
+  "pt-br": "Portuguese",
   "localeType": "Language Selection",
   "dark": "Dark",
   "light": "Light",

package/src/i18n/es.json

@@ -0,0 +1,47 @@
+{
+  "zh-cn": "Chinese",
+  "en-us": "English",
+  "es-la": "Spanish",
+  "pt-br": "Portuguese",
+  "localeType": "Language Selection",
+  "dark": "Dark",
+  "light": "Light",
+  "searchPlaceholder": "Search",
+  "home": "Home",
+  "doc": "Docs",
+  "component": "Components",
+  "common": "Common",
+  "apiPreference": "Framework",
+  "apiTiny": "Vue",
+  "yan-shi": "Demo",
+  "demos": "Demos",
+  "api": "API",
+  "name": "Name",
+  "propType": "Type",
+  "defValue": "Default",
+  "typeValue": "Option Value",
+  "desc": "Description",
+  "showCode": "Show Code",
+  "hideCode": "Hide Code",
+  "copyCode": "Copy Code",
+  "doc-owner": "Owner",
+  "copyCodeOk": "Copy Success",
+  "frameAngular": "Angular",
+  "playground": "Open Playground",
+  "changeLanguage": "Change Language",
+  "changeTheme": "Change Components Theme",
+  "changeApiType": "Change Api Type",
+  "backTop": "Back To Top",
+  "overview": "Components Overview",
+  "overviewDesc": "TinyVue provides a wealth of basic UI components for web applications, and we will continue to explore the best UI practices for enterprise-level applications. Welcome to try TinyVue.",
+  "overviewDescPlus": "TinyVuePlus is a component library for Cloud business scenarios based on TinyVue, following the new design specifications of Cloud CloudDesign and utilizing Vite+Vue3+TypeScript technology stack.",
+  "searchComponents": "search components",
+  "apiType": "Components demos code style",
+  "apiStyleOptions": "Options",
+  "apiStyleComposition": "Composition",
+  "demoMode": "Demo display mode",
+  "demoModeSingle": "Single",
+  "demoModeMultiple": "Multiple",
+  "contributor": "Contributors",
+  "noData": "No Data"
+}

package/src/i18n/index.js

@@ -3,11 +3,21 @@ import { initI18n, t } from '@opentiny/vue-locale'
 import { $local } from '../tools'
 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 } }
-// $local._lang = $local._lang !== 'zhCN' && $local._lang !== 'enUS' ? 'zhCN' : $local._lang
-$local._lang = 'zhCN'
+const messages = { enUS: { ...en, ...enUS }, zhCN: { ...zh, ...zhCN }, esLA: { ...esLA }, ptBR: { ...ptBR } }
+
+const langMap = new Map([
+  ['zhCN', 'zhCN'],
+  ['enUS', 'enUS'],
+  ['esLA', 'esLA'],
+  ['ptBR', 'ptBR']
+])
+
+$local._lang = langMap.get($local._lang) || 'zhCN'
+
 const customCreateI18n = ({ locale, messages }) =>
   createI18n({
     locale, // set locale
@@ -15,7 +25,6 @@ const customCreateI18n = ({ locale, messages }) =>
     fallbackLocale: 'zhCN', // set fallback locale
     messages // set locale messages
   })
-
 const i18n = initI18n({
   createI18n: customCreateI18n,
   i18n: {
@@ -24,7 +33,17 @@ const i18n = initI18n({
   messages
 })
 const i18nByKey = i18n.global.t
-const getWord = (cn, en) => (i18n.global.locale === 'zhCN' ? cn : en)
+const getWord = (cn, en, es, pt) => {
+  const localeMap = new Map([
+    ['zhCN', cn], // 简体中文
+    ['enUS', en], // 英语
+    ['esLA', es], // 西班牙语
+    ['ptBR', pt] // 葡萄牙语
+  ])
+  const currentLocale = i18n.global.locale
+
+  return localeMap.get(currentLocale) ?? cn
+}
 
 export { i18n, i18nByKey, getWord }
 

package/src/i18n/pt.json

@@ -0,0 +1,47 @@
+{
+  "zh-cn": "Chinese",
+  "en-us": "English",
+  "es-la": "Spanish",
+  "pt-br": "Portuguese",
+  "localeType": "Language Selection",
+  "dark": "Dark",
+  "light": "Light",
+  "searchPlaceholder": "Search",
+  "home": "Home",
+  "doc": "Docs",
+  "component": "Components",
+  "common": "Common",
+  "apiPreference": "Framework",
+  "apiTiny": "Vue",
+  "yan-shi": "Demo",
+  "demos": "Demos",
+  "api": "API",
+  "name": "Name",
+  "propType": "Type",
+  "defValue": "Default",
+  "typeValue": "Option Value",
+  "desc": "Description",
+  "showCode": "Show Code",
+  "hideCode": "Hide Code",
+  "copyCode": "Copy Code",
+  "doc-owner": "Owner",
+  "copyCodeOk": "Copy Success",
+  "frameAngular": "Angular",
+  "playground": "Open Playground",
+  "changeLanguage": "Change Language",
+  "changeTheme": "Change Components Theme",
+  "changeApiType": "Change Api Type",
+  "backTop": "Back To Top",
+  "overview": "Components Overview",
+  "overviewDesc": "TinyVue provides a wealth of basic UI components for web applications, and we will continue to explore the best UI practices for enterprise-level applications. Welcome to try TinyVue.",
+  "overviewDescPlus": "TinyVuePlus is a component library for Cloud business scenarios based on TinyVue, following the new design specifications of Cloud CloudDesign and utilizing Vite+Vue3+TypeScript technology stack.",
+  "searchComponents": "search components",
+  "apiType": "Components demos code style",
+  "apiStyleOptions": "Options",
+  "apiStyleComposition": "Composition",
+  "demoMode": "Demo display mode",
+  "demoModeSingle": "Single",
+  "demoModeMultiple": "Multiple",
+  "contributor": "Contributors",
+  "noData": "No Data"
+}

package/src/i18n/zh.json

@@ -1,6 +1,8 @@
 {
   "zh-cn": "中文",
   "en-us": "英文",
+  "es-la": "西班牙语",
+  "pt-br": "葡萄牙语",
   "localeType": "语言选择",
   "dark": "深色",
   "light": "浅色",

package/src/main.js

@@ -2,9 +2,6 @@ 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'
@@ -19,11 +16,11 @@ import './assets/custom-markdown.css'
 import './assets/custom-block.less'
 import './assets/md-preview.less'
 
-import { i18n, t } from './i18n/index'
+import { i18n } from './i18n/index'
 import { router } from './router'
 import App from './App.vue'
 import { appData } from './tools'
-import { ZH_CN_LANG, EN_US_LANG, LANG_PATH_MAP } from './const'
+import { ZH_CN_LANG, EN_US_LANG, LANG_PATH_MAP, ES_LA_LANG, PT_BR_LANG } from './const'
 import demoConfig from '@demos/config.js'
 
 import hljs from 'highlight.js/lib/core'
@@ -34,13 +31,11 @@ import tsPath from 'highlight.js/lib/languages/typescript'
 import docsearch from '@docsearch/js'
 import '@docsearch/css'
 import { doSearchEverySite } from './tools/docsearch'
+import { getLocaleMode } from './tools/utils.js'
 import '@opentiny/vue-theme/dark-theme-index.css'
-
-import { registerMcpConfig } from '@opentiny/vue-common'
 import { createMcpTools, getTinyVueMcpConfig } from '@opentiny/tiny-vue-mcp'
-
-// 注册TinyVue组件mcp配置
-registerMcpConfig(getTinyVueMcpConfig({ t }), createMcpTools)
+import { t } from '@opentiny/vue-locale'
+import { registerMcpConfig } from '@opentiny/vue-common'
 
 const envTarget = import.meta.env.VITE_BUILD_TARGET || 'open'
 
@@ -74,12 +69,19 @@ setTimeout(() => {
 
 const zhPath = LANG_PATH_MAP[ZH_CN_LANG]
 const enPath = LANG_PATH_MAP[EN_US_LANG]
+const esPath = LANG_PATH_MAP[ES_LA_LANG]
+const ptPath = LANG_PATH_MAP[PT_BR_LANG]
 const isZhCn = location.href.includes(`/${zhPath}`)
 const isEnUs = location.href.includes(`/${enPath}`)
-const notMatchLang = (isZhCn && appData.lang !== ZH_CN_LANG) || (isEnUs && appData.lang !== EN_US_LANG)
+const isEsLa = location.href.includes(`/${esPath}`)
+const isPtBr = location.href.includes(`/${ptPath}`)
+const notMatchLang =
+  (isZhCn && appData.lang !== ZH_CN_LANG) ||
+  (isEnUs && appData.lang !== EN_US_LANG) ||
+  (isEsLa && appData.lang !== ES_LA_LANG) ||
+  (isPtBr && appData.lang !== PT_BR_LANG)
 if (notMatchLang) {
-  // appData.lang = isEnUs ? EN_US_LANG : ZH_CN_LANG 官网先屏蔽英文内容
-  appData.lang = isEnUs ? ZH_CN_LANG : ZH_CN_LANG
+  appData.lang = getLocaleMode()
   i18n.global.locale = appData.lang
 }
 
@@ -91,6 +93,8 @@ app.config.globalProperties.tiny_theme = { value: import.meta.env.VITE_TINY_THEM
 if (import.meta.env.VITE_TINY_THEME === 'saas') {
   import('./tailwind.css')
 }
+// 注册TinyVue组件mcp配置
+registerMcpConfig(getTinyVueMcpConfig({ t }), createMcpTools)
 
 app.use(router).use(i18n).use(createHead()) // 支持md修改title
 

package/src/{menus.jsx → menus.js}

@@ -50,7 +50,6 @@ function genMenus() {
       type: 'components'
     }))
   }))
-
   return [...standaloneOptions, ...docOptions, ...cmpOptions]
 }
 

package/src/router.js

@@ -7,29 +7,16 @@ 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 Remoter = () => import('@/views/remoter/index.vue')
 
 const context = import.meta.env.VITE_CONTEXT
-
 let routes = [
   // 组件总览
   {
-    path: `${context}:all?/zh-CN/:theme/overview`,
+    path: `${context}:all?/${LANG_PATH_MAP[appData.lang] || 'zh-CN'}/:theme/overview`,
     component: Layout,
     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?/zh-CN/:theme/remoter`,
-    component: Remoter,
-    name: 'remoter'
-  },
   // 文档
   {
     path: `${context}:all?/:lang/:theme/docs/:docId`,
@@ -39,7 +26,7 @@ let routes = [
   },
   // 组件
   {
-    path: `${context}:all?/zh-CN/:theme/components/:cmpId`,
+    path: `${context}:all?/${LANG_PATH_MAP[appData.lang] || 'zh-CN'}/:theme/components/:cmpId`,
     component: Layout,
     name: 'components',
     children: [{ name: 'Components', path: '', component: Components }]
@@ -55,7 +42,7 @@ let routes = [
   {
     path: '/:pathMatch(.*)*',
     redirect: () => {
-      const langPath = LANG_PATH_MAP[ZH_CN_LANG]
+      const langPath = LANG_PATH_MAP[appData.lang] || LANG_PATH_MAP[ZH_CN_LANG]
       return { path: `${context}${langPath}/${DEFAULT_THEME}/overview` }
     }
   }
@@ -70,7 +57,5 @@ router.afterEach((to, from) => {
   if (to.meta.title) {
     document.title = to.meta.title
   }
-  // tiny-robot 通过路由,确定浮动区，是否显示AI按钮
-  appData.hasFloatRobot = to.path.endsWith('components/grid')
 })
 export { router }