@opentiny/vue-docs 3.23.0 → 3.24.0

package/src/composable/utils.ts

@@ -0,0 +1,172 @@
+/**
+ * 工具函数模块
+ * 提供一些实用的辅助函数
+ */
+
+import type { ChatMessage, ChatCompletionResponse, StreamHandler } from '@opentiny/tiny-robot-kit'
+import type { ChatCompletionRequest } from '@opentiny/tiny-robot-kit'
+import { ref, type Ref } from 'vue'
+
+export { $local } from './storage'
+
+export const showTinyRobot = ref(true)
+
+export const globalConversation = {
+  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 || ''
+}

package/src/i18n/index.js

@@ -1,10 +1,11 @@
 import { createI18n } from 'vue-i18n'
-import { initI18n } from '@opentiny/vue-locale'
+import { initI18n, t } from '@opentiny/vue-locale'
 import { $local } from '../tools'
 import zh from './zh.json'
 import en from './en.json'
+import { zhCN, enUS } from '@opentiny/tiny-vue-mcp'
 
-const messages = { enUS: en, zhCN: zh }
+const messages = { enUS: { ...en, ...enUS }, zhCN: { ...zh, ...zhCN } }
 // $local._lang = $local._lang !== 'zhCN' && $local._lang !== 'enUS' ? 'zhCN' : $local._lang
 $local._lang = 'zhCN'
 const customCreateI18n = ({ locale, messages }) =>
@@ -26,3 +27,5 @@ const i18nByKey = i18n.global.t
 const getWord = (cn, en) => (i18n.global.locale === 'zhCN' ? cn : en)
 
 export { i18n, i18nByKey, getWord }
+
+export { t }

package/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'
@@ -16,7 +19,7 @@ import './assets/custom-markdown.css'
 import './assets/custom-block.less'
 import './assets/md-preview.less'
 
-import { i18n } from './i18n/index'
+import { i18n, t } from './i18n/index'
 import { router } from './router'
 import App from './App.vue'
 import { appData } from './tools'
@@ -33,6 +36,12 @@ import '@docsearch/css'
 import { doSearchEverySite } from './tools/docsearch'
 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)
+
 const envTarget = import.meta.env.VITE_BUILD_TARGET || 'open'
 
 hljs.registerLanguage('javascript', javascript)

package/src/router.js

@@ -1,11 +1,13 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Layout from '@/views/layout/layout.vue'
 import { LANG_PATH_MAP, ZH_CN_LANG, DEFAULT_THEME } from './const'
+import { appData } from './tools/appData.js'
 
 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 context = import.meta.env.VITE_CONTEXT
 
