diff --git a/examples/sites/demos/pc/app/credit-card-form/webdoc/credit-card-form.js b/examples/sites/demos/pc/app/credit-card-form/webdoc/credit-card-form.js
index ca7fc77f4..c1732536d 100644
--- a/examples/sites/demos/pc/app/credit-card-form/webdoc/credit-card-form.js
+++ b/examples/sites/demos/pc/app/credit-card-form/webdoc/credit-card-form.js
@@ -1,6 +1,10 @@
 export default {
   column: '2',
   owner: '',
+  metaData: {
+    deprecated: '3.12.0',
+    removed: '3.15.0'
+  },
   demos: [
     {
       'demoId': 'basic-usage',
diff --git a/examples/sites/demos/pc/app/qr-code/webdoc/qr-code.js b/examples/sites/demos/pc/app/qr-code/webdoc/qr-code.js
index 421239e02..039428f9b 100644
--- a/examples/sites/demos/pc/app/qr-code/webdoc/qr-code.js
+++ b/examples/sites/demos/pc/app/qr-code/webdoc/qr-code.js
@@ -1,6 +1,12 @@
 export default {
   column: '2',
   owner: '',
+  metaData: {
+    stable: '3.12.0'
+  },
+  versionTipOption: {
+    stages: ['stable']
+  },
   demos: [
     {
       'demoId': 'basic-usage',
diff --git a/examples/sites/demos/pc/app/rich-text-editor/webdoc/rich-text-editor.js b/examples/sites/demos/pc/app/rich-text-editor/webdoc/rich-text-editor.js
index ed1cad0ce..08228e272 100644
--- a/examples/sites/demos/pc/app/rich-text-editor/webdoc/rich-text-editor.js
+++ b/examples/sites/demos/pc/app/rich-text-editor/webdoc/rich-text-editor.js
@@ -1,6 +1,9 @@
 export default {
   column: '1',
   owner: '',
+  metaData: {
+    experimental: '3.11.0'
+  },
   demos: [
     {
       'demoId': 'basic-usage',
diff --git a/examples/sites/demos/pc/app/slide-bar/webdoc/slide-bar.js b/examples/sites/demos/pc/app/slide-bar/webdoc/slide-bar.js
index a240b38cc..e4d6b5c48 100644
--- a/examples/sites/demos/pc/app/slide-bar/webdoc/slide-bar.js
+++ b/examples/sites/demos/pc/app/slide-bar/webdoc/slide-bar.js
@@ -1,6 +1,10 @@
 export default {
   column: '2',
   owner: '',
+  metaData: {
+    deprecated: '3.12.0',
+    removed: '3.15.0'
+  },
   demos: [
     {
       'demoId': 'basic-usage',
diff --git a/examples/sites/demos/pc/app/watermark/webdoc/watermark.js b/examples/sites/demos/pc/app/watermark/webdoc/watermark.js
index 6a983ef48..16fc592d5 100644
--- a/examples/sites/demos/pc/app/watermark/webdoc/watermark.js
+++ b/examples/sites/demos/pc/app/watermark/webdoc/watermark.js
@@ -1,6 +1,12 @@
 export default {
   column: '2',
   owner: '',
+  metaData: {
+    stable: '3.12.0'
+  },
+  versionTipOption: {
+    stages: ['stable']
+  },
   demos: [
     {
       'demoId': 'basic',
diff --git a/examples/sites/demos/pc/menus.js b/examples/sites/demos/pc/menus.js
index cf4f7327a..43e63358d 100644
--- a/examples/sites/demos/pc/menus.js
+++ b/examples/sites/demos/pc/menus.js
@@ -103,7 +103,15 @@ export const cmpMenus = [
       { 'nameCn': '弹出编辑', 'name': 'PopEditor', 'key': 'popeditor' },
       { 'nameCn': '弹出框上传', 'name': 'PopUpload', 'key': 'pop-upload' },
       { 'nameCn': '单选框', 'name': 'Radio', 'key': 'radio' },
-      { 'nameCn': '富文本', 'name': 'RichTextEditor', 'key': 'rich-text-editor' },
+      {
+        'nameCn': '富文本',
+        'name': 'RichTextEditor',
+        'key': 'rich-text-editor',
+        'mark': {
+          'type': 'warning',
+          'text': 'Bate'
+        }
+      },
       { 'nameCn': '搜索', 'name': 'Search', 'key': 'search' },
       { 'nameCn': '选择器', 'name': 'Select', 'key': 'select' },
       { 'nameCn': '滑块', 'name': 'Slider', 'key': 'slider' },
@@ -226,13 +234,29 @@ export const cmpMenus = [
       { 'nameCn': '公告牌', 'name': 'BulletinBoard', 'key': 'bulletin-board' },
       { 'nameCn': '日历', 'name': 'Calendar', 'key': 'calendar' },
       { 'nameCn': '日历视图', 'name': 'CalendarView', 'key': 'calendar-view' },
-      { 'nameCn': '信用卡表单', 'name': 'CreditCardForm', 'key': 'credit-card-form' },
+      {
+        'nameCn': '信用卡表单',
+        'name': 'CreditCardForm',
+        'key': 'credit-card-form',
+        'mark': {
+          'type': 'danger',
+          'text': 'Del'
+        }
+      },
       { 'nameCn': '图片裁剪', 'name': 'Crop', 'key': 'crop' },
       { 'nameCn': '表头详情栏', 'name': 'DetailPage', 'key': 'detail-page' },
       { 'nameCn': '图片预览', 'name': 'Image', 'key': 'image' },
       { 'nameCn': '评分', 'name': 'Rate', 'key': 'rate' },
       { 'nameCn': '文字滚动', 'name': 'ScrollText', 'key': 'scroll-text' },
-      { 'nameCn': '滚动块', 'name': 'SlideBar', 'key': 'slide-bar' },
+      {
+        'nameCn': '滚动块',
+        'name': 'SlideBar',
+        'key': 'slide-bar',
+        'mark': {
+          'type': 'danger',
+          'text': 'Del'
+        }
+      },
       { 'nameCn': '标签', 'name': 'Tag', 'key': 'tag' },
       { 'nameCn': '标签组', 'name': 'TagGroup', 'key': 'tag-group' },
       { 'nameCn': '输入框', 'name': 'TextPopup', 'key': 'text-popup' },
@@ -241,8 +265,22 @@ export const cmpMenus = [
       { 'nameCn': '全屏显示', 'name': 'Fullscreen', 'key': 'fullscreen' },
       { 'nameCn': '全局设置', 'name': 'ConfigProvider', 'key': 'config-provider' },
       { 'nameCn': '分割线', 'name': 'Divider', 'key': 'divider' },
-      { 'nameCn': '二维码', 'name': 'QrCode', 'key': 'qr-code' },
-      { 'nameCn': '水印', 'name': 'Watermark', 'key': 'watermark' }
+      {
+        'nameCn': '二维码',
+        'name': 'QrCode',
+        'key': 'qr-code',
+        'mark': {
+          'text': 'New'
+        }
+      },
+      {
+        'nameCn': '水印',
+        'name': 'Watermark',
+        'key': 'watermark',
+        'mark': {
+          'text': 'New'
+        }
+      }
     ]
   }
 ]
diff --git a/examples/sites/src/views/components/VersionTip.vue b/examples/sites/src/views/components/VersionTip.vue
index 9188d1e35..ee80cc783 100644
--- a/examples/sites/src/views/components/VersionTip.vue
+++ b/examples/sites/src/views/components/VersionTip.vue
@@ -136,11 +136,14 @@ export default defineComponent({
         return props.briefStage
       }
 
-      return [STAGE.deprecated, STAGE.experimental].find(isInStage)
+      return [STAGE.removed, STAGE.deprecated, STAGE.stable, STAGE.experimental].find(isInStage)
     })
 
     const generateDes = (desMap: typeof cnDesMap) => {
-      const isFilterExperimental = isInStage(STAGE.deprecated) || isInStage(STAGE.stable)
+      // 当前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 goingStages = Object.entries(desMap).filter(([stage]) => {
         let isPicked = isInStage(stage as STAGE)
@@ -149,6 +152,10 @@ export default defineComponent({
           isPicked = isPicked && !isFilterExperimental
         }
 
+        if (stage === STAGE.stable) {
+          isPicked = isPicked && !isFilterStable
+        }
+
         return isPicked
       })