@opentiny/vue-docs 3.24.6 → 3.26.0

package/src/tools/appData.js

@@ -1,16 +1,12 @@
-import { reactive, computed, watch } from 'vue'
+import { reactive, computed } from 'vue'
 import { useAutoStore } from './storage'
 import { useMediaQuery } from './useMediaQuery'
-import { ZH_CN_LANG, EN_US_LANG, LANG_KEY, LANG_PATH_MAP } from '../const'
+import { ZH_CN_LANG, LANG_KEY, LANG_PATH_MAP } from '../const'
 
-const zhPath = LANG_PATH_MAP[ZH_CN_LANG]
-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
-  showTinyRobot: false,
-  hasFloatRobot: false
+  bpState: useMediaQuery([640, 1024, 1280]).matches // 3点4区间， bp0,bp1,bp2,bp3
 })
 const isZhCn = computed(() => appData.lang === ZH_CN_LANG)
 const appFn = {
@@ -18,9 +14,10 @@ const appFn = {
     if (name !== appData.lang) {
       let url = location.href
       url = location.href.replace(LANG_PATH_MAP[appData.lang], LANG_PATH_MAP[name])
-      // appData.lang = name 官网先屏蔽英文内容
+      // appData.lang = name // 官网先屏蔽切换语言，默认中文
       appData.lang = ZH_CN_LANG
-      location.replace(url)
+      history.replaceState({}, '', url)
+      location.reload()
     }
   },
   toggleTheme() {
@@ -30,11 +27,4 @@ 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/tools/storage.js

@@ -1,4 +1,5 @@
 import { ref, watch } from 'vue'
+import { getLocaleMode } from './utils'
 
 function parse(str) {
   if (str === null) return undefined
@@ -58,13 +59,14 @@ const typeMatcher = { session: $session, local: $local, api: null }
  * @returns 响应式ref
  */
 const useAutoStore = (type, key, defaultValue) => {
-  let refVar = ref(typeMatcher[type][key])
+  let refVar = ref(getLocaleMode())
+  typeMatcher[type][key] = refVar.value
+
   watch(refVar, (curr, prev) => {
     typeMatcher[type][key] = curr
   })
-
   refVar.value = refVar.value ?? defaultValue
-  
+
   return refVar
 }
 

package/src/tools/useApiMode.js

@@ -1,18 +1,26 @@
 import { reactive } from 'vue'
 import { $local } from './storage'
-import { appFn } from './appData'
+import { appFn, appData } from './appData'
+import { useTemplateMode } from './useTemplateMode'
 
 const _modeKey = 'tiny-vue-api-mode'
 const _demoModeKey = 'tiny-vue-demo-mode'
+
 const apiModeState = reactive({
-  localeMode: location.href.includes('en-US') ? 'enUS' : 'zhCN',
+  localeMode: appData.lang,
   apiMode: $local[_modeKey] || 'Composition', // 示例风格:  Options: 组合式; Composition: 选项式
   demoMode: $local[_demoModeKey] || 'default' // 示例展示： default:多示例， single:单示例
 })
 
+const { templateModeState } = useTemplateMode()
+
 const apiModeFn = {
   getDemoName: (name) => {
-    return name.replace(/\.vue$/, `${apiModeState.apiMode === 'Options' ? '' : '-composition-api'}.vue`)
+    const isMobileFirst = templateModeState.mode === 'mobile-first'
+    const isOptions = apiModeState.apiMode === 'Options'
+    const resultName = isMobileFirst ? `mobile-first/${name}` : name
+    // mobile-first模板暂时没有composition-api 格式的文件，需要特殊处理下
+    return resultName.replace(/\.vue$/, `${isOptions || isMobileFirst ? '' : '-composition-api'}.vue`)
   },
   changeLocaleMode: (name) => {
     appFn.toggleLang(name)

package/src/tools/useBulletin.jsx

@@ -22,15 +22,16 @@ export function useBulletin() {
     onMounted(() => {
       Modal.confirm({
         title: '公告',
-        message: (<div style="font-size:16px;line-height:1.5;">
-          <div>尊敬的 TinyVue 用户：</div>
-          <p style="text-indent: 2em;" v-html={lastBulletin.content}> 
-          </p>
-          <div style="text-align:right;margin-top:20px">TinyVue 团队</div>
-          <div style="text-align:right;">{ lastBulletin.time }</div>
-        </div>),
+        message: (
+          <div style="font-size:16px;line-height:1.5;">
+            <div>尊敬的 TinyVue 用户：</div>
+            <p style="text-indent: 2em;" v-html={lastBulletin.content}></p>
+            <div style="text-align:right;margin-top:20px">TinyVue 团队</div>
+            <div style="text-align:right;">{lastBulletin.time}</div>
+          </div>
+        ),
         status: null,
-        width:'760',
+        width: '760',
         confirmContent: '我知道了',
         cancelContent: '关闭'
       }).then((res) => {

package/src/tools/useStyleSettings.js

@@ -15,6 +15,14 @@ const getStyleSettings = (i18nByKey) => {
     //     {
     //       value: 'enUS',
     //       text: i18nByKey('en-us')
+    //     },
+    //     {
+    //       value: 'esLA',
+    //       text: i18nByKey('es-la')
+    //     },
+    //     {
+    //       value: 'ptBR',
+    //       text: i18nByKey('pt-br')
     //     }
     //   ]
     // },

package/src/tools/useTemplateMode.js

@@ -1,6 +1,6 @@
 import { reactive, computed, watch } from 'vue'
 import { router } from '@/router.js'
-import { getAllComponents } from '@/menus.jsx'
+import { getAllComponents } from '@/menus'
 import demoConfig from '@demos/config.js'
 import { staticDemoPath } from '../views/components-doc/cmp-config'
 
@@ -38,6 +38,10 @@ const optionsList = computed(() =>
     if (item === 'mobile-first') {
       return { value: item, text: '多端' }
     }
+
+    if (item === 'pc') {
+      return { value: item, text: 'PC' }
+    }
     return { value: item, text: item }
   })
 )

package/src/tools/utils.js

@@ -1,5 +1,6 @@
 import Contributors from '@/data/contributors'
 import ContributorMap from '@/data/contributorMap'
+import { ZH_CN_LANG, EN_US_LANG, ES_LA_LANG, PT_BR_LANG, LANG_PATH_MAP } from '../const'
 
 const baseUrl = import.meta.env.BASE_URL
 
@@ -103,4 +104,34 @@ const getCmpContributors = (cmpId) => {
   return contributorInfo
 }
 
-export { $clone, $split, $delay, $idle, pubUrl, fetchDemosFile, getCmpContributors }
+const getLocaleMode = () => {
+  const { href, pathname } = location
+  const DEFAULT_LANG = ZH_CN_LANG // 默认语言
+
+  const langCheckMap = new Map([
+    [
+      EN_US_LANG,
+      () => href.includes(`/${LANG_PATH_MAP[EN_US_LANG]}`) || pathname.includes(`/${LANG_PATH_MAP[EN_US_LANG]}/`)
+    ],
+    [
+      ZH_CN_LANG,
+      () => href.includes(`/${LANG_PATH_MAP[ZH_CN_LANG]}`) || pathname.includes(`/${LANG_PATH_MAP[ZH_CN_LANG]}/`)
+    ],
+    [
+      ES_LA_LANG,
+      () => href.includes(`/${LANG_PATH_MAP[ES_LA_LANG]}`) || pathname.includes(`/${LANG_PATH_MAP[ES_LA_LANG]}/`)
+    ],
+    [
+      PT_BR_LANG,
+      () => href.includes(`/${LANG_PATH_MAP[PT_BR_LANG]}`) || pathname.includes(`/${LANG_PATH_MAP[PT_BR_LANG]}/`)
+    ]
+  ])
+
+  for (const [lang, checkFn] of langCheckMap) {
+    if (checkFn()) return lang
+  }
+
+  return DEFAULT_LANG // 无匹配时返回默认
+}
+
+export { $clone, $split, $delay, $idle, pubUrl, fetchDemosFile, getCmpContributors, getLocaleMode }

package/src/views/components-doc/cmp-config.js

@@ -1,6 +1,7 @@
 // 批量导入vue组件示例文件, 进行vue组件示例的渲染
 const vueFiles = import.meta.glob(`@demos/app/**/*.vue`)
-
+const isSaas = import.meta.env.VITE_TINY_THEME === 'saas'
+const mobileFirstVueFiles = isSaas ? import.meta.glob(`../../../demos/mobile-first/app/**/*.vue`) : null
 // 所有demo组件实例
 const vueComponents = Object.create(null)
 for (const path in vueFiles) {
@@ -12,6 +13,17 @@ for (const path in vueFiles) {
   }
 }
 
+if (mobileFirstVueFiles) {
+  for (const path in mobileFirstVueFiles) {
+    if (Object.prototype.hasOwnProperty.call(mobileFirstVueFiles, path)) {
+      const pathArr = path.split('/')
+      const cmpId = pathArr[6]
+      const key = pathArr.slice(7).join('/')
+      vueComponents[`mobile-first/${cmpId}/${key}`] = mobileFirstVueFiles[path]
+    }
+  }
+}
+
 const languageMap = {
   js: 'javascript',
   ts: 'javascript',

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

@@ -62,8 +62,12 @@
                 @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 v-if="state.tokenList?.length" title="Token" name="token">
+              <!-- 主题变量 -->
+              <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>
 
@@ -72,6 +76,7 @@
 
         <!-- demo与api目录锚点 -->
         <aside-anchor
+          v-if="state.activeTab === 'demos' || state.activeTab === 'api'"
           :active-tab="state.activeTab"
           :current-json="state.currJson"
           :anchor-affix="state.anchorAffix"
@@ -88,11 +93,10 @@
     </div>
     <div id="footer"></div>
   </div>
-  <robotChat v-if="appData.showTinyRobot && appData.hasFloatRobot"></robotChat>
 </template>
 
 <script setup lang="ts">
-import { reactive, computed, watch, onMounted, nextTick, ref } from 'vue'
+import { reactive, computed, watch, onMounted, nextTick, ref, onUnmounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 import { debounce } from '@opentiny/utils'
@@ -104,11 +108,13 @@ 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 DesignToken from '../../components/design-token.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'
+import list from '@opentiny/vue-theme/token'
+import { cmpAnchorDataCallback } from '../../composable/useTinyRemoter'
+import { getTinyVueMcpConfig } from '@opentiny/tiny-vue-mcp'
+import { camelize, capitalize } from '@vue/shared'
 
 const props = defineProps({ loadData: {}, appMode: {}, demoKey: {} })
 
@@ -124,9 +130,10 @@ const isRunningTest = localStorage.getItem('tiny-e2e-test') === 'true'
 const anchorRefreshKey = ref(0)
 const route = useRoute()
 const state = reactive({
-  langKey: getWord('zh-CN', 'en-US'),
+  langKey: getWord('zh-CN', 'en-US', 'es-LA', 'pt-BR'),
   cmpId: '',
   observer: null,
+  tokenList: [],
   currJson: { column: 1, demos: [], apis: [], types: {} },
   mdString: '',
   currDemoId: '',
@@ -192,7 +199,6 @@ const parseApiData = () => {
   if (!state.currJson.apis?.length) {
     return {}
   }
-
   const tableData = {}
   const apis = state.currJson.apis || []
   for (const apiGroup of apis) {
@@ -285,7 +291,7 @@ const demoMounted = () => {
 }
 
 const loadPage = () => {
-  const lang = getWord('cn', 'en')
+  const lang = getWord('cn', 'en', 'es', 'pt')
   state.cmpId = router.currentRoute.value.params.cmpId
 
   state.chartCode = getWebdocPath(state.cmpId) === 'chart'
@@ -296,7 +302,6 @@ const loadPage = () => {
     state.mdString = mdString
     // plus隐藏头部集合
     const hideTabHeader = ['interfaces', 'types', 'classes'].includes(state.cmpId)
-
     if (demosJson && !hideTabHeader) {
       // 默认设置每个实例demo都不和视图相交
       demosJson.demos?.forEach((item) => {
@@ -314,7 +319,7 @@ const loadPage = () => {
         document.querySelector('.tiny-tabs__header').style.display = 'none'
       }
     }
-
+    state.tokenList = list[state.cmpId] || []
     const { finishTask, waitTasks: allDemoMounted } = useTasksFinish(state.currJson.demos.length)
     finishMountTask = finishTask
 
@@ -445,13 +450,35 @@ const handleAnchorClick = (e, data) => {
   }
 }
 
+// 页面加载时，创建一个返回 anchor data的函数。 这样工具调用时，可以拿到最新 anchor 信息
+cmpAnchorDataCallback.value = () => state.currJson.demos
+onUnmounted(() => {
+  cmpAnchorDataCallback.value = null
+})
+
+// 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>
 
 <style lang="less" scoped>
-:global(.docs-on-robot-show .docs-content) {
-  margin-right: 480px;
-}
 .docs-content {
   flex: 1;
   overflow: hidden auto;

package/src/views/layout/layout.vue

@@ -51,7 +51,7 @@
       </div>
     </div>
 
-    <float-settings v-if="!isThemeSaas"></float-settings>
+    <float-settings></float-settings>
   </div>
 </template>
 
@@ -59,7 +59,7 @@
 import { useRoute } from 'vue-router'
 import { defineComponent, reactive, computed, toRefs, watch, onMounted, onUnmounted } from 'vue'
 import { TreeMenu, Dropdown, DropdownMenu, Tooltip, Tag, Radio, RadioGroup, Button } from '@opentiny/vue'
-import { genMenus, getMenuIcons } from '@/menus.jsx'
+import { genMenus, getMenuIcons } from '@/menus'
 import { router } from '@/router.js'
 import { getWord, i18nByKey, appData, appFn, useApiMode, useTemplateMode } from '@/tools'
 import useTheme from '@/tools/useTheme'
@@ -96,14 +96,12 @@ export default defineComponent({
       expandKeys: []
     })
 
-    const lang = getWord('zh-CN', 'en-US')
+    const lang = getWord('zh-CN', 'en-US', 'es-LA', 'pt-BR')
     const route = useRoute()
     const { all: allPathParam, theme = defaultTheme } = useRoute().params
     const allPath = allPathParam ? allPathParam + '/' : ''
     const getTo = (route, key) => `${import.meta.env.VITE_CONTEXT}${allPath}${lang}/${theme}/${route}${key}`
 
-    const isThemeSaas = import.meta.env.VITE_TINY_THEME === 'saas'
-
     const changeLanguage = () => {
       appFn.toggleLang()
     }
@@ -190,7 +188,6 @@ export default defineComponent({
       clickMenuLink,
       getWord,
       i18nByKey,
-      isThemeSaas,
       isShowFilter
     }
   }
@@ -332,11 +329,11 @@ export default defineComponent({
         text-overflow: ellipsis;
       }
 
-      .menu-type-icon {
+      svg.menu-type-icon {
         width: 12px;
         height: 12px;
         display: inline-block;
-        fill: var(--tv-color-icon-control);
+        fill: var(--tv-color-icon-control, #5f6774);
       }
     }
   }

package/src/views/overview.vue

@@ -121,7 +121,7 @@ export default defineComponent({
         .filter((item) => item.children.length > 0)
       state.searchMenus = searchMenus
     }
-    const lang = getWord('zh-CN', 'en-US')
+    const lang = getWord('zh-CN', 'en-US', 'es-LA', 'pt-BR')
     const { defaultTheme } = useTheme()
     const { all: allPathParam, theme = defaultTheme } = useRoute().params
     const allPath = allPathParam ? allPathParam + '/' : ''

package/tsconfig.node.json

@@ -6,7 +6,5 @@
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
-  "include": [
-    "vite.config.ts"
-  ]
-}
+  "include": ["vite.config.ts"]
+}

package/src/components/MessageCard.vue

@@ -1,117 +0,0 @@
-<template>
-  <div class="message-card" :class="role">
-    <div class="avatar">
-      <component :is="avatarIcon" class="avatar-icon" />
-    </div>
-    <div class="content">
-      <div class="role-name">{{ roleName }}</div>
-      <div class="message">{{ message }}</div>
-      <div class="time">{{ formatTime }}</div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { IconAi, IconUser } from '@opentiny/tiny-robot-svgs'
-
-interface Props {
-  role: 'user' | 'assistant'
-  message: string
-  timestamp: number
-}
-
-const props = defineProps<Props>()
-
-const roleName = computed(() => (props.role === 'assistant' ? '智能助手' : '我'))
-
-const avatarIcon = computed(() => (props.role === 'assistant' ? IconAi : IconUser))
-
-const formatTime = computed(() => {
-  const date = new Date(props.timestamp)
-  return date.toLocaleTimeString('zh-CN', {
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: false
-  })
-})
-</script>
-
-<style scoped lang="less">
-.message-card {
-  display: flex;
-  margin: 16px;
-  gap: 12px;
-  max-width: 80%;
-
-  &.assistant {
-    margin-right: auto;
-
-    .content {
-      background-color: #f0f2f5;
-    }
-
-    .avatar-icon {
-      color: #2080f0;
-    }
-  }
-
-  &.user {
-    margin-left: auto;
-    flex-direction: row-reverse;
-
-    .content {
-      background-color: #e8f5e9;
-    }
-
-    .avatar-icon {
-      color: #18a058;
-    }
-  }
-
-  .avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    overflow: hidden;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #f5f7fa;
-
-    .avatar-icon {
-      width: 24px;
-      height: 24px;
-    }
-  }
-
-  .content {
-    padding: 12px;
-    border-radius: 12px;
-    position: relative;
-    min-width: 120px;
-    max-width: calc(100% - 60px);
-
-    .role-name {
-      font-size: 14px;
-      color: #666;
-      margin-bottom: 4px;
-    }
-
-    .message {
-      font-size: 16px;
-      line-height: 1.5;
-      word-break: break-word;
-      white-space: pre-wrap;
-    }
-
-    .time {
-      font-size: 12px;
-      color: #999;
-      margin-top: 4px;
-      text-align: right;
-    }
-  }
-}
-</style>

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

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