@@ -17,6 +19,11 @@ let routes = [
     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?/:lang/:theme/docs/:docId`,
@@ -57,5 +64,7 @@ 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 }

package/src/tools/appData.js

@@ -1,4 +1,4 @@
-import { reactive, computed } from 'vue'
+import { reactive, computed, watch } from 'vue'
 import { useAutoStore } from './storage'
 import { useMediaQuery } from './useMediaQuery'
 import { ZH_CN_LANG, EN_US_LANG, LANG_KEY, LANG_PATH_MAP } from '../const'
@@ -8,7 +8,9 @@ const enPath = LANG_PATH_MAP[EN_US_LANG]
 const appData = reactive({
   lang: useAutoStore('local', LANG_KEY, ZH_CN_LANG),
   theme: useAutoStore('local', '_theme', 'light'),
-  bpState: useMediaQuery([640, 1024, 1280]).matches // 3点4区间， bp0,bp1,bp2,bp3
+  bpState: useMediaQuery([640, 1024, 1280]).matches, // 3点4区间， bp0,bp1,bp2,bp3
+  showTinyRobot: false,
+  hasFloatRobot: false
 })
 const isZhCn = computed(() => appData.lang === ZH_CN_LANG)
 const appFn = {
@@ -27,4 +29,12 @@ const appFn = {
 }
 // 为了和tiny-vue共享同一个响应变量
 window.appData = appData
+
+watch(
+  () => appData.showTinyRobot,
+  (value) => {
+    document.body.classList.toggle('docs-on-robot-show', value)
+  }
+)
+
 export { appData, appFn, isZhCn }

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

@@ -62,7 +62,11 @@
                 @jump-to-demo="jumpToDemo"
               ></api-docs>
             </tiny-tab-item>
+            <tiny-tab-item v-if="appData.hasFloatRobot" title="MCP" name="MCP">
+              <McpDocs :name="state.cmpId" />
+            </tiny-tab-item>
           </tiny-tabs>
+
           <slot name="main-right" />
         </div>
 
@@ -84,6 +88,7 @@
     </div>
     <div id="footer"></div>
   </div>
+  <robotChat v-if="appData.showTinyRobot && appData.hasFloatRobot"></robotChat>
 </template>
 
 <script setup lang="ts">
@@ -94,12 +99,16 @@ import { debounce } from '@opentiny/utils'
 import { i18nByKey, getWord, $clone, useApiMode } from '@/tools'
 import { router } from '@/router.js'
 import { getWebdocPath } from './cmp-config'
-import DemoBox from './components/demo.vue'
-import AsideAnchor from './components/anchor.vue'
-import ComponentHeader from './components/header.vue'
-import ComponentContributor from './components/contributor.vue'
-import ApiDocs from './components/api-docs.vue'
-import useTasksFinish from './composition/useTasksFinish'
+import DemoBox from '../../components/demo.vue'
+import AsideAnchor from '../../components/anchor.vue'
+import ComponentHeader from '../../components/header.vue'
+import ComponentContributor from '../../components/contributor.vue'
+import ApiDocs from '../../components/api-docs.vue'
+import McpDocs from '../../components/mcp-docs.vue'
+import useTasksFinish from '../../composable/useTasksFinish'
+import { appData } from '../../tools/appData'
+
+import robotChat from '../../components/tiny-robot-chat.vue'
 
 const props = defineProps({ loadData: {}, appMode: {}, demoKey: {} })
 
@@ -166,8 +175,10 @@ watch(
 onMounted(() => {
   loadPage()
   // 加载公共尾部
-  const common = new window.TDCommon(['#footer'], { allowDarkTheme: true })
-  common.renderFooter()
+  nextTick(() => {
+    const common = new window.TDCommon(['#footer'], { allowDarkTheme: true })
+    common.renderFooter()
+  })
   setScrollListener()
 })
 
@@ -438,6 +449,9 @@ defineExpose({ loadPage })
 </script>
 
 <style lang="less" scoped>
+:global(.docs-on-robot-show .docs-content) {
+  margin-right: 480px;
+}
 .docs-content {
   flex: 1;
   overflow: hidden auto;

package/src/views/comprehensive/Demo.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="products-page">
+    <div class="page-header">
+      <h3>商品管理</h3>
+    </div>
+    <div class="page-content">
+      <div class="button-box">
+        <tiny-button type="info" @click="addProductToEdit"> 添加商品 </tiny-button>
+        <tiny-button type="danger" @click="removeProduct"> 删除商品 </tiny-button>
+        <tiny-button type="success" @click="saveProduct"> 保存 </tiny-button>
+      </div>
+      <tiny-grid
+        auto-resize
+        ref="gridRef"
+        :data="products"
+        :height="500"
+        :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+        :tiny_mcp_config="{
+          server,
+          business: {
+            id: 'product-list',
+            description: '商品列表'
+          }
+        }"
+      >
+        <tiny-grid-column type="index" width="50" />
+        <tiny-grid-column type="selection" width="50" />
+        <tiny-grid-column title="商品图片" width="100">
+          <template #default="{ row }">
+            <tiny-image :src="row.image" :preview-src-list="[row.image]" class="product-image" />
+          </template>
+        </tiny-grid-column>
+
+        <tiny-grid-column field="name" title="商品名称" :editor="{ component: 'input' }" />
+        <tiny-grid-column
+          field="price"
+          :editor="{
+            component: 'input',
+            attrs: { type: 'number' }
+          }"
+          title="价格"
+        >
+          <template #default="{ row }"> ¥{{ row.price }} </template>
+        </tiny-grid-column>
+        <tiny-grid-column
+          field="stock"
+          :editor="{
+            component: 'input',
+            attrs: { type: 'number' }
+          }"
+          title="库存"
+        />
+        <tiny-grid-column
+          field="category"
+          :editor="{
+            component: 'select',
+            options: [
+              { label: '手机', value: 'phones' },
+              { label: '笔记本', value: 'laptops' },
+              { label: '平板', value: 'tablets' }
+            ]
+          }"
+          title="分类"
+        >
+          <template #default="{ row }">
+            {{ categoryLabels[row.category] }}
+          </template>
+        </tiny-grid-column>
+        <tiny-grid-column
+          field="status"
+          :editor="{
+            component: 'select',
+            options: [
+              { label: '上架', value: 'on' },
+              { label: '下架', value: 'off' }
+            ]
+          }"
+          title="状态"
+        >
+          <template #default="{ row }">
+            <tiny-tag :type="row.status === 'on' ? 'success' : 'warning'">
+              {{ row.status === 'on' ? '上架' : '下架' }}
+            </tiny-tag>
+          </template>
+        </tiny-grid-column>
+      </tiny-grid>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import productsData from './products.json'
+import { $local } from '../../composable/utils'
+import { useNextServer } from '@opentiny/next-vue'
+import { TinyGrid, TinyGridColumn, TinyButton, TinyTag, TinyModal, TinyImage } from '@opentiny/vue'
+
+if (!$local.products) {
+  $local.products = productsData
+}
+
+const products = ref($local.products)
+const gridRef = ref(null)
+
+const categoryLabels: Record<string, string> = {
+  phones: '手机',
+  laptops: '笔记本',
+  tablets: '平板'
+}
+
+// 新增商品到编辑弹窗
+const addProductToEdit = async () => {
+  gridRef?.value?.insert({
+    'image': 'https://img1.baidu.com/it/u=1559062020,1043707656&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
+    price: 10000,
+    stock: 100,
+    category: 'phones',
+    status: 'on'
+  })
+}
+
+const removeProduct = () => {
+  const selectedRows = gridRef?.value?.getSelectRecords()
+  if (selectedRows.length === 0) {
+    TinyModal.confirm({
+      message: '请选择要删除的商品',
+      title: '删除商品',
+      status: 'warning'
+    })
+    return
+  }
+  if (selectedRows.length > 0) {
+    gridRef?.value?.removeSelecteds()
+  }
+}
+
+const saveProduct = () => {
+  setTimeout(() => {
+    const data = gridRef?.value?.getTableData()
+    $local.products = data.tableData
+    TinyModal.message({
+      message: '保存成功',
+      status: 'success'
+    })
+  }, 1000)
+}
+
+const { server } = useNextServer({
+  serverInfo: { name: 'commodity-config', version: '1.0.0' }
+})
+</script>
+
+<style scoped lang="less">
+.products-page {
+  .page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding: 16px 20px;
+    background-color: #ffffff;
+    border-radius: 8px;
+    position: relative;
+    border: 1px solid #edf2f7;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 4px;
+      height: 24px;
+      background: #1677ff;
+      border-radius: 2px;
+      transform: translateY(-50%);
+    }
+
+    h3 {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 600;
+      color: #1f2937;
+      position: relative;
+      padding-left: 20px;
+      letter-spacing: 0.3px;
+    }
+  }
+}
+
+.button-box {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 20px;
+  justify-content: flex-end;
+}
+.loading-state {
+  padding: 20px;
+}
+
+.product-image {
+  width: 40px;
+  height: 40px;
+  border-radius: 4px;
+}
+.page-content {
+  padding: 20px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
+}
+</style>