feat: New MCP comprehensive example added to the official website

examples/sites/package.json

@@ -58,6 +58,7 @@
     "@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",

examples/sites/src/App.vue

@@ -17,7 +17,7 @@ import { iconClose } from '@opentiny/vue-icon'
 import { appData } from './tools'
 import useTheme from './tools/useTheme'
 import { useNextClient } from '@opentiny/next-vue'
-import { globalConversation } from './views/components-doc/composition/utils'
+import { globalConversation } from './composable/utils'
 
 export default defineComponent({
   name: 'AppVue',

examples/sites/src/views/components-doc/components/demo.vue → examples/sites/src/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'

examples/sites/src/views/components-doc/tiny-robot-chat.vue → examples/sites/src/components/tiny-robot-chat.vue

@@ -2,13 +2,13 @@
   <!-- 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">
+      <tr-welcome title="智能助手" description="您好，我是OpenTiny AI智能助手" :icon="welcomeIcon">
         <template #footer>
           <div class="welcome-footer"></div>
         </template>
       </tr-welcome>
       <tr-prompts
-        :items="promptItems"
+        :items="customPromptItems"
         :wrap="true"
         item-class="prompt-item"
         class="tiny-prompts"
@@ -18,7 +18,7 @@
     <tr-bubble-list v-else :items="messages" :roles="roles" auto-scroll></tr-bubble-list>
     <template #footer>
       <div class="chat-input">
-        <TrSuggestionPills :items="suggestionPillItems" @item-click="handleSuggestionPillItemClick" /><br />
+        <TrSuggestionPills :items="customSuggestionPillItems" @item-click="handleSuggestionPillItemClick" /><br />
         <tr-sender
           ref="senderRef"
           mode="single"
@@ -42,20 +42,21 @@
 <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 './composition/useTinyRobot'
-import { appData } from '../../tools/appData'
+import { useTinyRobot } from '../composable/useTinyRobot'
+import { appData } from '../tools/appData'
+
+const props = defineProps<{
+  promptItems: any[]
+  suggestionPillItems: any[]
+}>()
 
 const {
-  client,
   fullscreen,
-  show,
   welcomeIcon,
-  promptItems,
-  computedMessages,
+  promptItems: defaultPromptItems,
   messages,
   messageState,
   inputMessage,
-  sendMessage,
   abortRequest,
   roles,
   handlePromptItemClick,
@@ -64,9 +65,12 @@ const {
   clearTemplate,
   handleSendMessage,
   handleMessageKeydown,
-  suggestionPillItems,
+  suggestionPillItems: defaultSuggestionPillItems,
   handleSuggestionPillItemClick
 } = useTinyRobot()
+
+const customPromptItems = props.promptItems || defaultPromptItems
+const customSuggestionPillItems = props.suggestionPillItems || defaultSuggestionPillItems
 </script>
 
 <style scoped lang="less">

examples/sites/src/views/components-doc/composition/DifyModelProvider.ts → examples/sites/src/composable/DifyModelProvider.ts

@@ -33,7 +33,6 @@ export class DifyModelProvider extends BaseModelProvider {
     try {
       // 验证请求的messages属性，必须是数组，且每个消息必须有role\content属性
       const lastMessage = request.messages[request.messages.length - 1].content
-
       // 模拟异步流式响应
       const response = await fetch(`${this.config.apiUrl}/chat-messages`, {
         method: 'POST',

examples/sites/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 }

examples/sites/src/views/components-doc/composition/utils.ts → examples/sites/src/composable/utils.ts

@@ -5,7 +5,11 @@
 
 import type { ChatMessage, ChatCompletionResponse, StreamHandler } from '@opentiny/tiny-robot-kit'
 import type { ChatCompletionRequest } from '@opentiny/tiny-robot-kit'
-import type { Ref } from 'vue'
+import { ref, type Ref } from 'vue'
+
+export { $local } from './storage'
+
+export const showTinyRobot = ref(true)
 
 export const globalConversation = {
   id: '',

examples/sites/src/router.js

@@ -7,6 +7,7 @@ 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
 
@@ -18,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`,

examples/sites/src/views/components-doc/common.vue

@@ -99,16 +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 McpDocs from './components/mcp-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 './tiny-robot-chat.vue'
+import robotChat from '../../components/tiny-robot-chat.vue'
 
 const props = defineProps({ loadData: {}, appMode: {}, demoKey: {} })