@opentiny/vue-docs 3.23.1 → 3.24.0

package/package.json

@@ -1,18 +1,26 @@
 {
   "name": "@opentiny/vue-docs",
   "type": "module",
-  "version": "3.23.1",
+  "version": "3.24.0",
   "license": "MIT",
   "dependencies": {
     "@docsearch/css": "^3.8.0",
     "@docsearch/js": "^3.8.0",
     "@docsearch/react": "npm:@docsearch/css",
+    "@opentiny/next": "0.1.2",
+    "@opentiny/next-vue": "0.0.1-alpha.1",
+    "@opentiny/tiny-robot": "0.2.1",
+    "@opentiny/tiny-robot-kit": "0.2.1",
+    "@opentiny/tiny-robot-svgs": "0.2.1",
+    "@opentiny/tiny-vue-mcp": "0.0.1-alpha.3",
     "@opentiny/vue-repl": "^1.1.2",
     "@opentiny/vue-vite-import": "~1.2.0",
     "@unocss/reset": "0.38.2",
     "@vue/repl": "^2.5.5",
+    "@vue/shared": "^3.4.31",
     "@vueuse/core": "^12.7.0",
     "@vueuse/head": "0.7.13",
+    "crypto-js": "^4.2.0",
     "github-markdown-css": "~5.1.0",
     "highlight.js": "^11.5.1",
     "marked": "^4.3.0",
@@ -22,24 +30,24 @@
     "vue": "^3.4.31",
     "vue-i18n": "~9.14.3",
     "vue-router": "4.1.5",
-    "@opentiny/utils": "~3.23.0",
-    "@opentiny/vue": "~3.23.0",
-    "@opentiny/vue-common": "~3.23.0",
-    "@opentiny/vue-design-aurora": "~3.23.0",
-    "@opentiny/vue-design-smb": "~3.23.0",
-    "@opentiny/vue-directive": "~3.23.0",
-    "@opentiny/vue-hooks": "~3.23.0",
-    "@opentiny/vue-flowchart": "~3.23.0",
-    "@opentiny/vue-design-saas": "~3.23.0",
-    "@opentiny/vue-icon": "~3.23.0",
-    "@opentiny/vue-icon-multicolor": "~3.23.0",
-    "@opentiny/vue-icon-saas": "~3.23.0",
-    "@opentiny/vue-renderless": "~3.23.0",
-    "@opentiny/vue-huicharts": "~3.23.0",
-    "@opentiny/vue-theme": "~3.23.0",
-    "@opentiny/vue-locale": "~3.23.0",
-    "@opentiny/vue-modal": "~3.23.0",
-    "@opentiny/vue-theme-saas": "~3.23.0"
+    "@opentiny/utils": "~3.24.0",
+    "@opentiny/vue-common": "~3.24.0",
+    "@opentiny/vue": "~3.24.0",
+    "@opentiny/vue-design-saas": "~3.24.0",
+    "@opentiny/vue-design-smb": "~3.24.0",
+    "@opentiny/vue-directive": "~3.24.0",
+    "@opentiny/vue-flowchart": "~3.24.0",
+    "@opentiny/vue-icon": "~3.24.0",
+    "@opentiny/vue-huicharts": "~3.24.0",
+    "@opentiny/vue-hooks": "~3.24.0",
+    "@opentiny/vue-design-aurora": "~3.24.0",
+    "@opentiny/vue-icon-saas": "~3.24.0",
+    "@opentiny/vue-icon-multicolor": "~3.24.0",
+    "@opentiny/vue-locale": "~3.24.0",
+    "@opentiny/vue-theme-saas": "~3.24.0",
+    "@opentiny/vue-renderless": "~3.24.0",
+    "@opentiny/vue-modal": "~3.24.0",
+    "@opentiny/vue-theme": "~3.24.0"
   },
   "devDependencies": {
     "@playwright/test": "~1.49.0",

package/playground/App.vue

@@ -11,7 +11,7 @@ import logoUrl from './assets/opentiny-logo.svg?url'
 import GitHub from './icons/Github.vue'
 import Share from './icons/Share.vue'
 
-const VERSION = 'tiny-vue-version-3.23'
+const VERSION = 'tiny-vue-version-3.24'
 const NOTIFY_KEY = 'tiny-vue-playground-notify'
 const LAYOUT = 'playground-layout'
 const LAYOUT_REVERSE = 'playground-layout-reverse'
@@ -23,7 +23,7 @@ const isMobileFirst = tinyMode === 'mobile-first'
 const isSaas = tinyTheme === 'saas'
 const isPreview = searchObj.get('openMode') === 'preview' // 是否多端弹窗预览
 
-const versions = ['3.23', '3.22', '3.21']
+const versions = ['3.24', '3.23', '3.22']
 const getVersion = () => {
   if (isPreview) {
     return versions[0]

package/src/App.vue

@@ -11,11 +11,13 @@
 </template>
 
 <script>
-import { defineComponent, onMounted, provide, ref } from 'vue'
+import { defineComponent, onMounted, provide, ref, watch } from 'vue'
 import { ConfigProvider, Modal } from '@opentiny/vue'
 import { iconClose } from '@opentiny/vue-icon'
 import { appData } from './tools'
 import useTheme from './tools/useTheme'
+import { useNextClient } from '@opentiny/next-vue'
+import { globalConversation } from './composable/utils'
 
 export default defineComponent({
   name: 'AppVue',
@@ -28,6 +30,21 @@ export default defineComponent({
   setup() {
     const previewUrl = ref(import.meta.env.VITE_PLAYGROUND_URL)
     const modalSHow = ref(false)
+
+    const { sessionId } = useNextClient({
+      clientInfo: { name: 'tiny-vue-website', version: '1.0.0' },
+      proxyOptions: { url: 'https://39.108.160.245/sse', token: '' }
+    })
+
+    watch(
+      () => sessionId.value,
+      (newVal) => {
+        if (newVal) {
+          globalConversation.sessionId = newVal
+        }
+      }
+    )
+
     onMounted(() => {
       // 加载header
       const common = new window.TDCommon(['#header'], {

package/src/{views/components-doc/components → components}/demo.vue

@@ -75,7 +75,7 @@ import { i18nByKey, getWord } from '@/i18n'
 import { $split, fetchDemosFile } from '@/tools'
 import { Tabs as TinyTabs, TabItem as TinyTabItem, Button as TinyButton } from '@opentiny/vue'
 import { AutoTip as vAutoTip } from '@opentiny/vue-directive'
-import { languageMap, vueComponents, getWebdocPath, staticDemoPath } from '../cmp-config'
+import { languageMap, vueComponents, getWebdocPath, staticDemoPath } from '../views/components-doc/cmp-config'
 import { router } from '@/router.js'
 import demoConfig from '@demos/config.js'
 import { useApiMode, useTemplateMode } from '@/tools'

package/src/{views/components-doc/components → components}/float-settings.vue

@@ -59,12 +59,21 @@
         </tiny-radio-group>
       </div>
       <template #reference>
-        <div
-          class="settings-btn style-settings-btn"
-          @click="demoStyleVisible = !demoStyleVisible"
-          @blur="demoStyleVisible = false"
-        >
-          <style-settings-icon class="settings-icon style-settings-icon"></style-settings-icon>
+        <div>
+          <div
+            v-if="appData.hasFloatRobot"
+            class="settings-btn style-settings-btn"
+            @click="appData.showTinyRobot = true"
+          >
+            <IconAi class="settings-icon style-settings-icon"></IconAi>
+          </div>
+          <div
+            class="settings-btn style-settings-btn"
+            @click="demoStyleVisible = !demoStyleVisible"
+            @blur="demoStyleVisible = false"
+          >
+            <style-settings-icon class="settings-icon style-settings-icon"></style-settings-icon>
+          </div>
         </div>
       </template>
     </tiny-popover>
@@ -92,8 +101,10 @@ import { iconUpWard } from '@opentiny/vue-icon'
 import { debounce } from '@opentiny/utils'
 import { i18nByKey, useApiMode, useTemplateMode } from '@/tools'
 import useTheme from '@/tools/useTheme'
+import { appData } from '@/tools/appData.js'
 import { router } from '@/router'
 import useStyleSettings from '@/tools/useStyleSettings'
+import { IconAi } from '@opentiny/tiny-robot-svgs'
 
 // import ThemeSettingsIcon from '@/assets/images/theme-settings.svg'
 import StyleSettingsIcon from '@/assets/images/style-settings.svg'
@@ -106,6 +117,7 @@ export default defineComponent({
     TinyRadioGroup: RadioGroup,
     IconUpWard: iconUpWard(),
     TinyPopover: Popover,
+    IconAi,
     // ThemeSettingsIcon,
     StyleSettingsIcon
   },
@@ -249,13 +261,18 @@ export default defineComponent({
       i18nByKey,
       apiModeState,
       currentThemeKey,
-      floatSettings
+      floatSettings,
+      appData
     }
   }
 })
 </script>
 
 <style lang="less">
+.docs-on-robot-show .float-settings {
+  right: 680px;
+}
+
 .float-settings {
   position: fixed;
   right: 200px;

package/src/components/mcp-docs.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="mcp-list">
+    <div class="mcp-title">
+      <h2>{{ capName }} 组件的 MCP 工具</h2>
+    </div>
+    <tiny-grid :data="mcpInfo" row-id="name">
+      <tiny-grid-column field="name" title="名称" width="180"> </tiny-grid-column>
+      <tiny-grid-column field="param" title="参数类型" width="150"> </tiny-grid-column>
+      <tiny-grid-column field="desc" title="工具描述"> </tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script setup>
+import { getTinyVueMcpConfig } from '@opentiny/tiny-vue-mcp'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
+import { camelize, capitalize } from '@vue/shared'
+import { onMounted, computed } from 'vue'
+
+const props = defineProps({
+  name: String
+})
+
+const mcpTools = getTinyVueMcpConfig({ t: null })
+const capName = computed(() => capitalize(camelize(props.name)))
+
+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 null
+})
+
+onMounted(() => {})
+</script>
+
+<style scoped lang="less">
+.mcp-list {
+  padding-bottom: 150px;
+}
+.mcp-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-top: 26px;
+  margin-bottom: 26px;
+}
+</style>

package/src/components/tiny-robot-chat.vue

@@ -0,0 +1,128 @@
+<template>
+  <!-- mcp-robot弹窗 -->
+  <tr-container v-model:show="appData.showTinyRobot" v-model:fullscreen="fullscreen">
+    <div v-if="messages.length === 0">
+      <tr-welcome title="智能助手" description="您好，我是OpenTiny AI智能助手" :icon="welcomeIcon">
+        <template #footer>
+          <div class="welcome-footer"></div>
+        </template>
+      </tr-welcome>
+      <tr-prompts
+        :items="customPromptItems"
+        :wrap="true"
+        item-class="prompt-item"
+        class="tiny-prompts"
+        @item-click="handlePromptItemClick"
+      ></tr-prompts>
+    </div>
+    <tr-bubble-list v-else :items="messages" :roles="roles" auto-scroll></tr-bubble-list>
+    <template #footer>
+      <div class="chat-input">
+        <TrSuggestionPills :items="customSuggestionPillItems" @item-click="handleSuggestionPillItemClick" /><br />
+        <tr-sender
+          ref="senderRef"
+          mode="single"
+          v-model="inputMessage"
+          :placeholder="GeneratingStatus.includes(messageState.status) ? '正在思考中...' : '请输入您的问题'"
+          :clearable="true"
+          :loading="GeneratingStatus.includes(messageState.status)"
+          :showWordLimit="true"
+          :maxLength="1000"
+          :template="currentTemplate"
+          @submit="handleSendMessage"
+          @cancel="abortRequest"
+          @keydown="handleMessageKeydown($event, onTrigger, onKeyDown)"
+          @reset-template="clearTemplate"
+        ></tr-sender>
+      </div>
+    </template>
+  </tr-container>
+</template>
+
+<script setup lang="ts">
+import { TrBubbleList, TrContainer, TrPrompts, TrSender, TrWelcome, TrSuggestionPills } from '@opentiny/tiny-robot'
+import { GeneratingStatus } from '@opentiny/tiny-robot-kit'
+import { useTinyRobot } from '../composable/useTinyRobot'
+import { appData } from '../tools/appData'
+
+const props = defineProps<{
+  promptItems: any[]
+  suggestionPillItems: any[]
+}>()
+
+const {
+  fullscreen,
+  welcomeIcon,
+  promptItems: defaultPromptItems,
+  messages,
+  messageState,
+  inputMessage,
+  abortRequest,
+  roles,
+  handlePromptItemClick,
+  senderRef,
+  currentTemplate,
+  clearTemplate,
+  handleSendMessage,
+  handleMessageKeydown,
+  suggestionPillItems: defaultSuggestionPillItems,
+  handleSuggestionPillItemClick
+} = useTinyRobot()
+
+const customPromptItems = props.promptItems || defaultPromptItems
+const customSuggestionPillItems = props.suggestionPillItems || defaultSuggestionPillItems
+</script>
+
+<style scoped lang="less">
+.chat-input {
+  margin-top: 8px;
+  padding: 10px 15px;
+}
+
+.tr-container {
+  top: 64px !important;
+
+  container-type: inline-size;
+
+  :deep(.tr-welcome__title-wrapper) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.welcome-footer {
+  margin-top: 12px;
+  color: rgb(128, 128, 128);
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.tiny-prompts {
+  padding: 16px 24px;
+
+  :deep(.prompt-item) {
+    width: 100%;
+    box-sizing: border-box;
+
+    @container (width >=64rem) {
+      width: calc(50% - 8px);
+    }
+
+    .tr-prompt__content-label {
+      font-size: 14px;
+      line-height: 24px;
+    }
+  }
+}
+
+.tr-history-demo {
+  position: absolute;
+  right: 100%;
+  top: 100%;
+  z-index: 100;
+  width: 300px;
+  height: 600px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
+}
+</style>

package/src/composable/DifyModelProvider.ts

@@ -0,0 +1,65 @@
+import type { ChatCompletionRequest } from '@opentiny/tiny-robot-kit'
+import type { AIModelConfig } from '@opentiny/tiny-robot-kit'
+import type { ChatCompletionResponse } from '@opentiny/tiny-robot-kit'
+import type { StreamHandler } from '@opentiny/tiny-robot-kit'
+import { BaseModelProvider } from '@opentiny/tiny-robot-kit'
+import { globalConversation, handleSSEStream } from './utils.js'
+import type { Ref } from 'vue'
+
+/**
+ * 对接AIClient的自定义 Dify 大模型服务
+ *
+ * const client = new AIClient({
+ *  provider: 'custom',
+ *  providerImplementation: new CustomModelProvider( config )
+ * });
+ */
+export class DifyModelProvider extends BaseModelProvider {
+  _messages: Ref<ChatCompletionRequest['messages']> = []
+
+  constructor(config: AIModelConfig) {
+    super(config)
+  }
+  /** 同步请示不需要实现 */
+  chat(request: ChatCompletionRequest): Promise<ChatCompletionResponse> {
+    throw new Error('Method not implemented.')
+  }
+
+  /** 异步流式请求 */
+  async chatStream(request: ChatCompletionRequest, handler: StreamHandler): Promise<void> {
+    const { signal } = request
+    this.validateRequest(request)
+
+    try {
+      // 验证请求的messages属性，必须是数组，且每个消息必须有role\content属性
+      const lastMessage = request.messages[request.messages.length - 1].content
+      // 模拟异步流式响应
+      const response = await fetch(`${this.config.apiUrl}/chat-messages`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${this.config.apiKey}`,
+          'Accept': 'text/event-stream'
+        },
+        body: JSON.stringify({
+          query: lastMessage,
+          user: 'user',
+          response_mode: 'streaming',
+          inputs: {
+            sessionId: globalConversation.sessionId
+          },
+          conversation_id: globalConversation.id
+        })
+      })
+
+      await handleSSEStream(response, handler, this._messages, signal)
+    } catch (error) {
+      if (signal && signal.aborted) {
+        console.warn('Request was aborted:', error)
+      } else {
+        console.error('Error in chatStream:', error)
+        // handler.onError(handleRequestError(error))
+      }
+    }
+  }
+}

package/src/composable/storage.ts

@@ -0,0 +1,71 @@
+import { ref, watch } from 'vue'
+
+function parse(str) {
+  if (str === null) return undefined
+  const type = str[0]
+  const strVal = str.slice(1)
+  // 对象时，有可能是Date, 否则反解析后统一是对象
+  if (type === 'o' || type === 'b') {
+    let val = JSON.parse(strVal)
+    return typeof val === 'string' ? new Date(val) : val
+  }
+  if (type === 'n') return +Number(strVal)
+  if (type === 's') return strVal
+}
+
+// 带前缀的保存值
+function save(store, k, v) {
+  const type = typeof v
+  store.setItem(k, type[0] + (type === 'object' ? JSON.stringify(v) : v))
+}
+
+/**
+ * 快速的保存值到 sessionStorage, localStorage.
+ * 支持基本类型，时间，数组，对象,null，不存在的键值返回undefined 。
+ * 不支持：Map,Set, 以及多级串联赋值，比如：$session.obj.name="abcd"
+ */
+function handler(storage) {
+  return {
+    get(target, propKey, receiver) {
+      return parse(storage.getItem(propKey))
+    },
+    set(target, propKey, value) {
+      save(storage, propKey, value)
+      return true
+    }
+  }
+}
+
+/** * 快速读写sessionStorage 示例： $session.abc="shen" */
+const $session = new Proxy({}, handler(sessionStorage))
+
+/** * 快速读写 localStorage 示例： $local.abc="shen" */
+const $local = new Proxy({}, handler(localStorage))
+
+/** * 全局共享值，刷新即丢失！  示例： $cache.abc="shen" */
+const $cache = {}
+
+const typeMatcher = { session: $session, local: $local, api: null }
+
+/**
+ * 用于记录用户行为,并保存到session,local 或api接口（api保存的功能还未实现）
+ * 示例：useAutoStore("session","key1")
+ *       useAutoStore("session","key2",100)
+ *       useAutoStore("session","key2",$session.key2 || 100)
+ * @param type 自动存储到的目标
+ * @param key 存储时的key
+ * @param defaultValue 默认值。
+ * @returns 响应式ref
+ */
+const useAutoStore = (type, key, defaultValue) => {
+  let refVar = ref(typeMatcher[type][key])
+  watch(refVar, (curr, prev) => {
+    typeMatcher[type][key] = curr
+  })
+
+  refVar.value = refVar.value ?? defaultValue
+
+  return refVar
+}
+
+export { $session, $local, $cache, useAutoStore }

package/src/composable/useTinyRobot.ts

@@ -0,0 +1,167 @@
+import type { AIModelConfig } from '@opentiny/tiny-robot-kit'
+import { AIClient, useConversation } from '@opentiny/tiny-robot-kit'
+import { IconAi, IconUser } from '@opentiny/tiny-robot-svgs'
+import { h, nextTick, onMounted, ref, watch } from 'vue'
+import { DifyModelProvider } from './DifyModelProvider.js'
+import type { SuggestionItem } from '@opentiny/tiny-robot'
+
+const difyConfig: AIModelConfig = {
+  provider: 'custom',
+  apiUrl: 'https://api.dify.ai/v1',
+  apiKey: 'app-H0VJI4LqZ4KskdcA5a07pjXf'
+}
+export function useTinyRobot() {
+  const difyModelProvider = new DifyModelProvider(difyConfig)
+  const client = new AIClient({
+    providerImplementation: difyModelProvider,
+    ...difyConfig
+  })
+
+  const fullscreen = ref(false)
+  const show = ref(true)
+
+  const aiAvatar = h(IconAi, { style: { fontSize: '32px' } })
+  const userAvatar = h(IconUser, { style: { fontSize: '32px' } })
+  const welcomeIcon = h(IconAi, { style: { fontSize: '48px' } })
+
+  const promptItems = [
+    {
+      label: '识别网页的内容',
+      description: '公司人员表中员工最多和最少的公司，帮我统计一下！',
+      icon: h('span', { style: { fontSize: '18px' } }, '💡')
+    },
+    {
+      label: '智能操作网页',
+      description: '请帮我选中公司人员表中员工最多的公司',
+      icon: h('span', { style: { fontSize: '18px' } }, '🕹')
+    }
+  ]
+  const handlePromptItemClick = (ev, item) => {
+    sendMessage(item.description)
+  }
+
+  const { messageManager } = useConversation({ client })
+  const { messages, messageState, inputMessage, sendMessage, abortRequest } = messageManager
+  difyModelProvider._messages = messages
+
+  const roles = {
+    assistant: {
+      type: 'markdown',
+      placement: 'start',
+      avatar: aiAvatar,
+      maxWidth: '80%'
+    },
+    user: {
+      placement: 'end',
+      avatar: userAvatar,
+      maxWidth: '80%'
+    }
+  }
+
+  // 建议按钮组，设置对话的模板
+  const suggestionPillItems = [
+    {
+      id: '1',
+      text: '公司人员表',
+      icon: h('span', { style: { fontSize: '18px' } }, '🏢')
+    }
+  ]
+
+  function handleSuggestionPillItemClick(item: SuggestionItem) {
+    let templateText = `请对 [目标组件] ,执行 [操作]`
+    let currentInitialValue = { 目标组件: item.text, 操作: '' }
+
+    if (senderRef.value) {
+      senderRef.value.setTemplate(templateText, currentInitialValue)
+    }
+  }
+
+  const senderRef = ref(null)
+  const currentTemplate = ref('')
+  const suggestionOpen = ref(false)
+
+  // 清除当前指令
+  const clearTemplate = () => {
+    // 清空指令相关状态
+    currentTemplate.value = ''
+
+    // 确保重新聚焦到输入框
+    nextTick(() => {
+      senderRef.value?.focus()
+    })
+  }
+
+  // 发送消息
+  const handleSendMessage = () => {
+    sendMessage(inputMessage.value)
+
+    clearTemplate()
+  }
+
+  const handleMessageKeydown = (event, triggerFn, suggestionKeyDown) => {
+    // 如果指令面板已打开，交给 suggestion 组件处理键盘事件
+    if (suggestionOpen.value) {
+      suggestionKeyDown(event)
+      return
+    }
+
+    // 如果按下斜杠键并且不在指令编辑模式，触发指令面板
+    if (event.key === '/' && !currentTemplate.value) {
+      triggerFn({
+        text: '',
+        position: 0
+      })
+    }
+
+    // ESC 键清除当前指令
+    if (event.key === 'Escape' && currentTemplate.value) {
+      event.preventDefault()
+      clearTemplate()
+    }
+  }
+
+  watch(
+    () => inputMessage.value,
+    (value) => {
+      // 如果指令面板已打开，并且指令为空，关闭指令面板
+      if (suggestionOpen.value && value === '') {
+        suggestionOpen.value = false
+      }
+    }
+  )
+
+  // 页面加载完成后自动聚焦输入框
+  onMounted(() => {
+    setTimeout(() => {
+      senderRef.value?.focus()
+    }, 500)
+  })
+
+  return {
+    client,
+    fullscreen,
+    show,
+    aiAvatar,
+    userAvatar,
+    welcomeIcon,
+    promptItems,
+
+    messageManager,
+    messages,
+    messageState,
+    inputMessage,
+    sendMessage,
+    abortRequest,
+    roles,
+    handlePromptItemClick,
+
+    senderRef,
+    currentTemplate,
+    suggestionOpen,
+    clearTemplate,
+    handleSendMessage,
+    handleMessageKeydown,
+    suggestionPillItems,
+    handleSuggestionPillItemClick
+  }
+}