@opentiny/vue-docs 3.24.6 → 3.26.0

package/demos/pc/webdoc/faq.md

@@ -110,3 +110,17 @@ const options = {
 
 xss.setXssOption(options)
 ```
+
+## 6、多组件库混用场景中的命名冲突问题
+
+**问题描述：** 在同时使用多个组件库(如 TinyVue 和 ElementUI)时,由于各组件库都会在 Vue 实例上挂载全局方法(如 `$modal`、`$message` 等),容易造成命名冲突。
+
+**解决方案：** TinyVue 提供了自定义前缀的配置方式,可以通过设置 `$TinyModalApiPrefix` 来修改默认的方法名前缀,避免冲突。
+
+```js
+// vue3下解决方案
+app.config.globalProperties.$TinyModalApiPrefix = 'tiny_'
+
+// vue2下解决方案
+Vue.prototype.$TinyModalApiPrefix = 'tiny_'
+```

package/demos/saas/menus.js

@@ -6,24 +6,12 @@ const noSaasComponents = [
   'ActionMenu',
   'ColorPicker',
   'ColorSelectPanel',
-  'ConfigProvider',
   'DatePickerMobileFirst',
-  'Divider',
-  'IndexBar',
-  'IndexBarAnchor',
-  'Label',
-  'Mask',
   'MindMap',
-  'MultiSelect',
-  'MultiSelectItem',
   'QrCode',
   'RichTextEditor',
   'TimelineItem',
-  'Toast',
-  'TopBox',
   'Watermark',
-  'Wheel',
-  'Skeleton',
   'Statistic'
 ]
 
@@ -44,8 +32,8 @@ const cmpMenus = pcCmpMenus.map((pcMenusitem) => {
   pcMenusitem.children = pcMenusitem.children.filter((item) => !noSaasComponents.includes(item.name))
 
   // 插入 queryBuild 的菜单。 pc 文档下线该组件，仅在saas文档展示
-  if (pcMenusitem.label === '表单组件') {
-    pcMenusitem.children.push({ 'nameCn': '查询生成器', 'name': 'QueryBuilder ', 'key': 'query-builder' })
+  if (pcMenusitem.label === '表单') {
+    pcMenusitem.children.push({ 'nameCn': '查询生成器', 'name': 'QueryBuilder ', 'key': 'query-builder', mode: ['pc'] })
   }
   return pcMenusitem
 })

package/env/.env

@@ -6,3 +6,6 @@ VITE_APP_MODE='pc'
 
 VITE_APP_BUILD_BASE_URL='/'
 VITE_PLAYGROUND_URL=/playground.html
+
+VITE_LLM_API_KEY=
+VITE_LLM_URL=https://api.deepseek.com/v1

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@opentiny/vue-docs",
   "type": "module",
-  "version": "3.24.6",
+  "version": "3.26.0",
   "license": "MIT",
   "dependencies": {
     "@docsearch/css": "^3.8.0",
     "@docsearch/js": "^3.8.0",
     "@docsearch/react": "npm:@docsearch/css",
-    "@opentiny/next-vue": "^0.0.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.2",
+    "@opentiny/next-sdk": "^0.1.1",
+    "@opentiny/tiny-robot": "0.3.0-alpha.3",
+    "@opentiny/tiny-robot-kit": "0.3.0-alpha.3",
+    "@opentiny/tiny-robot-svgs": "0.3.0-alpha.3",
+    "@opentiny/tiny-vue-mcp": "^0.0.3",
     "@opentiny/vue-repl": "^1.1.2",
     "@opentiny/vue-vite-import": "~1.2.0",
     "@unocss/reset": "0.38.2",
@@ -29,24 +29,25 @@
     "vue": "^3.4.31",
     "vue-i18n": "~9.14.3",
     "vue-router": "4.1.5",
-    "@opentiny/utils": "~3.24.0",
-    "@opentiny/vue-common": "~3.24.0",
-    "@opentiny/vue-design-saas": "~3.24.0",
-    "@opentiny/vue": "~3.24.0",
-    "@opentiny/vue-design-smb": "~3.24.0",
-    "@opentiny/vue-design-aurora": "~3.24.0",
-    "@opentiny/vue-flowchart": "~3.24.0",
-    "@opentiny/vue-hooks": "~3.24.0",
-    "@opentiny/vue-huicharts": "~3.24.0",
-    "@opentiny/vue-icon": "~3.24.0",
-    "@opentiny/vue-directive": "~3.24.0",
-    "@opentiny/vue-icon-multicolor": "~3.24.0",
-    "@opentiny/vue-modal": "~3.24.0",
-    "@opentiny/vue-locale": "~3.24.0",
-    "@opentiny/vue-renderless": "~3.24.0",
-    "@opentiny/vue-icon-saas": "~3.24.0",
-    "@opentiny/vue-theme": "~3.24.0",
-    "@opentiny/vue-theme-saas": "~3.24.0"
+    "zod": "^3.24.4",
+    "@opentiny/utils": "~3.26.0",
+    "@opentiny/vue": "~3.26.0",
+    "@opentiny/vue-common": "~3.26.0",
+    "@opentiny/vue-design-aurora": "~3.26.0",
+    "@opentiny/vue-design-saas": "~3.26.0",
+    "@opentiny/vue-design-smb": "~3.26.0",
+    "@opentiny/vue-directive": "~3.26.0",
+    "@opentiny/vue-flowchart": "~3.26.0",
+    "@opentiny/vue-hooks": "~3.26.0",
+    "@opentiny/vue-huicharts": "~3.26.0",
+    "@opentiny/vue-icon-multicolor": "~3.26.0",
+    "@opentiny/vue-icon": "~3.26.0",
+    "@opentiny/vue-icon-saas": "~3.26.0",
+    "@opentiny/vue-locale": "~3.26.0",
+    "@opentiny/vue-modal": "~3.26.0",
+    "@opentiny/vue-renderless": "~3.26.0",
+    "@opentiny/vue-theme": "~3.26.0",
+    "@opentiny/vue-theme-saas": "~3.26.1"
   },
   "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.24'
+const VERSION = 'tiny-vue-version-3.26'
 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.24', '3.23', '3.22']
+const versions = ['3.26', '3.25', '3.24']
 const getVersion = () => {
   if (isPreview) {
     return versions[0]

package/postcss.config.cjs

@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
+    'tailwindcss/nesting': 'postcss-nesting',
     tailwindcss: {}
   }
 }

package/src/App.vue

@@ -10,70 +10,37 @@
   </div>
 </template>
 
-<script>
-import { defineComponent, onMounted, provide, ref, watch } from 'vue'
-import { ConfigProvider, Modal } from '@opentiny/vue'
+<script setup lang="ts">
+import { onMounted, provide, ref } from 'vue'
+import { TinyConfigProvider, TinyModal } 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, $session } from './composable/utils'
-
-export default defineComponent({
-  name: 'AppVue',
-  props: [],
-  components: {
-    TinyConfigProvider: ConfigProvider,
-    TinyModal: Modal,
-    TinyIconClose: iconClose()
-  },
-  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://agent.icjs.ink/sse', token: '', sessionId: $session.sessionId }
-    })
-
-    watch(
-      () => sessionId.value,
-      (newVal) => {
-        if (newVal) {
-          $session.sessionId = newVal
-          globalConversation.sessionId = newVal
-        }
-      }
-    )
+import useTheme from './tools/useTheme'
 
-    onMounted(() => {
-      // 加载header
-      const common = new window.TDCommon(['#header'], {
-        allowDarkTheme: true,
-        searchConfig: {
-          show: true
-        },
-        menuCollapse: {
-          useCollapse: true, // 启用1024以下隐藏菜单
-          menuId: '#layoutSider'
-        }
-      })
-      common.renderHeader()
-    })
-    const { designConfig, currentThemeKey } = useTheme()
+const modalSHow = ref(false)
+const previewUrl = ref(import.meta.env.VITE_PLAYGROUND_URL)
+const tinyIconClose = iconClose()
 
-    provide('showPreview', (url) => {
-      previewUrl.value = url
-      modalSHow.value = true
-    })
-    return {
-      appData,
-      designConfig,
-      currentThemeKey,
-      previewUrl,
-      modalSHow
+onMounted(() => {
+  // 加载header
+  const common = new window.TDCommon(['#header'], {
+    allowDarkTheme: true,
+    searchConfig: {
+      show: true
+    },
+    menuCollapse: {
+      useCollapse: true, // 启用1024以下隐藏菜单
+      menuId: '#layoutSider'
     }
-  }
+  })
+  common.renderHeader()
+})
+const { designConfig, currentThemeKey } = useTheme()
+
+// 多端的预览图
+provide('showPreview', (url) => {
+  previewUrl.value = url
+  modalSHow.value = true
 })
 </script>
 

package/src/components/anchor.vue

@@ -2,10 +2,11 @@
   <div v-if="links.length" class="cmp-page-anchor catalog">
     <tiny-anchor
       id="anchor"
+      :tiny_mode="theme === 'saas' ? 'pc' : 'mobile-first'"
       :offset-top="56"
       :links="links"
       :is-affix="props.anchorAffix"
-      type="dot"
+      :type="theme === 'saas' ? 'line' : 'dot'"
       container-id="#doc-layout-scroller"
       @link-click="handleAnchorClick"
     >
@@ -21,6 +22,8 @@ const props = defineProps({ anchorAffix: {}, currentJson: {}, activeTab: {}, lan
 
 const emit = defineEmits(['link-click'])
 
+const theme = import.meta.env.VITE_TINY_THEME
+
 // 实例锚点
 const demoAnchorLinks = computed(() => {
   const links =
@@ -71,6 +74,7 @@ const handleAnchorClick = (...args) => {
   :deep(.tiny-anchor__affix) {
     top: unset !important;
     overflow-y: auto;
+    overflow-x: hidden;
     max-height: calc(100vh - 300px);
   }
 

package/src/components/demo.vue

@@ -38,10 +38,7 @@
         </div>
         <component :is="getDescMd(demo)" class="demo-desc" />
 
-        <div v-if="isMobileFirst" class="pc-demo-container">
-          <tiny-button @click="openPlayground(demo, false)">多端预览</tiny-button>
-        </div>
-        <div v-else-if="demoConfig.isMobile" class="pc-demo-container">
+        <div v-if="demoConfig.isMobile" class="pc-demo-container">
           <div class="mobile-view-btn">
             <tiny-button @click="openIframe(demo)">{{ i18nByKey('yan-shi') }}</tiny-button>
           </div>
@@ -70,7 +67,19 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, shallowRef, onMounted, onBeforeUnmount, watch, nextTick, inject, h } from 'vue'
+import {
+  ref,
+  reactive,
+  computed,
+  shallowRef,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+  nextTick,
+  inject,
+  h,
+  provide
+} from 'vue'
 import { i18nByKey, getWord } from '@/i18n'
 import { $split, fetchDemosFile } from '@/tools'
 import { Tabs as TinyTabs, TabItem as TinyTabItem, Button as TinyButton } from '@opentiny/vue'
@@ -123,7 +132,7 @@ const showPreview = inject('showPreview')
 const state = reactive({
   tabValue: 'tab0',
   cmpId: router.currentRoute.value.params.cmpId,
-  langKey: getWord('zh-CN', 'en-US'),
+  langKey: getWord('zh-CN', 'en-US', 'es-LA', 'pt-BR'),
   copyTip: i18nByKey('copyCode'),
   copyIcon: 'i-ti-copy'
 })
@@ -257,6 +266,8 @@ const openIframe = (demo) => {
   emit('get-iframe-demo', demo)
 }
 
+provide('TinyMode', templateModeState.mode)
+
 onMounted(() => {
   if (demoContainer.value) {
     props.observer?.observe?.(demoContainer.value)
@@ -293,7 +304,7 @@ onBeforeUnmount(() => {
     padding: 4px 8px;
     margin: 0 4px;
     font-size: 0.85em;
-    background-color: var(--tv-color-bg-header);
+    background-color: var(--tv-color-bg-header, #f5f7fa);
     border-radius: 3px;
   }
 

package/src/components/design-token.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="tiny-token-list">
+    <div class="tiny-token-title">
+      <h2>{{ capName }} 主题变量</h2>
+      <tiny-popover width="800" trigger="hover">
+        <div>
+          <div class="tiny-token-demo">
+            <async-highlight :code="content"></async-highlight>
+          </div>
+          <tiny-link
+            :icon="TinyIconViewFlowchart"
+            :underline="false"
+            href="https://opentiny.design/opentiny-design/guide/theme"
+            target="_blank"
+            >如何定制？</tiny-link
+          >
+        </div>
+        <template #reference>
+          <div class="tiny-design">
+            <tiny-button type="text" :icon="TinyIconHelpCircle" text="如何定制"> </tiny-button>
+          </div>
+        </template>
+      </tiny-popover>
+    </div>
+    <tiny-grid :data="tokenList" row-id="name">
+      <tiny-grid-column field="token" title="Token名称"> </tiny-grid-column>
+      <tiny-grid-column field="desc" title="描述"> </tiny-grid-column>
+      <tiny-grid-column field="tokenValue" title="默认值"> </tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script setup>
+import { TinyGrid, TinyGridColumn, TinyPopover, TinyButton, TinyLink } from '@opentiny/vue'
+import { camelize, capitalize } from '@vue/shared'
+import { computed, ref } from 'vue'
+import { iconHelpCircle, iconViewFlowchart } from '@opentiny/vue-icon'
+import AsyncHighlight from './async-highlight.vue'
+
+const props = defineProps({
+  name: String,
+  tokenList: Array
+})
+
+const TinyIconHelpCircle = iconHelpCircle()
+const TinyIconViewFlowchart = iconViewFlowchart()
+const capName = computed(() => capitalize(camelize(props.name)))
+const theme = '`'
+const content = ref(
+  `
+    <tiny-config-provider :theme="{css:${theme}.tiny-button{--tv-Button-bg-color-primary: red;}${theme}}">
+      <tiny-button type="primary">主题色按钮</tiny-button>
+    </tiny-config-provider>
+  `
+)
+</script>
+
+<style scoped lang="less">
+.tiny-token-list {
+  padding-bottom: 150px;
+}
+.tiny-token-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-top: 26px;
+  margin-bottom: 26px;
+}
+h2 {
+  display: inline-block;
+}
+
+.tiny-design {
+  font-size: 12px;
+  font-weight: normal;
+  display: inline-block;
+  margin-left: 8px;
+  line-height: 22px;
+  span {
+    color: #808808;
+  }
+}
+.tiny-content-text {
+  width: 270px;
+  border: 1px solid #191919;
+}
+.tiny-token-demo {
+  border: 1px solid #efeff4;
+  margin-bottom: 12px;
+}
+</style>

