fix(docs): 修复opentiny/vue-docs包3.18版本无法使用meta标记的问题 (#2473)

examples/sites/demos/apis/button-group.js

@@ -181,8 +181,8 @@ export default {
             'zh-CN': '自定义数据为空时展示内容',
             'en-US': 'customize content when data is empty'
           },
-          metaData: {
-            new: '3.17.0'
+          meta: {
+            stable: '3.17.0'
           },
           mode: ['pc'],
           pcDemo: 'slot-empty'

examples/sites/demos/apis/dialog-select.js

@@ -442,8 +442,8 @@ export default {
             'zh-CN': '自定义弹窗底部按钮',
             'en-US': 'Custom Pop Up Bottom buttons'
           },
-          metaData: {
-            new: '3.18.0'
+          meta: {
+            stable: '3.18.0'
           },
           mode: ['pc'],
           pcDemo: ''

examples/sites/demos/apis/dropdown.js

@@ -241,7 +241,7 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'lazy-show-popper',
           mfDemo: '',
-          metaData: {
+          meta: {
             experimental: '3.18.0'
           }
         }

examples/sites/demos/apis/grid.js

@@ -147,8 +147,8 @@ export default {
           name: 'custom-column-names',
           type: 'string[]',
           defaultValue: "['TinyGridColumn']",
-          metaData: {
-            new: '3.17.0'
+          meta: {
+            stable: '3.17.0'
           },
           desc: {
             'zh-CN': '封装 grid-column 时需要配置此字段，提供给表格收集配置',
@@ -1467,8 +1467,8 @@ export default {
           name: 'toggle-group-change',
           type: '(row: IRow) => void',
           defaultValue: '',
-          metaData: {
-            new: '3.17.0'
+          meta: {
+            stable: '3.17.0'
           },
           desc: {
             'zh-CN': '当分组的展开和收起时会触发该事件',

examples/sites/demos/apis/input.js

@@ -400,8 +400,8 @@ export default {
           name: 'show-tooltip',
           type: 'boolean',
           defaultValue: 'true',
-          metaData: {
-            new: '3.18.0'
+          meta: {
+            stable: '3.18.0'
           },
           desc: {
             'zh-CN': '只读状态下，文本超出是否悬浮提示',

examples/sites/demos/apis/pager.js

@@ -247,8 +247,8 @@ export default {
           name: 'total-fixed-left',
           type: 'boolean',
           defaultValue: 'false',
-          metaData: {
-            new: '3.18.0'
+          meta: {
+            stable: '3.18.0'
           },
           desc: {
             'zh-CN': '总条目数是否固定在左侧，Aurora、SMB主题默认值为 true',

examples/sites/demos/apis/pop-upload.js

@@ -297,8 +297,8 @@ export default {
             'zh-CN': '自定义上传提示内容',
             'en-US': 'Customize upload prompt content'
           },
-          metaData: {
-            new: '3.18.0'
+          meta: {
+            stable: '3.18.0'
           },
           mode: ['pc'],
           pcDemo: 'upload-tip'

examples/sites/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "3.18.5",
+  "version": "3.18.6",
   "license": "MIT",
   "scripts": {
     "start": "vite",
@@ -86,4 +86,4 @@
     "vite-svg-loader": "^3.6.0",
     "vue-tsc": "^1.8.5"
   }
-}
+}

examples/sites/src/views/components/VersionTip.vue

@@ -1,7 +1,7 @@
 <template>
   <span v-if="currentStageComputed" class="version-tip">
     <div v-if="renderType === 'alert'">
-      <tiny-alert :type="alertTypeComputed" :closable="false">
+      <tiny-alert :type="alertTypeComputed" v-if="!isStableComputed" :closable="false">
         <template #description>
           <span>{{ tipComputed }}</span>
         </template>
@@ -15,7 +15,7 @@
         :content="tipComputed"
         :disabled="!tipComputed"
       >
-        <tiny-tag size="mini" effect="dark" :type="tagTypeComputed">{{ currentStageComputed }}</tiny-tag>
+        <tiny-tag size="small" effect="dark" :type="tagTypeComputed">{{ tagContentComputed }}</tiny-tag>
       </tiny-tooltip>
     </span>
   </span>
@@ -28,11 +28,14 @@ import { Tag as TinyTag, Alert as TinyAlert, Tooltip as TinyTooltip } from '@ope
 import { getWord } from '../../i18n/index'
 
 enum STAGE {
+  // 实验性阶段（api属性不具备此阶段）
   experimental = 'experimental',
+  // 稳定阶段
   stable = 'stable',
+  // 弃用阶段
   deprecated = 'deprecated',
-  removed = 'removed',
-  new = 'new'
+  // 将要被移除阶段
+  toBeRemoved = 'toBeRemoved'
 }
 
 interface IStageVersionMetaData {
@@ -43,54 +46,54 @@ interface IVersionMetaData {
   [STAGE.experimental]?: IStageVersionMetaData | string
   [STAGE.stable]?: IStageVersionMetaData | string
   [STAGE.deprecated]?: IStageVersionMetaData | string
-  [STAGE.removed]?: IStageVersionMetaData | string
+  [STAGE.toBeRemoved]?: IStageVersionMetaData | string
 }
 
 interface Ii18nString {
   'zh-CN': string
   'en-US': string
 }
 
+// 生命周期的顺序 实验 --> 稳定 --> 弃用 --> 移除
+const lifeCycleOrder = [STAGE.experimental, STAGE.stable, STAGE.deprecated, STAGE.toBeRemoved]
+
 const alertTypeMap = {
-  [STAGE.removed]: 'error',
+  [STAGE.toBeRemoved]: 'error',
   [STAGE.deprecated]: 'error',
   [STAGE.experimental]: 'warning',
-  [STAGE.stable]: 'info'
+  [STAGE.stable]: 'success'
 }
 
 const tagTypeMap = {
-  [STAGE.removed]: 'danger',
+  [STAGE.toBeRemoved]: 'danger',
   [STAGE.deprecated]: 'danger',
   [STAGE.experimental]: 'warning',
-  [STAGE.stable]: 'info',
-  [STAGE.new]: 'primary'
+  [STAGE.stable]: 'success'
 }
 
 const cnDesMap = {
   [STAGE.experimental]: '处于测试阶段',
   [STAGE.stable]: '自 v{version} 起稳定提供',
   [STAGE.deprecated]: '从 v{version} 开始被废弃',
-  [STAGE.removed]: '于 v{version} 移除',
-  [STAGE.new]: '于 v{version} 新增'
+  [STAGE.toBeRemoved]: '于 v{version} 移除'
 }
 
 const enDesMap = {
   [STAGE.experimental]: 'in beta',
   [STAGE.stable]: 'stable since v{version}',
   [STAGE.deprecated]: 'deprecated since v{version}',
-  [STAGE.removed]: 'removed in v{version}',
-  [STAGE.new]: 'add in v{version}'
+  [STAGE.toBeRemoved]: 'toBeRemoved in v{version}'
 }
 
-// 默认的，只需要显示deprecated，experimental状态时的提示，除非声明了briefStage
+// 默认的，只需要显示deprecated，experimental状态时的提示
 export default defineComponent({
   components: {
     TinyTag,
     TinyAlert,
     TinyTooltip
   },
   props: {
-    metaData: {
+    meta: {
       type: Object as PropType<IVersionMetaData>,
       default: () => ({})
     },
@@ -102,76 +105,73 @@ export default defineComponent({
       type: String as PropType<'component' | 'api'>,
       default: 'component'
     },
-    stages: {
-      type: Array as PropType<STAGE[]>,
-      default: () => [STAGE.experimental, STAGE.deprecated, STAGE.removed, STAGE.new]
-    },
     alertType: {
       type: String
     },
     tagType: {
       type: String
     },
-    briefStage: {
-      type: Object as PropType<STAGE>
-    },
     tip: {
       type: Object as PropType<Ii18nString>
     },
     extendTip: {
       type: Object as PropType<Ii18nString>
+    },
+    isFromMenu: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props) {
-    const isInStage = (stage: STAGE) => Boolean(props.metaData[stage]) && props.stages.includes(stage)
-
     const getVersion = (stage: STAGE) => {
-      if (!props.metaData[stage]) return ''
+      if (!props.meta[stage]) return ''
 
-      if (typeof props.metaData[stage] === 'string') {
-        return props.metaData[stage] as string
+      if (typeof props.meta[stage] === 'string') {
+        return props.meta[stage] as string
       } else {
-        return (props.metaData[stage] as IStageVersionMetaData).version
+        return (props.meta[stage] as IStageVersionMetaData).version
       }
     }
 
-    const currentStageComputed = computed(() => {
-      if (props.briefStage) {
-        return props.briefStage
-      }
+    const currentStageComputed = computed(() =>
+      lifeCycleOrder
+        .slice(0, -1)
+        .toReversed()
+        .find((stage) => Boolean(props.meta[stage]))
+    )
 
-      return [STAGE.removed, STAGE.deprecated, STAGE.stable, STAGE.experimental, STAGE.new].find(isInStage)
-    })
+    // 是否为稳定阶段
+    const isStableComputed = computed(() => currentStageComputed.value === STAGE.stable)
 
     const generateDes = (desMap: typeof cnDesMap) => {
-      // 当前stable之后，不显示experimental的描述
-      const isFilterExperimental = [STAGE.removed, STAGE.deprecated, STAGE.stable].includes(
-        currentStageComputed.value as STAGE
-      )
-      // 当前deprecated之后，不显示stable的描述
-      const isFilterStable = [STAGE.removed, STAGE.deprecated].includes(currentStageComputed.value as STAGE)
+      const currentStage = currentStageComputed.value
+      const deprecatedList = lifeCycleOrder.slice(2)
 
       const goingStages = Object.entries(desMap).filter(([stage]) => {
-        let isPicked = isInStage(stage as STAGE)
-
-        if (stage === STAGE.experimental) {
-          isPicked = isPicked && !isFilterExperimental
+        if (deprecatedList.includes(currentStage)) {
+          return deprecatedList.includes(stage)
+        } else {
+          return stage === currentStage
         }
-
-        if (stage === STAGE.stable) {
-          isPicked = isPicked && !isFilterStable
-        }
-
-        return isPicked
       })
 
       return goingStages.map(([stage, des]) => des.replace('{version}', getVersion(stage as STAGE))).join('，')
     }
 
+    const tagContentComputed = computed(() => {
+      const result = isStableComputed.value ? props.meta[currentStageComputed.value] : currentStageComputed.value
+      // 菜单上需要显示Beta标识，防止占用过多文字空间
+      if (props.isFromMenu && result === STAGE.experimental) {
+        return 'Beta'
+      } else {
+        return result
+      }
+    })
+
     const tipComputed = computed(() => {
       if (props.tip) return getWord(props.tip['zh-CN'], props.tip['en-US']) as string
 
-      if (!props.metaData) return ''
+      if (!props.meta) return ''
 
       const vertionDesZnCn = generateDes(cnDesMap)
       const znChTip = `该${props.tipSubject === 'component' ? '组件' : '特性'}${vertionDesZnCn}。${
@@ -202,7 +202,9 @@ export default defineComponent({
       tipComputed,
       currentStageComputed,
       alertTypeComputed,
-      tagTypeComputed
+      tagTypeComputed,
+      tagContentComputed,
+      isStableComputed
     }
   }
 })