@opentiny/vue-docs 3.26.7 → 3.27.0

package/env/.env.saaspages

@@ -0,0 +1,9 @@
+# 1、声明一个变量
+VITE_CONTEXT=/tiny-vue-saas-web-doc/
+VITE_BUILD_TARGET='inner'
+VITE_TINY_THEME='saas'
+# 官网应用类型：pc / mobile / mobile-first
+VITE_APP_MODE='pc'
+
+VITE_APP_BUILD_BASE_URL='/tiny-vue-saas-web-doc/'
+VITE_PLAYGROUND_URL=/playground.html

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-docs",
   "type": "module",
-  "version": "3.26.7",
+  "version": "3.27.0",
   "license": "MIT",
   "dependencies": {
     "@docsearch/css": "^3.8.0",
@@ -27,24 +27,24 @@
     "vue-i18n": "~9.14.3",
     "vue-router": "4.1.5",
     "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-hooks": "~3.26.0",
-    "@opentiny/vue-flowchart": "~3.26.0",
-    "@opentiny/vue-huicharts": "~3.26.0",
-    "@opentiny/vue-icon-multicolor": "~3.26.0",
-    "@opentiny/vue-icon": "~3.26.0",
-    "@opentiny/vue-locale": "~3.26.0",
-    "@opentiny/vue-icon-saas": "~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.2"
+    "@opentiny/utils": "~3.27.0",
+    "@opentiny/vue-common": "~3.27.0",
+    "@opentiny/vue": "~3.27.0",
+    "@opentiny/vue-design-aurora": "~3.27.0",
+    "@opentiny/vue-design-saas": "~3.27.0",
+    "@opentiny/vue-design-smb": "~3.27.0",
+    "@opentiny/vue-directive": "~3.27.0",
+    "@opentiny/vue-flowchart": "~3.27.0",
+    "@opentiny/vue-hooks": "~3.27.0",
+    "@opentiny/vue-huicharts": "~3.27.0",
+    "@opentiny/vue-icon-multicolor": "~3.27.0",
+    "@opentiny/vue-locale": "~3.27.0",
+    "@opentiny/vue-icon-saas": "~3.27.0",
+    "@opentiny/vue-icon": "~3.27.0",
+    "@opentiny/vue-modal": "~3.27.0",
+    "@opentiny/vue-renderless": "~3.27.0",
+    "@opentiny/vue-theme": "~3.27.0",
+    "@opentiny/vue-theme-saas": "~3.27.0"
   },
   "devDependencies": {
     "@playwright/test": "~1.49.0",
@@ -99,6 +99,7 @@
     "build:saas:open": "vite build --mode saasopen",
     "build:saas:prod": "vite build --mode saasprod",
     "build": "vite build --mode pages && cp cp-component-md.sh ./dist",
+    "build:saas": "vite build --mode saaspages && cp cp-component-md.sh ./dist",
     "build:mobile:page": "vite build --mode mobilepages && cp cp-component-md.sh ./dist",
     "build:visualizer": "vite build --mode visualizer",
     "build:open": "vite build --mode open",

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.26'
+const VERSION = 'tiny-vue-version-3.27'
 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.26', '3.25', '3.24']
+const versions = ['3.27', '3.26', '3.25']
 const getVersion = () => {
   if (isPreview) {
     return versions[0]

package/src/App.vue

@@ -14,6 +14,7 @@
 import { onMounted, provide, ref } from 'vue'
 import { TinyConfigProvider, TinyModal } from '@opentiny/vue'
 import { iconClose } from '@opentiny/vue-icon'
+import { isSaas } from './const'
 
 import useTheme from './tools/useTheme'
 
@@ -24,7 +25,7 @@ const tinyIconClose = iconClose()
 onMounted(() => {
   // 加载header
   const common = new window.TDCommon(['#header'], {
-    allowDarkTheme: true,
+    allowDarkTheme: !isSaas,
     searchConfig: {
       show: true
     },

package/src/components/anchor.vue

@@ -1,39 +1,37 @@
 <template>
-  <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="theme === 'saas' ? 'line' : 'dot'"
-      container-id="#doc-layout-scroller"
-      @link-click="handleAnchorClick"
-    >
-    </tiny-anchor>
-  </div>
+  <tiny-anchor
+    id="anchor"
+    v-if="links.length"
+    :tiny_mode="isSaas ? 'pc' : 'mobile-first'"
+    :offset-top="56"
+    :links="links"
+    :is-affix="props.anchorAffix"
+    :type="isSaas ? 'line' : 'dot'"
+    container-id="#doc-layout-scroller"
+    @link-click="handleAnchorClick"
+  >
+  </tiny-anchor>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 import { TinyAnchor } from '@opentiny/vue'
+import { isSaas } from '../const'
 
 const props = defineProps({ anchorAffix: {}, currentJson: {}, activeTab: {}, langKey: {}, apiTypes: {} })
 
 const emit = defineEmits(['link-click'])
 
-const theme = import.meta.env.VITE_TINY_THEME
-
 // 实例锚点
-const demoAnchorLinks = computed(() => {
-  const links =
-    props.currentJson?.demos?.map((demo) => ({
+const demoAnchorLinks = computed(() =>
+  (props.currentJson?.demos || [])
+    .filter((demo) => (isSaas ? !demo.hideSaas : true))
+    .map((demo) => ({
       key: demo.demoId,
       title: demo.name[props.langKey],
       link: `#${demo.demoId}`
-    })) || []
-  return links
-})
+    }))
+)
 
 // 组件API锚点
 const apiAnchorLinks = computed(() => {
@@ -69,56 +67,4 @@ const handleAnchorClick = (...args) => {
 }
 </script>
 
-<style scoped lang="less">
-.cmp-page-anchor {
-  :deep(.tiny-anchor__affix) {
-    top: unset !important;
-    overflow-y: auto;
-    overflow-x: hidden;
-    max-height: calc(100vh - 300px);
-  }
-
-  :deep(.tiny-anchor-link) {
-    font-size: 12px;
-
-    a {
-      display: block;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-}
-
-.catalog {
-  flex: none;
-  width: 200px;
-  height: calc(100vh - 280px);
-  padding-top: 16px;
-  overflow: hidden;
-
-  .tiny-anchor__dot {
-    max-height: calc(100vh - 300px);
-    width: 200px;
-
-    :deep(.tiny-anchor) {
-      --ti-anchor-width: auto;
-      background-color: transparent;
-    }
-  }
-}
-
-.catalog:hover {
-  overflow-y: auto;
-}
-
-.catalog::-webkit-scrollbar {
-  width: 10px;
-  background-color: #f5f5f5;
-}
-
-.catalog::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  background-color: #c1c1c1;
-}
-</style>
+<style scoped lang="less"></style>

package/src/const.ts

@@ -1,5 +1,7 @@
 import { tinyOldTheme, tinyAuroraTheme, tinyDarkTheme } from '@opentiny/vue-theme/theme-tool'
 
+export const isSaas = import.meta.env.VITE_TINY_THEME === 'saas'
+
 // localStorage中保存语言的key
 export const LANG_KEY = '_lang'
 // localStorage中保存语言的value

package/src/main.js

@@ -20,7 +20,7 @@ import { i18n } from './i18n/index'
 import { router } from './router'
 import App from './App.vue'
 import { appData } from './tools'
-import { ZH_CN_LANG, EN_US_LANG, LANG_PATH_MAP, ES_LA_LANG, PT_BR_LANG } from './const'
+import { ZH_CN_LANG, EN_US_LANG, LANG_PATH_MAP, ES_LA_LANG, PT_BR_LANG, isSaas } from './const'
 import demoConfig from '@demos/config.js'
 
 import hljs from 'highlight.js/lib/core'
@@ -38,9 +38,6 @@ import { t } from '@opentiny/vue-locale'
 import { registerMcpConfig, customDesignConfig } from '@opentiny/vue-common'
 import { twMerge } from 'tailwind-merge'
 
-const envTarget = import.meta.env.VITE_BUILD_TARGET || 'open'
-const isSaas = import.meta.env.VITE_TINY_THEME === 'saas'
-
 // 适配层集成twMerge能力
 if (isSaas) {
   customDesignConfig.twMerge = twMerge
@@ -94,7 +91,7 @@ app.config.performance = true
 // 注入全局的saas主题变量
 app.config.globalProperties.tiny_theme = { value: import.meta.env.VITE_TINY_THEME }
 
-if (import.meta.env.VITE_TINY_THEME === 'saas') {
+if (isSaas) {
   import('./tailwind.css')
 }
 // 注册TinyVue组件mcp配置

package/src/menus.js

@@ -1,5 +1,6 @@
 import { docMenus, cmpMenus } from '@menu/menus.js'
 import { appData, $split } from './tools'
+import { isSaas } from './const'
 
 /**
  * 聚合doc  / cmp 两个页面的所有菜单.
@@ -27,7 +28,7 @@ function genMenus() {
   ]
 
   // 使用指南只在DEV下生效
-  const isShowDoc = import.meta.env.DEV || import.meta.env.VITE_TINY_THEME === 'saas'
+  const isShowDoc = import.meta.env.DEV || isSaas
   const docOptions = isShowDoc
     ? docMenus.map((menu) => ({
         ...menu,

package/src/tools/docsearch.js

@@ -1,5 +1,6 @@
+import { isSaas } from '../const'
+
 const OPEN_TINY_URL = 'https://opentiny.design'
-const isSaas = import.meta.env.VITE_TINY_THEME === 'saas'
 
 export const doSearchEverySite = () => {
   window.handleGlobalSearchData = (resolve) => {
@@ -9,7 +10,7 @@ export const doSearchEverySite = () => {
       }
 
       if (isSaas) {
-        data.content = data.content.replaceAll('/tiny-vue/', '/tiny-vue-saas/')
+        data.content = data.content.replace('/tiny-vue/', '/tiny-vue-saas/')
       }
 
       resolve(data)

package/src/tools/useTemplateMode.js

@@ -3,11 +3,12 @@ import { router } from '@/router.js'
 import { getAllComponents } from '@/menus'
 import demoConfig from '@demos/config.js'
 import { staticDemoPath } from '../views/components-doc/cmp-config'
+import { isSaas } from '../const'
 
 const allMenus = getAllComponents()
 
 const templateModeState = reactive({
-  isSaas: import.meta.env.VITE_TINY_THEME === 'saas',
+  isSaas,
   modeList: [],
   mode: null
 })

package/src/tools/useTheme.js

@@ -4,7 +4,7 @@ import designSaasConfig from '@opentiny/vue-design-saas'
 import designSMBConfig from '@opentiny/vue-design-smb'
 import { router } from '@/router'
 import { appData } from './appData'
-import { CURRENT_THEME_KEY, DEFAULT_THEME, AURORA_THEME, OLD_THEME, themeToolValuesMap } from '../const'
+import { CURRENT_THEME_KEY, DEFAULT_THEME, AURORA_THEME, OLD_THEME, themeToolValuesMap, isSaas } from '../const'
 import glaciers from '@/assets/images/glaciers.png'
 import glaciersIcon from '@/assets/images/glaciers-icon.png'
 
@@ -51,7 +51,7 @@ watch(
 )
 
 const designConfig = computed(() => {
-  if (import.meta.env.VITE_TINY_THEME === 'saas') {
+  if (isSaas) {
     return designSaasConfig
   }
   if (router.currentRoute.value.params.theme === 'smb-theme') {

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

@@ -1,6 +1,7 @@
+import { isSaas } from '../../const'
+
 // 批量导入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)

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

@@ -75,16 +75,18 @@
         </div>
 
         <!-- demo与api目录锚点 -->
-        <aside-anchor
-          v-if="state.activeTab === 'demos' || state.activeTab === 'api'"
-          :active-tab="state.activeTab"
-          :current-json="state.currJson"
-          :anchor-affix="state.anchorAffix"
-          :api-types="state.currApiTypes"
-          :lang-key="state.langKey"
-          :key="anchorRefreshKey"
-          @link-click="handleAnchorClick"
-        ></aside-anchor>
+        <div class="cmp-page-anchor catalog">
+          <aside-anchor
+            v-if="state.activeTab === 'demos' || state.activeTab === 'api'"
+            :active-tab="state.activeTab"
+            :current-json="state.currJson"
+            :anchor-affix="state.anchorAffix"
+            :api-types="state.currApiTypes"
+            :lang-key="state.langKey"
+            :key="anchorRefreshKey"
+            @link-click="handleAnchorClick"
+          ></aside-anchor>
+        </div>
       </div>
 
       <div v-if="state.currJson.owner" class="ti-abs ti-right24 ti-top24" @click="copyText(state.currJson.owner)">
@@ -112,6 +114,7 @@ import DesignToken from '../../components/design-token.vue'
 import McpDocs from '../../components/mcp-docs.vue'
 import useTasksFinish from '../../composable/useTasksFinish'
 import list from '@opentiny/vue-theme/token'
+import { isSaas } from '../../const'
 import { getTinyVueMcpConfig } from '@opentiny/tiny-vue-mcp'
 import { camelize, capitalize } from '@vue/shared'
 
@@ -205,7 +208,7 @@ const parseApiData = () => {
     for (const apiType of Object.keys(apiGroup)) {
       if (Array.isArray(apiGroup[apiType]) && apiGroup[apiType].length) {
         const apiArr = apiGroup[apiType].map((i) => {
-          const { name, type, defaultValue, desc, demoId, typeAnchorName, linkTo, meta, versionTipOption } = i
+          const { name, type, defaultValue, desc, demoId, typeAnchorName, linkTo, meta, versionTipOption, hideSaas } = i
           const item = {
             name,
             type,
@@ -215,7 +218,8 @@ const parseApiData = () => {
             meta,
             versionTipOption,
             typeAnchorName: '',
-            linkTo
+            linkTo,
+            hideSaas
           }
           if (typeAnchorName) {
             item.typeAnchorName = `${typeAnchorName?.includes('#') ? '' : '#'}${typeAnchorName}`
@@ -231,6 +235,15 @@ const parseApiData = () => {
 
     tableData[apiGroup.name] = apiDisplay
   }
+
+  // 当环境变量为tiny-vue-saas时
+  if (isSaas) {
+    for (const group of Object.keys(tableData)) {
+      for (const apiType of Object.keys(tableData[group])) {
+        tableData[group][apiType] = tableData[group][apiType].filter((item) => !item.hideSaas)
+      }
+    }
+  }
   state.tableData = tableData
 }
 
@@ -526,6 +539,57 @@ defineExpose({ loadPage })
       overflow: visible;
     }
   }
+  .cmp-page-anchor {
+    :deep(.tiny-anchor__affix) {
+      top: unset !important;
+      overflow-y: auto;
+      overflow-x: hidden;
+      max-height: calc(100vh - 300px);
+    }
+
+    :deep(.tiny-anchor-link) {
+      font-size: 12px;
+
+      a {
+        display: block;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  .catalog {
+    flex: none;
+    width: 200px;
+    height: calc(100vh - 280px);
+    padding-top: 16px;
+    overflow: hidden;
+
+    .tiny-anchor__dot {
+      max-height: calc(100vh - 300px);
+      width: 200px;
+
+      :deep(.tiny-anchor) {
+        --ti-anchor-width: auto;
+        background-color: transparent;
+      }
+    }
+  }
+
+  .catalog:hover {
+    overflow-y: auto;
+  }
+
+  .catalog::-webkit-scrollbar {
+    width: 10px;
+    background-color: #f5f5f5;
+  }
+
+  .catalog::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: #c1c1c1;
+  }
 }
 
 .one-demo-col2 {