package/src/components/float-settings.vue

@@ -43,9 +43,8 @@
     <tiny-popover
       width="180"
       placement="left-end"
-      trigger="manual"
+      trigger="click"
       :visible-arrow="false"
-      v-model="demoStyleVisible"
       popper-class="opt-menu style-settings-menu theme-settings-popover"
     >
       <div v-for="(item, index) in styleSettings" :key="index" class="style-settings-item">
@@ -60,18 +59,7 @@
       </div>
       <template #reference>
         <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"
-          >
+          <div class="settings-btn style-settings-btn">
             <style-settings-icon class="settings-icon style-settings-icon"></style-settings-icon>
           </div>
         </div>
@@ -104,7 +92,6 @@ 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'
@@ -117,7 +104,6 @@ export default defineComponent({
     TinyRadioGroup: RadioGroup,
     IconUpWard: iconUpWard(),
     TinyPopover: Popover,
-    IconAi,
     // ThemeSettingsIcon,
     StyleSettingsIcon
   },
@@ -130,7 +116,6 @@ export default defineComponent({
     const floatSettings = ref(null)
 
     const state = reactive({
-      demoStyleVisible: false,
       themeData: [],
       styleSettings: getStyleSettings(i18nByKey),
       settingsStyle: {
@@ -269,10 +254,6 @@ export default defineComponent({
 </script>
 
 <style lang="less">
-.docs-on-robot-show .float-settings {
-  right: 680px;
-}
-
 .float-settings {
   position: fixed;
   right: 200px;
@@ -378,10 +359,10 @@ html.dark .settings-btn {
 }
 .tiny-popover.tiny-popper.theme-settings-popover {
   border-radius: 12px;
-  background-color: var(--tv-color-bg);
+  background-color: var(--tv-color-bg, #fff);
 }
 html.dark .tiny-popover.tiny-popper.theme-settings-popover {
-  background-color: var(--tv-color-bg-dark);
+  background-color: var(--tv-color-bg-dark, #191919);
 }
 
 .theme-settings-menu {

package/src/components/mcp-docs.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="mcp-list">
     <div class="mcp-title">
-      <h2>{{ capName }} 组件的 MCP 工具</h2>
+      <h2>{{ name }} 组件的 MCP 工具</h2>
     </div>
-    <tiny-grid :data="mcpInfo" row-id="name">
+    <tiny-grid :data="data" 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>
@@ -12,34 +12,12 @@
 </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
+  name: String,
+  data: Array
 })
-
-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">

package/src/components/version-tip.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from 'vue'
+import { type PropType } from '@opentiny/vue-common'
 import { defineComponent, computed } from 'vue'
 import { Tag as TinyTag, Alert as TinyAlert, Tooltip as TinyTooltip } from '@opentiny/vue'
 import { getWord } from '@/tools'