From a67e83e83bcd43362e22b668c395211c63931fc7 Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Wed, 15 Jan 2025 15:27:03 +0800
Subject: [PATCH 01/15] fix: init mobile site refactor

---
 examples/sites/demos/mobile/app/button/base.vue             | 2 +-
 examples/sites/demos/mobile/app/button/disabled.vue         | 2 +-
 examples/sites/demos/mobile/app/button/event.vue            | 2 +-
 examples/sites/demos/mobile/app/button/loading.vue          | 2 +-
 examples/sites/demos/mobile/app/button/reset-time.vue       | 2 +-
 examples/sites/demos/mobile/app/button/size.vue             | 2 +-
 examples/sites/demos/mobile/app/input/textarea-scalable.vue | 2 +-
 examples/sites/demos/mobile/app/input/type.vue              | 2 +-
 examples/sites/demos/mobile/app/list/imformation-list.vue   | 2 +-
 examples/sites/demos/mobile/app/radio/base.vue              | 2 +-
 examples/sites/demos/mobile/app/radio/disabled.vue          | 2 +-
 examples/sites/demos/mobile/app/radio/event.vue             | 2 +-
 examples/sites/demos/mobile/app/radio/label.vue             | 2 +-
 examples/sites/src/views/components/components.vue          | 5 +++++
 14 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/examples/sites/demos/mobile/app/button/base.vue b/examples/sites/demos/mobile/app/button/base.vue
index c170154d35..14c188b369 100644
--- a/examples/sites/demos/mobile/app/button/base.vue
+++ b/examples/sites/demos/mobile/app/button/base.vue
@@ -32,7 +32,7 @@ body {
 }
 .button-wrap {
   padding: 0 10px;
-  overflow-y: scroll;
+  overflow-y: auto;
   height: 100%;
 }
 .button-wrap .tiny-mobile-button {
diff --git a/examples/sites/demos/mobile/app/button/disabled.vue b/examples/sites/demos/mobile/app/button/disabled.vue
index f88f442704..b2134e164c 100644
--- a/examples/sites/demos/mobile/app/button/disabled.vue
+++ b/examples/sites/demos/mobile/app/button/disabled.vue
@@ -32,7 +32,7 @@ body {
 }
 .button-wrap {
   padding: 0 10px;
-  overflow-y: scroll;
+  overflow-y: auto;
   height: 100%;
 }
 .button-wrap .tiny-mobile-button {
diff --git a/examples/sites/demos/mobile/app/button/event.vue b/examples/sites/demos/mobile/app/button/event.vue
index ca2a63f6d0..761c8bdf51 100644
--- a/examples/sites/demos/mobile/app/button/event.vue
+++ b/examples/sites/demos/mobile/app/button/event.vue
@@ -36,7 +36,7 @@ body {
 }
 .button-wrap {
   padding: 0 10px;
-  overflow-y: scroll;
+  overflow-y: auto;
   height: 100%;
 }
 .button-wrap .tiny-mobile-button {
diff --git a/examples/sites/demos/mobile/app/button/loading.vue b/examples/sites/demos/mobile/app/button/loading.vue
index 04994cf1ef..f32fcba114 100644
--- a/examples/sites/demos/mobile/app/button/loading.vue
+++ b/examples/sites/demos/mobile/app/button/loading.vue
@@ -35,7 +35,7 @@ body {
 }
 .button-wrap {
   padding: 0 10px;
-  overflow-y: scroll;
+  overflow-y: auto;
   height: 100%;
 }
 .button-wrap .tiny-mobile-button {
diff --git a/examples/sites/demos/mobile/app/button/reset-time.vue b/examples/sites/demos/mobile/app/button/reset-time.vue
index e9ab306156..4651d8710c 100644
--- a/examples/sites/demos/mobile/app/button/reset-time.vue
+++ b/examples/sites/demos/mobile/app/button/reset-time.vue
@@ -21,7 +21,7 @@ body {
 }
 .button-wrap {
   padding: 0 10px;
-  overflow-y: scroll;
+  overflow-y: auto;
   height: 100%;
 }
 .button-wrap .tiny-mobile-button {
diff --git a/examples/sites/demos/mobile/app/button/size.vue b/examples/sites/demos/mobile/app/button/size.vue
index 7b987faaa3..457f682f2a 100644
--- a/examples/sites/demos/mobile/app/button/size.vue
+++ b/examples/sites/demos/mobile/app/button/size.vue
@@ -43,7 +43,7 @@ body {
 }
 .button-wrap {
   padding: 0 10px;
-  overflow-y: scroll;
+  overflow-y: auto;
   height: 100%;
 }
 .button-wrap .tiny-mobile-button {
diff --git a/examples/sites/demos/mobile/app/input/textarea-scalable.vue b/examples/sites/demos/mobile/app/input/textarea-scalable.vue
index b37d9fde4e..32ae5ecedd 100644
--- a/examples/sites/demos/mobile/app/input/textarea-scalable.vue
+++ b/examples/sites/demos/mobile/app/input/textarea-scalable.vue
@@ -42,7 +42,7 @@ export default {
   height: 100%;
   padding: 20px 16px;
   background: #f5f5f5;
-  overflow-y: scroll;
+  overflow-y: auto;
   box-sizing: border-box;
 }
 
diff --git a/examples/sites/demos/mobile/app/input/type.vue b/examples/sites/demos/mobile/app/input/type.vue
index 5748709fce..be296a33fa 100644
--- a/examples/sites/demos/mobile/app/input/type.vue
+++ b/examples/sites/demos/mobile/app/input/type.vue
@@ -49,7 +49,7 @@ export default {
   height: 100%;
   padding: 20px 16px;
   box-sizing: border-box;
-  overflow-y: scroll;
+  overflow-y: auto;
   background: #f5f5f5;
 }
 
diff --git a/examples/sites/demos/mobile/app/list/imformation-list.vue b/examples/sites/demos/mobile/app/list/imformation-list.vue
index 7b248ae145..584911a8b1 100644
--- a/examples/sites/demos/mobile/app/list/imformation-list.vue
+++ b/examples/sites/demos/mobile/app/list/imformation-list.vue
@@ -164,7 +164,7 @@ export default {
 .demo {
   background: #eeeeee;
   height: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 .widthAll {
   width: 100%;
diff --git a/examples/sites/demos/mobile/app/radio/base.vue b/examples/sites/demos/mobile/app/radio/base.vue
index 9b7c75f2c0..0b3763c4af 100644
--- a/examples/sites/demos/mobile/app/radio/base.vue
+++ b/examples/sites/demos/mobile/app/radio/base.vue
@@ -23,7 +23,7 @@ export default {
 <style>
 .demo {
   height: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
   padding: 20px;
 }
 </style>
diff --git a/examples/sites/demos/mobile/app/radio/disabled.vue b/examples/sites/demos/mobile/app/radio/disabled.vue
index 28daebcf37..8dc04a408d 100644
--- a/examples/sites/demos/mobile/app/radio/disabled.vue
+++ b/examples/sites/demos/mobile/app/radio/disabled.vue
@@ -24,7 +24,7 @@ export default {
 <style>
 .demo {
   height: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
   padding: 20px;
 }
 </style>
diff --git a/examples/sites/demos/mobile/app/radio/event.vue b/examples/sites/demos/mobile/app/radio/event.vue
index eef9d5dfdf..e31f7fae15 100644
--- a/examples/sites/demos/mobile/app/radio/event.vue
+++ b/examples/sites/demos/mobile/app/radio/event.vue
@@ -31,7 +31,7 @@ export default {
 <style>
 .demo {
   height: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
   padding: 20px;
 }
 </style>
diff --git a/examples/sites/demos/mobile/app/radio/label.vue b/examples/sites/demos/mobile/app/radio/label.vue
index 9406d23974..df1239df5e 100644
--- a/examples/sites/demos/mobile/app/radio/label.vue
+++ b/examples/sites/demos/mobile/app/radio/label.vue
@@ -24,7 +24,7 @@ export default {
 <style>
 .demo {
   height: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
   padding: 20px;
 }
 </style>
diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index 0aa4d714f4..eb7f4793c5 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -176,6 +176,9 @@
         {{ i18nByKey('doc-owner') }} : {{ currJson.owner }}
       </div>
     </div>
+    <div style="width: 300px; height: 500px">
+      <iframe width="100%" height="100%" :src="mobilePreviewUrl" frameborder="0"></iframe>
+    </div>
     <div id="footer"></div>
   </div>
 </template>
@@ -705,9 +708,11 @@ export default defineComponent({
 
     const hasKey = (apiArr, key) => !apiArr.every((item) => item[key] === undefined)
 
+    const mobilePreviewUrl = `${import.meta.env.VITE_MOBILE_URL}?component=button&demo=base.vue`
     return {
       ...toRefs(state),
       ...fn,
+      mobilePreviewUrl,
       i18nByKey,
       anchorRefreshKey,
       apiModeState,

From 794839b7b1e2f09354ea673adb7bf880ac110a9a Mon Sep 17 00:00:00 2001
From: James-9696 <hujm969696@163.com>
Date: Thu, 16 Jan 2025 00:21:43 -0800
Subject: [PATCH 02/15] fix: modify demo file

---
 examples/sites/src/views/components/demo.vue | 387 +++++++++----------
 1 file changed, 180 insertions(+), 207 deletions(-)

diff --git a/examples/sites/src/views/components/demo.vue b/examples/sites/src/views/components/demo.vue
index 919fcc557d..da5532ee6f 100644
--- a/examples/sites/src/views/components/demo.vue
+++ b/examples/sites/src/views/components/demo.vue
@@ -8,17 +8,17 @@
       <div class="demo-content">
         <!-- DEMO 的标题 + 说明desc + 示例wcTag -->
         <div class="ti-f-r ti-f-pos-between ti-f-box-end">
-          <h2 class="demo-title">{{ demo.name[langKey] }}</h2>
+          <h2 class="demo-title">{{ demo.name[state.langKey] }}</h2>
           <div class="demo-options">
             <tiny-tooltip
               placement="top"
               effect="light"
               popper-class="docs-tooltip"
               :append-to-body="false"
-              :content="copyTip"
+              :content="state.copyTip"
             >
               <i
-                :class="copyIcon"
+                :class="state.copyIcon"
                 class="h:c-success ti-w16 ti-h16 ti-cur-hand"
                 @click="copyCode(demo)"
                 @mouseout="resetTip()"
@@ -53,12 +53,9 @@
         <div v-if="isMobileFirst" class="pc-demo-container">
           <tiny-button @click="openPlayground(demo, false)">多端预览</tiny-button>
         </div>
-        <div v-else-if="demoConfig.isMobile" class="phone-container-flex">
-          <div class="mobile-view-btn">
-            <tiny-button>{{ i18nByKey('yan-shi') }}</tiny-button>
-          </div>
-          <div class="mobile-view-container phone-container">
-            <!-- 移动端展示内容 -->
+        <div v-else-if="demoConfig.isMobile" class="phone-container">
+          <div class="mobile-view-container">
+            <component :is="cmp" />
           </div>
         </div>
         <div v-else class="pc-demo-container">
@@ -70,7 +67,7 @@
       <!-- demo 打开后的示例代码  细滚动时，width:fit-content; -->
       <div v-if="demo.isOpen" class="ti-px24 ti-py20 ti-b-t-lightless demo-code">
         <template v-if="files?.length">
-          <tiny-tabs v-model="tabValue" class="code-tabs">
+          <tiny-tabs v-model="state.tabValue" class="code-tabs">
             <tiny-tab-item v-for="(file, idx) in files" :key="file.fileName" :name="'tab' + idx" :title="file.fileName">
               <async-highlight :code="file.code"></async-highlight>
             </tiny-tab-item>
@@ -84,22 +81,10 @@
   </div>
 </template>
 
-<script lang="jsx">
-import {
-  defineComponent,
-  reactive,
-  computed,
-  toRefs,
-  shallowRef,
-  onMounted,
-  onBeforeUnmount,
-  watch,
-  nextTick,
-  inject,
-  ref
-} from 'vue'
+<script setup lang="ts">
+import { reactive, computed, shallowRef, onMounted, onBeforeUnmount, watch, nextTick, inject, ref, h } from 'vue'
 import { i18nByKey, getWord } from '@/i18n'
-import { $split, appData, fetchDemosFile } from '@/tools'
+import { $split, fetchDemosFile } from '@/tools'
 import { Tooltip as TinyTooltip, Tabs as TinyTabs, TabItem as TinyTabItem, Button as TinyButton } from '@opentiny/vue'
 import { languageMap, vueComponents, getWebdocPath, staticDemoPath } from './cmp-config'
 import { router } from '@/router.js'
@@ -108,195 +93,188 @@ import { useApiMode, useTemplateMode } from '@/tools'
 import useTheme from '@/tools/useTheme'
 import AsyncHighlight from './async-highlight.vue'
 
+const props = defineProps({
+  demo: {
+    type: Object,
+    default: () => ({})
+  },
+  currDemoId: {
+    type: String,
+    default: ''
+  },
+  observer: {
+    type: Object,
+    default: () => ({})
+  },
+  isIntersecting: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['mounted'])
+
 const { apiModeState, apiModeFn } = useApiMode()
 
-export default defineComponent({
-  name: 'Demo',
-  props: ['demo', 'currDemoId', 'observer', 'isIntersecting'],
-  emits: ['mounted'],
-  components: {
-    TinyTooltip,
-    TinyTabs,
-    TinyTabItem,
-    TinyButton,
-    AsyncHighlight
-  },
-  setup(props, { emit }) {
-    const { templateModeState } = useTemplateMode()
-    const { currentThemeKey } = useTheme()
-    const isMobileFirst = computed(() => {
-      return templateModeState.mode === 'mobile-first'
-    })
+defineOptions({
+  name: 'Demo'
+})
 
-    const getDemoCodeFn = async (demo, forceUpdate) => {
-      // 获取code代码文本
-      if (!demo.files || forceUpdate) {
-        const cmpId = router.currentRoute.value.params.cmpId
-        const promises = demo.codeFiles.map(async (fileName) => {
-          // 切换option-api和composition-api
-          const demoName = apiModeFn.getDemoName(`${getWebdocPath(cmpId)}/${fileName}`)
-          let code = ''
-
-          const path = isMobileFirst.value ? `@demos/mobile-first/app/${demoName}` : `${staticDemoPath}/${demoName}`
-          code = await fetchDemosFile(path)
-            .then((code) => {
-              return code
-            })
-            .catch(() => {
-              return `${demoName}示例资源不存在，请检查文件名是否正确？`
-            })
-          const ext = $split(fileName, '.', -1)
-          const language = languageMap[ext] || ''
-          return { code, fileName, language }
-        })
-        demo.files = await Promise.all(promises)
-        return demo.files
+const demos = ref(props.demo)
+const files = ref([])
+const { templateModeState } = useTemplateMode()
+const { currentThemeKey } = useTheme()
+const isMobileFirst = computed(() => {
+  return templateModeState.mode === 'mobile-first'
+})
+const demoContainer = ref(null)
+const cmp = shallowRef(null)
+const showPreview = inject('showPreview')
+const state = reactive({
+  tabValue: 'tab0',
+  cmpId: router.currentRoute.value.params.cmpId,
+  langKey: getWord('zh-CN', 'en-US'),
+  copyTip: i18nByKey('copyCode'),
+  copyIcon: 'i-ti-copy'
+})
+
+watch(
+  () => props.isIntersecting,
+  async () => {
+    if (props.isIntersecting) {
+      const demoName = apiModeFn.getDemoName(`${getWebdocPath(state.cmpId)}/${props.demo.codeFiles[0]}`)
+      if (vueComponents[demoName]) {
+        cmp.value = (await vueComponents[demoName]()).default
+      } else {
+        const log = `${demoName}示例资源不存在，请检查文件名是否正确？`
+        cmp.value = h('div', {}, log)
       }
-      return demo.files
     }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.demo,
+  () => {
+    demos.value = props.demo
+    if (props.demo.files) {
+      files.value = props.demo.files
+    }
+  },
+  { deep: true }
+)
+
+watch(
+  () => apiModeState.apiMode,
+  () => {
+    if (props.demo.files?.length > 0) {
+      getDemoCodeFn(props.demo, true).then((demoFiles) => {
+        files.value = demoFiles
+      })
+    }
+  }
+)
+
+const getDemoCodeFn = async (demo, forceUpdate?: boolean) => {
+  // 获取code代码文本
+  if (!demo.files || forceUpdate) {
+    const cmpId = router.currentRoute.value.params.cmpId
+    const promises = demo.codeFiles.map(async (fileName) => {
+      // 切换option-api和composition-api
+      const demoName = apiModeFn.getDemoName(`${getWebdocPath(cmpId)}/${fileName}`)
+      let code = ''
+
+      const path = isMobileFirst.value ? `@demos/mobile-first/app/${demoName}` : `${staticDemoPath}/${demoName}`
+      code = await fetchDemosFile(path)
+        .then((code) => {
+          return code
+        })
+        .catch(() => {
+          return `${demoName}示例资源不存在，请检查文件名是否正确？`
+        })
+      const ext = $split(fileName, '.', -1)
+      const language = languageMap[ext] || ''
+      return { code, fileName, language }
+    })
+    demo.files = await Promise.all(promises)
+    return demo.files
+  }
+  return demo.files
+}
 
-    const demoContainer = ref(null)
+const getDescMd = (demo) => {
+  const desc = demo.desc[state.langKey].trim()
+  const html = h('div', { class: 'demo-desc', innerHTML: desc })
+  return html
+}
 
-    const state = reactive({
-      tabValue: 'tab0',
-      cmpId: router.currentRoute.value.params.cmpId,
-      langKey: getWord('zh-CN', 'en-US'),
-      copyTip: i18nByKey('copyCode'),
-      copyIcon: 'i-ti-copy'
-    })
+const toggleDemoCode = async (demo) => {
+  // 第一次打开时，要请求一下相应的codeFiles .存储到files属性下
+  if (!demo.files) {
+    await getDemoCode(demo)
+    demo.isOpen = true
+  } else {
+    demo.isOpen = !demo.isOpen
+  }
+  await nextTick()
+  window.dispatchEvent(new Event('resize'))
+}
 
-    const cmp = shallowRef(null)
-    const showPreview = inject('showPreview')
-
-    const fn = {
-      getDescMd(demo) {
-        // desc字段是一段html
-
-        const desc = demo.desc[state.langKey].trim()
-
-        return <div class="demo-desc" v-html={desc}></div>
-      },
-      async toggleDemoCode(demo) {
-        // 第一次打开时，要请求一下相应的codeFiles .存储到files属性下
-        if (!demo.files) {
-          await this.getDemoCode(demo)
-          demo.isOpen = true
-        } else {
-          demo.isOpen = !demo.isOpen
-        }
-
-        await nextTick()
-        window.dispatchEvent(new Event('resize'))
-      },
-      async copyCode(demo) {
-        if (demo.isOpen) {
-          const idx = parseInt(state.tabValue.slice(3))
-
-          navigator.clipboard.writeText(demo.files[idx].code)
-        } else {
-          await this.getDemoCode(demo)
-
-          navigator.clipboard.writeText(demo.files[0].code)
-        }
-        state.copyTip = i18nByKey('copyCodeOk')
-        state.copyIcon = 'i-ti-check'
-      },
-      resetTip() {
-        setTimeout(() => {
-          state.copyTip = i18nByKey('copyCode')
-          state.copyIcon = 'i-ti-copy'
-        }, 300)
-      },
-      getDemoCode(demo) {
-        // 获取code代码文本
-        return getDemoCodeFn(demo)
-      },
-      openPlayground(demo, open = true) {
-        const cmpId = router.currentRoute.value.params.cmpId
-        const tinyTheme = templateModeState.isSaas ? 'saas' : currentThemeKey.value.split('-')[0]
-        const openModeQuery = open ? '' : '&openMode=preview'
-        // TODO: 目前mf只有Options写法，后续再放开compositon
-        const url = `${import.meta.env.VITE_PLAYGROUND_URL}?cmpId=${cmpId}&fileName=${demo.codeFiles[0]}&apiMode=${
-          isMobileFirst.value ? 'Options' : apiModeState.apiMode
-        }&mode=${templateModeState.mode}&theme=${tinyTheme}${openModeQuery}`
-
-        if (open) {
-          window.open(url)
-        } else {
-          showPreview(url)
-        }
-      }
-    }
+const copyCode = async (demo) => {
+  if (demo.isOpen) {
+    const idx = parseInt(state.tabValue.slice(3))
 
-    onMounted(() => {
-      if (demoContainer.value) {
-        props.observer?.observe?.(demoContainer.value)
-      }
+    navigator.clipboard.writeText(demo.files[idx].code)
+  } else {
+    await getDemoCode(demo)
 
-      nextTick(() => {
-        emit('mounted')
-      })
-    })
+    navigator.clipboard.writeText(demo.files[0].code)
+  }
+  state.copyTip = i18nByKey('copyCodeOk')
+  state.copyIcon = 'i-ti-check'
+}
 
-    onBeforeUnmount(() => {
-      if (demoContainer.value) {
-        props.observer?.unobserve?.(demoContainer.value)
-      }
-    })
+const resetTip = () => {
+  setTimeout(() => {
+    state.copyTip = i18nByKey('copyCode')
+    state.copyIcon = 'i-ti-copy'
+  }, 300)
+}
 
-    const demos = ref(props.demo)
-    const files = ref([])
-
-    watch(
-      () => props.isIntersecting,
-      async () => {
-        if (props.isIntersecting) {
-          const demoName = apiModeFn.getDemoName(`${getWebdocPath(state.cmpId)}/${props.demo.codeFiles[0]}`)
-          if (vueComponents[demoName]) {
-            cmp.value = (await vueComponents[demoName]()).default
-          } else {
-            const log = `${demoName}示例资源不存在，请检查文件名是否正确？`
-            cmp.value = <div>{log}</div>
-          }
-        }
-      },
-      { immediate: true }
-    )
-
-    watch(
-      () => props.demo,
-      () => {
-        demos.value = props.demo
-        if (props.demo.files) {
-          files.value = props.demo.files
-        }
-      },
-      { deep: true }
-    )
-
-    watch(
-      () => apiModeState.apiMode,
-      () => {
-        if (props.demo.files?.length > 0) {
-          getDemoCodeFn(props.demo, true).then((demoFiles) => {
-            files.value = demoFiles
-          })
-        }
-      }
-    )
-
-    return {
-      ...toRefs(state),
-      ...fn,
-      appData,
-      vueComponents,
-      demoConfig,
-      cmp,
-      isMobileFirst,
-      i18nByKey,
-      files,
-      demoContainer
-    }
+const getDemoCode = (demo) => {
+  // 获取code代码文本
+  return getDemoCodeFn(demo)
+}
+
+const openPlayground = (demo, open = true) => {
+  const cmpId = router.currentRoute.value.params.cmpId
+  const tinyTheme = templateModeState.isSaas ? 'saas' : currentThemeKey.value.split('-')[0]
+  const openModeQuery = open ? '' : '&openMode=preview'
+  // TODO: 目前mf只有Options写法，后续再放开compositon
+  const url = `${import.meta.env.VITE_PLAYGROUND_URL}?cmpId=${cmpId}&fileName=${demo.codeFiles[0]}&apiMode=${
+    isMobileFirst.value ? 'Options' : apiModeState.apiMode
+  }&mode=${templateModeState.mode}&theme=${tinyTheme}${openModeQuery}`
+
+  if (open) {
+    window.open(url)
+  } else {
+    showPreview(url)
+  }
+}
+
+onMounted(() => {
+  if (demoContainer.value) {
+    props.observer?.observe?.(demoContainer.value)
+  }
+  nextTick(() => {
+    emit('mounted')
+  })
+})
+
+onBeforeUnmount(() => {
+  if (demoContainer.value) {
+    props.observer?.unobserve?.(demoContainer.value)
   }
 })
 </script>
@@ -415,11 +393,6 @@ export default defineComponent({
   border: 1px solid #efeff4;
 }
 
-.phone-container-flex {
-  display: flex;
-  justify-content: flex-start;
-}
-
 .phone-container {
   margin: auto;
   width: 395px;

From d9702e88b6d0cb419f7a7e69e1721ed11c0103b9 Mon Sep 17 00:00:00 2001
From: James-9696 <hujm969696@163.com>
Date: Fri, 17 Jan 2025 01:43:43 -0800
Subject: [PATCH 03/15] fix: display and debug iframe on mobile devices

---
 .../sites/src/views/components/components.vue | 99 +++++++++++++++++--
 examples/sites/src/views/components/demo.vue  | 45 ++++-----
 2 files changed, 109 insertions(+), 35 deletions(-)

diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index eb7f4793c5..0e9306587f 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -35,10 +35,17 @@
                       :curr-demo-id="currDemoId"
                       class="mb32"
                       @mounted="demoMounted"
+                      @get-iframe-demo="getIframeDemo"
                     />
                   </div>
                   <div v-else>
-                    <demo v-if="singleDemo" :isIntersecting="true" :key="singleDemo.name" :demo="singleDemo" />
+                    <demo
+                      v-if="singleDemo"
+                      :isIntersecting="true"
+                      :key="singleDemo.name"
+                      :demo="singleDemo"
+                      @get-iframe-demo="getIframeDemo"
+                    />
                   </div>
                 </div>
               </template>
@@ -154,6 +161,14 @@
             </tiny-tab-item>
           </tiny-tabs>
         </div>
+        <div v-if="demoConfig.isMobile" class="mobile-view-container">
+          <!-- 移动端展示内容 -->
+          <div class="phone-container">
+            <div style="width: 275px; height: 478px" class="mobile-iframe-container">
+              <iframe ref="iframeRef" width="100%" height="100%" :src="iframeUrl" frameborder="0"></iframe>
+            </div>
+          </div>
+        </div>
         <!-- demo与api目录锚点 -->
         <div class="cmp-page-anchor catalog" v-if="currAnchorLinks.length">
           <tiny-anchor
@@ -176,15 +191,12 @@
         {{ i18nByKey('doc-owner') }} : {{ currJson.owner }}
       </div>
     </div>
-    <div style="width: 300px; height: 500px">
-      <iframe width="100%" height="100%" :src="mobilePreviewUrl" frameborder="0"></iframe>
-    </div>
     <div id="footer"></div>
   </div>
 </template>
 
 <script lang="jsx">
-import { defineComponent, reactive, computed, toRefs, watch, onMounted, ref, onUnmounted, nextTick } from 'vue'
+import { defineComponent, reactive, computed, toRefs, watch, onMounted, onUnmounted, nextTick, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { marked } from 'marked'
 import hljs from 'highlight.js'
@@ -193,6 +205,7 @@ import { iconOuterLink } from '@opentiny/vue-icon'
 import debounce from '@opentiny/vue-renderless/common/deps/debounce'
 import { i18nByKey, getWord, $clone, fetchDemosFile, useApiMode, useTemplateMode, getCmpContributors } from '@/tools'
 import demo from '@/views/components/demo'
+import demoConfig from '@demos/config.js'
 import { router } from '@/router.js'
 import { faqMdConfig, getWebdocPath } from './cmp-config'
 import AsyncHighlight from './async-highlight.vue'
@@ -214,6 +227,7 @@ export default defineComponent({
     VersionTip
   },
   setup() {
+    const iframeRef = ref()
     const isRunningTest = localStorage.getItem('tiny-e2e-test') === 'true'
     const anchorRefreshKey = ref(0)
     const apiTableRef = ref()
@@ -244,6 +258,7 @@ export default defineComponent({
         }
         return links
       }),
+      iframeUrl: '',
       apiAnchorLinks: computed(() => getApiAnchorLinks()),
       anchorAffix: true,
       currAnchorLinks: computed(() => (state.activeTab === 'demos' ? state.demoAnchorLinks : state.apiAnchorLinks)),
@@ -287,6 +302,35 @@ export default defineComponent({
       }
     }
 
+    const getIframeConetent = (demoId, demoName) => {
+      const frameWindow = iframeRef.value.contentWindow
+      frameWindow.postMessage({ from: 'tiny-vue-site', component: state.cmpId, demo: demoName })
+      router.push(`#${demoId}`)
+    }
+
+    const getIframeDemo = (demo) => {
+      if (demo?.codeFiles.length > 0) {
+        getIframeConetent(demo.demoId, demo.codeFiles[0])
+        jumpToMobileDemoAndHash(demo.demoId)
+      }
+    }
+
+    const jumpToMobileDemoAndHash = (hash) => {
+      if (apiModeState.demoMode === 'single') {
+        const singleDemo = state.currJson.demos.find((d) => d.demoId === hash)
+
+        // 单示例模式下如果没有匹配到锚点对应的示例，则这不加载示例直接跳转锚点id
+        if (singleDemo) {
+          state.singleDemo = singleDemo
+          scrollToLayoutTop()
+        }
+      } else if (apiModeState.demoMode === 'default') {
+        // 多示例模式，自动会切到相应的位置。只需要记录singleDemo就好了
+        state.singleDemo = state.currJson.demos.find((d) => d.demoId === hash)
+        scrollByHash(hash)
+      }
+    }
+
     const allDemoMounted = async () => {
       if (isAllMounted) {
         return isAllMounted
@@ -534,6 +578,13 @@ export default defineComponent({
             state.singleDemo = state.currJson.demos[0]
           }
 
+          if (demoConfig.isMobile && !hash) {
+            // 初始化iframe,当前组件第一个demo展示
+            state.iframeUrl = `${import.meta.env.VITE_MOBILE_URL}?component=${state.cmpId}&demo=${state.currJson?.demos[0].codeFiles[0]}`
+          } else {
+            state.iframeUrl = `${import.meta.env.VITE_MOBILE_URL}?component=${state.cmpId}&demo=${hash}.vue`
+          }
+
           // F5刷新加载时，跳到当前示例
           // 应当在所有demo渲染完毕后在滚动，否则滚动完位置后，demo渲染会使滚动位置错位
           return allDemoMounted().then(() => {
@@ -639,6 +690,12 @@ export default defineComponent({
 
       // 目录列表上的点击
       handleAnchorClick: (e, data) => {
+        if (demoConfig.isMobile) {
+          // 点击目录列表更新iframe显示
+          const hashId = data.link.slice(1)
+          getIframeConetent(state.cmpId, hashId + '.vue')
+        }
+
         if (apiModeState.demoMode === 'single' && data.link.startsWith('#')) {
           e.preventDefault()
           const hash = data.link.slice(1)
@@ -708,11 +765,10 @@ export default defineComponent({
 
     const hasKey = (apiArr, key) => !apiArr.every((item) => item[key] === undefined)
 
-    const mobilePreviewUrl = `${import.meta.env.VITE_MOBILE_URL}?component=button&demo=base.vue`
     return {
       ...toRefs(state),
       ...fn,
-      mobilePreviewUrl,
+      getIframeDemo,
       i18nByKey,
       anchorRefreshKey,
       apiModeState,
@@ -720,7 +776,9 @@ export default defineComponent({
       optionsList,
       hasKey,
       isRunningTest,
-      apiTableRef
+      apiTableRef,
+      demoConfig,
+      iframeRef
     }
   }
 })
@@ -1043,4 +1101,29 @@ export default defineComponent({
     }
   }
 }
+
+.phone-container {
+  width: 395px;
+  min-width: 395px;
+  height: 600px;
+  border: 0;
+  position: fixed;
+  left: 65%;
+  right: 10%;
+  top: 30%;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYsAAAMFCAYAAACFxdoKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjg3MTZDNTAwMTI1MzExRUE5Mzk1OTFBNjdDQ0JBNUQ5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjg3MTZDNTAxMTI1MzExRUE5Mzk1OTFBNjdDQ0JBNUQ5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODcxNkM0RkUxMjUzMTFFQTkzOTU5MUE2N0NDQkE1RDkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODcxNkM0RkYxMjUzMTFFQTkzOTU5MUE2N0NDQkE1RDkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7YMDcrAAAcl0lEQVR42uzd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)
+    no-repeat center top;
+  background-size: contain;
+  z-index: 1;
+}
+
+.mobile-view-container {
+  width: 400px;
+}
+
+.mobile-iframe-container {
+  position: relative;
+  top: 10%;
+  left: 14%;
+}
 </style>
diff --git a/examples/sites/src/views/components/demo.vue b/examples/sites/src/views/components/demo.vue
index da5532ee6f..471356d869 100644
--- a/examples/sites/src/views/components/demo.vue
+++ b/examples/sites/src/views/components/demo.vue
@@ -53,9 +53,9 @@
         <div v-if="isMobileFirst" class="pc-demo-container">
           <tiny-button @click="openPlayground(demo, false)">多端预览</tiny-button>
         </div>
-        <div v-else-if="demoConfig.isMobile" class="phone-container">
-          <div class="mobile-view-container">
-            <component :is="cmp" />
+        <div v-else-if="demoConfig.isMobile" class="mobile-demo-container">
+          <div class="mobile-view-btn">
+            <tiny-button @click="openIframe(demo)">{{ i18nByKey('yan-shi') }}</tiny-button>
           </div>
         </div>
         <div v-else class="pc-demo-container">
@@ -82,7 +82,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, computed, shallowRef, onMounted, onBeforeUnmount, watch, nextTick, inject, ref, h } from 'vue'
+import { ref, reactive, computed, shallowRef, onMounted, onBeforeUnmount, watch, nextTick, inject, h } from 'vue'
 import { i18nByKey, getWord } from '@/i18n'
 import { $split, fetchDemosFile } from '@/tools'
 import { Tooltip as TinyTooltip, Tabs as TinyTabs, TabItem as TinyTabItem, Button as TinyButton } from '@opentiny/vue'
@@ -112,7 +112,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['mounted'])
+const emit = defineEmits(['mounted', 'get-iframe-demo'])
 
 const { apiModeState, apiModeFn } = useApiMode()
 
@@ -263,6 +263,10 @@ const openPlayground = (demo, open = true) => {
   }
 }
 
+const openIframe = (demo) => {
+  emit('get-iframe-demo', demo)
+}
+
 onMounted(() => {
   if (demoContainer.value) {
     props.observer?.observe?.(demoContainer.value)
@@ -365,6 +369,15 @@ onBeforeUnmount(() => {
   }
 }
 
+.mobile-demo-container {
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border-radius: 6px;
+  border: 1px solid #dcdfe6;
+  padding: 26px 18px 42px;
+}
+
 .demo-content {
   position: relative;
 
@@ -393,28 +406,6 @@ onBeforeUnmount(() => {
   border: 1px solid #efeff4;
 }
 
-.phone-container {
-  margin: auto;
-  width: 395px;
-  height: 773px;
-  padding: 20px;
-  border: 0;
-  position: relative;
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYsAAAMFCAYAAACFxdoKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjg3MTZDNTAwMTI1MzExRUE5Mzk1OTFBNjdDQ0JBNUQ5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjg3MTZDNTAxMTI1MzExRUE5Mzk1OTFBNjdDQ0JBNUQ5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODcxNkM0RkUxMjUzMTFFQTkzOTU5MUE2N0NDQkE1RDkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODcxNkM0RkYxMjUzMTFFQTkzOTU5MUE2N0NDQkE1RDkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7YMDcrAAAcl0lEQVR42uzd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)
-    no-repeat center top;
-  background-size: contain;
-
-  .mobile-view-container {
-    width: 360px;
-    height: 613px;
-    position: absolute;
-    left: 11px;
-    top: 79px;
-    transform: i18nByKeyX(0);
-    overflow: hidden;
-  }
-}
-
 .code-tabs {
   .tiny-tabs__content {
     padding: 0;

From 5f56cb151376154d945c09a12f84c0cdc6e69604 Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Mon, 20 Jan 2025 09:42:15 +0800
Subject: [PATCH 04/15] refactor: mobile site vite config refactor

---
 examples/sites/vite-dosearch-plugin.js |  18 -----
 examples/sites/vite.config.ts          |  97 ++++++----------------
 examples/sites/vite.extend.ts          | 106 +++++++++++++++++++++++++
 3 files changed, 130 insertions(+), 91 deletions(-)
 delete mode 100644 examples/sites/vite-dosearch-plugin.js
 create mode 100644 examples/sites/vite.extend.ts

diff --git a/examples/sites/vite-dosearch-plugin.js b/examples/sites/vite-dosearch-plugin.js
deleted file mode 100644
index 6bc2fe5df4..0000000000
--- a/examples/sites/vite-dosearch-plugin.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export default function viteDosearchPlugin() {
-  return {
-    name: 'vite-dosearch-plugin',
-    enforce: 'pre',
-    transform(code, id) {
-      if (id.includes('@docsearch')) {
-        const newCode = code.replace(
-          'Promise((function(t){var n=new XMLHttpRequest;',
-          'Promise((function(t){t=window.handleGlobalSearchData(t);var n=new XMLHttpRequest;'
-        )
-        return {
-          code: newCode,
-          map: null
-        }
-      }
-    }
-  }
-}
diff --git a/examples/sites/vite.config.ts b/examples/sites/vite.config.ts
index 8a5bad8a54..7081cfe586 100644
--- a/examples/sites/vite.config.ts
+++ b/examples/sites/vite.config.ts
@@ -1,6 +1,5 @@
 import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import viteDosearchPlugin from './vite-dosearch-plugin'
 import Unocss from 'unocss/vite'
 import path from 'node:path'
 import UnoCssConfig from './uno.config'
@@ -13,42 +12,14 @@ import importPlugin from '@opentiny/vue-vite-import'
 import vue3SvgPlugin from 'vite-svg-loader'
 import { getAlias, pathFromWorkspaceRoot, getOptimizeDeps } from '../../internals/cli/src/config/vite'
 import virtualTemplatePlugin from '@opentiny-internal/unplugin-virtual-template/vite'
-import tailwindCss from 'tailwindcss'
 import { visualizer } from 'rollup-plugin-visualizer'
-import fg from 'fast-glob'
-import fs from 'fs-extra'
-
-const delStatic = () => {
-  let config
-  return {
-    name: 'inline-plugin-del-static',
-    apply: 'build',
-    configResolved(_config) {
-      config = _config
-    },
-    async closeBundle() {
-      const targetPath = path.join(config.build.outDir, '@demos')
-      const files = await fg(['**/*.spec.js', '**/*.spec.ts'], {
-        dot: true,
-        cwd: targetPath
-      })
-      files.forEach((filename) => {
-        const filePath = path.join(targetPath, filename)
-        fs.unlink(filePath)
-      })
-    }
-  }
-}
+import { delStaticPlugin, viteDocsearchPlugin, modifyViteConfig } from './vite.extend.ts'
 
 export default defineConfig((config) => {
   const env = loadEnv(config.mode, process.cwd() + '/env', '')
-  const isSaas = env.VITE_TINY_THEME === 'saas'
-  const isPlus = env.VITE_APP_MODE === 'plus'
-  const isInner = env.VITE_BUILD_TARGET === 'inner'
-  const isMobile = env.VITE_APP_MODE === 'mobile'
-  const demosPath = isPlus ? '../plusdocs/pc' : `./demos/${env.VITE_APP_MODE}`
-  const apisPath = isPlus ? '../plusdocs/apis' : './demos/apis'
-  const menuPath = isSaas ? path.resolve('./demos/saas') : path.resolve(demosPath)
+
+  const demosPath = `./demos/${env.VITE_APP_MODE}`
+  const apisPath = './demos/apis'
   const copyTarget = [
     {
       src: `${demosPath}/*`,
@@ -59,24 +30,6 @@ export default defineConfig((config) => {
       dest: '@demos/apis'
     }
   ]
-  if (isSaas) {
-    copyTarget.push({
-      src: `./demos/mobile-first/*`,
-      dest: '@demos/mobile-first'
-    })
-  }
-
-  const buildInput = () => {
-    // design-server中一个路由对应一个页面
-    const input = {
-      index: path.resolve(__dirname, './index.html'),
-      playground: path.resolve(__dirname, './playground.html')
-    }
-    if (isMobile) {
-      input.mobile = path.resolve(__dirname, './mobile.html')
-    }
-    return input
-  }
 
   const viteConfig = {
     envDir: './env',
@@ -129,17 +82,17 @@ export default defineConfig((config) => {
         markdownItUses: MdExt
       }),
       Unocss(UnoCssConfig),
-      viteStaticCopy({
-        targets: copyTarget
-      }),
       config.mode === 'visualizer' && visualizer({ open: true }),
-      delStatic(),
-      isInner ? viteDosearchPlugin() : null
+      delStaticPlugin(),
+      viteDocsearchPlugin(env)
     ],
     optimizeDeps: getOptimizeDeps(3),
     build: {
       rollupOptions: {
-        input: buildInput()
+        input: {
+          index: path.resolve(__dirname, './index.html'),
+          playground: path.resolve(__dirname, './playground.html')
+        }
       }
     },
     resolve: {
@@ -147,8 +100,8 @@ export default defineConfig((config) => {
       alias: {
         '@mobile-root': pathFromWorkspaceRoot('packages/mobile'),
         '@': path.resolve('src'),
-        '@demos': path.resolve(`${demosPath}`),
-        '@menu': menuPath,
+        '@demos': path.resolve(demosPath),
+        '@menu': path.resolve(demosPath),
         '@opentiny/vue-renderless/types': pathFromWorkspaceRoot('packages/renderless/types'),
         '@tiptap/vue': '@tiptap/vue-3',
         ...getAlias(3, env.VITE_TINY_THEME)
@@ -169,19 +122,9 @@ export default defineConfig((config) => {
       __INTLIFY_JIT_COMPILATION__: false,
       __INTLIFY_DROP_MESSAGE_COMPILER__: false,
       __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
-    }
-  }
-
-  if (env.VITE_TINY_THEME === 'saas') {
-    viteConfig.css = {
-      postcss: {
-        plugins: [tailwindCss]
-      }
-    }
-    // 这里逻辑是兼容saas官网工程的alias写法
-    if (!viteConfig.resolve.alias['@opentiny/vue-theme']) {
-      viteConfig.resolve.alias['@opentiny/vue-theme'] = '@opentiny/vue-theme-saas'
-      viteConfig.resolve.alias['@opentiny/vue-icon'] = '@opentiny/vue-icon-saas'
+    },
+    tinyCustom: {
+      copyTarget
     }
   }
 
@@ -189,5 +132,13 @@ export default defineConfig((config) => {
     viteConfig.define['process.env'] = {}
   }
 
-  return viteConfig
+  const newViteConfig = modifyViteConfig(viteConfig, env, { plugins: { viteStaticCopy } })
+
+  newViteConfig.plugins.push(
+    viteStaticCopy({
+      targets: newViteConfig.tinyCustom.copyTarget
+    })
+  )
+
+  return newViteConfig
 })
diff --git a/examples/sites/vite.extend.ts b/examples/sites/vite.extend.ts
new file mode 100644
index 0000000000..618dd69f21
--- /dev/null
+++ b/examples/sites/vite.extend.ts
@@ -0,0 +1,106 @@
+import path from 'node:path'
+import tailwindCss from 'tailwindcss'
+
+// 删除构建后一些无用的静态资源
+export const delStaticPlugin = () => {
+  let config
+  return {
+    name: 'inline-plugin-del-static',
+    apply: 'build',
+    configResolved(_config) {
+      config = _config
+    },
+    async closeBundle() {
+      const targetPath = path.join(config.build.outDir, '@demos')
+      const files = await fg(['**/*.spec.js', '**/*.spec.ts'], {
+        dot: true,
+        cwd: targetPath
+      })
+      files.forEach((filename) => {
+        const filePath = path.join(targetPath, filename)
+        fs.unlink(filePath)
+      })
+    }
+  }
+}
+
+// 修改@docsearch依赖，使其支持内外网官网
+export const viteDocsearchPlugin = (env) => {
+  if (env.VITE_BUILD_TARGET !== 'inner') {
+    return null
+  }
+  return {
+    name: 'vite-docsearch-plugin',
+    enforce: 'pre',
+    transform(code, id) {
+      if (id.includes('@docsearch')) {
+        const newCode = code.replace(
+          'Promise((function(t){var n=new XMLHttpRequest;',
+          'Promise((function(t){t=window.handleGlobalSearchData(t);var n=new XMLHttpRequest;'
+        )
+        return {
+          code: newCode,
+          map: null
+        }
+      }
+    }
+  }
+}
+
+// 针对不同主题对配置进行响应修改
+const themeModifyMap = {
+  saas(viteConfig) {
+    viteConfig.css = {
+      postcss: {
+        plugins: [tailwindCss]
+      }
+    }
+
+    viteConfig.tinyCustom.copyTarget.push({
+      src: `./demos/mobile-first/*`,
+      dest: '@demos/mobile-first'
+    })
+
+    const menuPath = path.resolve('./demos/saas')
+    viteConfig.resolve.alias['@menu'] = menuPath
+    // 这里逻辑是兼容saas官网工程的alias写法
+    if (!viteConfig.resolve.alias['@opentiny/vue-theme']) {
+      viteConfig.resolve.alias['@opentiny/vue-theme'] = '@opentiny/vue-theme-saas'
+      viteConfig.resolve.alias['@opentiny/vue-icon'] = '@opentiny/vue-icon-saas'
+    }
+    return viteConfig
+  }
+}
+
+const modeModifyMap = {
+  mobile(viteConfig) {
+    viteConfig.build.rollupOptions.input.mobile = path.resolve(__dirname, './mobile.html')
+  },
+  plus(viteConfig) {
+    const demosPath = '../plusdocs/pc'
+    const apisPath = '../plusdocs/apis'
+    viteConfig.resolve.alias['@menu'] = path.resolve(demosPath)
+    viteConfig.resolve.alias['@demo'] = path.resolve(demosPath)
+    viteConfig.tinyCustom.copyTarget = [
+      {
+        src: `${demosPath}/*`,
+        dest: '@demos'
+      },
+      {
+        src: `${apisPath}/*`,
+        dest: '@demos/apis'
+      }
+    ]
+  }
+}
+
+// 针对不同环境针对修改配置
+export const modifyViteConfig = (viteConfig, env) => {
+  const { VITE_TINY_THEME, VITE_APP_MODE } = env
+  const doModeModify = modeModifyMap[VITE_APP_MODE]
+  if (doModeModify) {
+    doModeModify(viteConfig)
+  }
+  const doThemeModify = themeModifyMap[VITE_TINY_THEME]
+  return doThemeModify ? doThemeModify(viteConfig) : viteConfig
+}

From 23995023308fe3f50a6f8e2f8eda59f03c60c10b Mon Sep 17 00:00:00 2001
From: James-9696 <hujm969696@163.com>
Date: Mon, 20 Jan 2025 01:15:06 -0800
Subject: [PATCH 05/15] fix: modify the issue that clicking the demo button in
 multiple example modes on mobile devices will redirect to the first demo

---
 examples/sites/src/views/components/components.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index 0e9306587f..1094ec17c6 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -312,6 +312,12 @@ export default defineComponent({
       if (demo?.codeFiles.length > 0) {
         getIframeConetent(demo.demoId, demo.codeFiles[0])
         jumpToMobileDemoAndHash(demo.demoId)
+        state.currDemoId = demo.demoId
+        state.currJson.demos.forEach((item) => {
+          if (item.demoId === demo.demoId) {
+            item.isIntersecting = true
+          }
+        })
       }
     }
 
@@ -660,8 +666,8 @@ export default defineComponent({
       onTabsClick: (data) => {
         if (data.name) {
           router.push(`#${data.name}`)
+          scrollToLayoutTop()
         }
-        scrollToLayoutTop()
       },
       // 点击 api区域的 name列时
       jumpToDemo: (demoId) => {

From ef2c059faaa516201f84e76ccbddc200cff9618a Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Mon, 20 Jan 2025 20:43:09 +0800
Subject: [PATCH 06/15] refactor: mobile site refactor

---
 examples/sites/mobile/App.vue                 | 31 +++++++++++++++++--
 .../sites/src/views/components/components.vue | 23 +++++++-------
 examples/sites/src/views/components/demo.vue  |  5 ++-
 packages/theme-mobile/src/base/basic-var.less |  2 +-
 packages/theme-mobile/src/checkbox/index.less |  1 -
 packages/theme-mobile/src/input/index.less    |  1 -
 packages/theme-mobile/src/mask/index.less     |  1 -
 .../src/multi-select-item/index.less          |  1 -
 .../theme-mobile/src/multi-select/index.less  |  1 -
 packages/theme-mobile/src/tabs/index.less     |  1 -
 10 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/examples/sites/mobile/App.vue b/examples/sites/mobile/App.vue
index 483c786287..4ef41d6ec7 100644
--- a/examples/sites/mobile/App.vue
+++ b/examples/sites/mobile/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="mobile-preview">
     <component :is="showComponent" />
   </div>
 </template>
@@ -68,10 +68,37 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style>
+<style lang="less">
 html,
 body {
   margin: 0;
   padding: 0;
 }
+
+html,
+body,
+#app {
+  height: 100%;
+  ::-webkit-scrollbar {
+    width: var(--tvm-size-scrollbar-width);
+    height: var(--tvm-size-scrollbar-height);
+  }
+
+  ::-webkit-scrollbar-track-piece {
+    background: var(--tvm-color-bg-scrollbar-track);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--tvm-color-bg-scrollbar-thumb);
+    border-radius: var(--tvm-border-radius-scrollbar-thumb);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--tvm-color-bg-scrollbar-thumb-hover);
+  }
+
+  ::-webkit-scrollbar-thumb:active {
+    background: var(--tvm-color-bg-scrollbar-thumb-active);
+  }
+}
 </style>
diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index 1094ec17c6..ebd440fc44 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -164,7 +164,7 @@
         <div v-if="demoConfig.isMobile" class="mobile-view-container">
           <!-- 移动端展示内容 -->
           <div class="phone-container">
-            <div style="width: 275px; height: 478px" class="mobile-iframe-container">
+            <div class="mobile-iframe-container">
               <iframe ref="iframeRef" width="100%" height="100%" :src="iframeUrl" frameborder="0"></iframe>
             </div>
           </div>
@@ -586,7 +586,9 @@ export default defineComponent({
 
           if (demoConfig.isMobile && !hash) {
             // 初始化iframe,当前组件第一个demo展示
-            state.iframeUrl = `${import.meta.env.VITE_MOBILE_URL}?component=${state.cmpId}&demo=${state.currJson?.demos[0].codeFiles[0]}`
+            state.iframeUrl = `${import.meta.env.VITE_MOBILE_URL}?component=${state.cmpId}&demo=${
+              state.currJson?.demos[0].codeFiles[0]
+            }`
           } else {
             state.iframeUrl = `${import.meta.env.VITE_MOBILE_URL}?component=${state.cmpId}&demo=${hash}.vue`
           }
@@ -1109,17 +1111,14 @@ export default defineComponent({
 }
 
 .phone-container {
-  width: 395px;
-  min-width: 395px;
-  height: 600px;
+  width: 394px;
+  height: 770px;
   border: 0;
   position: fixed;
-  left: 65%;
-  right: 10%;
-  top: 30%;
+  top: 280px;
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYsAAAMFCAYAAACFxdoKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjg3MTZDNTAwMTI1MzExRUE5Mzk1OTFBNjdDQ0JBNUQ5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjg3MTZDNTAxMTI1MzExRUE5Mzk1OTFBNjdDQ0JBNUQ5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODcxNkM0RkUxMjUzMTFFQTkzOTU5MUE2N0NDQkE1RDkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODcxNkM0RkYxMjUzMTFFQTkzOTU5MUE2N0NDQkE1RDkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7YMDcrAAAcl0lEQVR42uzd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)
     no-repeat center top;
-  background-size: contain;
+  background-size: cover;
   z-index: 1;
 }
 
@@ -1129,7 +1128,9 @@ export default defineComponent({
 
 .mobile-iframe-container {
   position: relative;
-  top: 10%;
-  left: 14%;
+  top: 79px;
+  left: 10px;
+  width: 360px;
+  height: 612px;
 }
 </style>
diff --git a/examples/sites/src/views/components/demo.vue b/examples/sites/src/views/components/demo.vue
index 471356d869..e59b282e95 100644
--- a/examples/sites/src/views/components/demo.vue
+++ b/examples/sites/src/views/components/demo.vue
@@ -55,7 +55,9 @@
         </div>
         <div v-else-if="demoConfig.isMobile" class="mobile-demo-container">
           <div class="mobile-view-btn">
-            <tiny-button @click="openIframe(demo)">{{ i18nByKey('yan-shi') }}</tiny-button>
+            <tiny-mobile-button type="secondary" @click="openIframe(demo)">{{
+              i18nByKey('yan-shi')
+            }}</tiny-mobile-button>
           </div>
         </div>
         <div v-else class="pc-demo-container">
@@ -92,6 +94,7 @@ import demoConfig from '@demos/config.js'
 import { useApiMode, useTemplateMode } from '@/tools'
 import useTheme from '@/tools/useTheme'
 import AsyncHighlight from './async-highlight.vue'
+import { Button as TinyMobileButton } from '@opentiny/vue-mobile'
 
 const props = defineProps({
   demo: {
diff --git a/packages/theme-mobile/src/base/basic-var.less b/packages/theme-mobile/src/base/basic-var.less
index b6f3b05632..ad0196e7c8 100644
--- a/packages/theme-mobile/src/base/basic-var.less
+++ b/packages/theme-mobile/src/base/basic-var.less
@@ -154,7 +154,7 @@
   --tvm-base-color-bg-3: #ffffff; /* 白色_背景色*/
 
   /* 文本、线、面等常用灰色可用颜色参考：*/
-  --tvm-base-color-common-1: #000000;
+  --tvm-base-color-common-1: #ff0000;
   --tvm-base-color-common-2: #191919;
   --tvm-base-color-common-3: #262626;
   --tvm-base-color-common-4: #333333;
diff --git a/packages/theme-mobile/src/checkbox/index.less b/packages/theme-mobile/src/checkbox/index.less
index 011d52eb19..311315286d 100644
--- a/packages/theme-mobile/src/checkbox/index.less
+++ b/packages/theme-mobile/src/checkbox/index.less
@@ -10,7 +10,6 @@
 *
 */
 
-@import '../base/basic-var.less';
 @import '../mixins/common.less';
 @import '../mixins/checkbox.less';
 @import '../custom.less';
diff --git a/packages/theme-mobile/src/input/index.less b/packages/theme-mobile/src/input/index.less
index f0fd874f1f..8bc3b4f024 100644
--- a/packages/theme-mobile/src/input/index.less
+++ b/packages/theme-mobile/src/input/index.less
@@ -10,7 +10,6 @@
 *
 */
 
-@import '../base/basic-var.less';
 @import '../mixins/input.less';
 @import '../mixins/common.less';
 @import '../custom.less';
diff --git a/packages/theme-mobile/src/mask/index.less b/packages/theme-mobile/src/mask/index.less
index a83358f777..94acd5b726 100644
--- a/packages/theme-mobile/src/mask/index.less
+++ b/packages/theme-mobile/src/mask/index.less
@@ -11,7 +11,6 @@
 */
 
 @import '../custom.less';
-@import '../base/basic-var.less';
 @import './vars.less';
 
 @mask-prefix-cls: ~'@{css-prefix}mobile-mask';
diff --git a/packages/theme-mobile/src/multi-select-item/index.less b/packages/theme-mobile/src/multi-select-item/index.less
index 5073ae5509..ed4fa5b1f0 100644
--- a/packages/theme-mobile/src/multi-select-item/index.less
+++ b/packages/theme-mobile/src/multi-select-item/index.less
@@ -10,7 +10,6 @@
 *
 */
 
-@import '../base/basic-var.less';
 @import '../custom.less';
 @import '../mixins/hairline.less';
 @import './vars.less';
diff --git a/packages/theme-mobile/src/multi-select/index.less b/packages/theme-mobile/src/multi-select/index.less
index 355fc77c78..9625612266 100644
--- a/packages/theme-mobile/src/multi-select/index.less
+++ b/packages/theme-mobile/src/multi-select/index.less
@@ -10,7 +10,6 @@
 *
 */
 
-@import '../base/basic-var.less';
 @import '../custom.less';
 @import '../mixins/hairline.less';
 @import './vars.less';
diff --git a/packages/theme-mobile/src/tabs/index.less b/packages/theme-mobile/src/tabs/index.less
index 53b701a28d..a19eb8dc4a 100644
--- a/packages/theme-mobile/src/tabs/index.less
+++ b/packages/theme-mobile/src/tabs/index.less
@@ -10,7 +10,6 @@
 *
 */
 
-@import '../base/basic-var.less';
 @import '../mixins/hairline.less';
 @import '../custom.less';
 @import './vars.less';

From 5cea6225d6a743fda82d9f458962b3bacbf8c38b Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Wed, 22 Jan 2025 10:02:28 +0800
Subject: [PATCH 07/15] refactor: mobile site refactor

---
 examples/sites/mobile/App.vue                      |  2 --
 examples/sites/src/views/components/components.vue | 13 +++++++------
 examples/sites/src/views/components/demo.vue       |  5 +----
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/examples/sites/mobile/App.vue b/examples/sites/mobile/App.vue
index 4ef41d6ec7..8b946c4328 100644
--- a/examples/sites/mobile/App.vue
+++ b/examples/sites/mobile/App.vue
@@ -40,11 +40,9 @@ const receiveMessage = ({ data }) => {
   if (!['tiny-vue-site'].includes(from)) {
     return
   }
-  showLoading()
   const demoPath = `${component}/${demo}`
   getComponent(demoPath).then((cmp) => {
     showComponent.value = cmp
-    closeLoading()
   })
 }
 
diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index ebd440fc44..b2ed465e82 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -160,15 +160,16 @@
               </div>
             </tiny-tab-item>
           </tiny-tabs>
-        </div>
-        <div v-if="demoConfig.isMobile" class="mobile-view-container">
-          <!-- 移动端展示内容 -->
-          <div class="phone-container">
-            <div class="mobile-iframe-container">
-              <iframe ref="iframeRef" width="100%" height="100%" :src="iframeUrl" frameborder="0"></iframe>
+          <div v-if="demoConfig.isMobile" class="mobile-view-container">
+            <!-- 移动端展示内容 -->
+            <div class="phone-container">
+              <div class="mobile-iframe-container">
+                <iframe ref="iframeRef" width="100%" height="100%" :src="iframeUrl" frameborder="0"></iframe>
+              </div>
             </div>
           </div>
         </div>
+
         <!-- demo与api目录锚点 -->
         <div class="cmp-page-anchor catalog" v-if="currAnchorLinks.length">
           <tiny-anchor
diff --git a/examples/sites/src/views/components/demo.vue b/examples/sites/src/views/components/demo.vue
index e59b282e95..1fb53f38e8 100644
--- a/examples/sites/src/views/components/demo.vue
+++ b/examples/sites/src/views/components/demo.vue
@@ -55,9 +55,7 @@
         </div>
         <div v-else-if="demoConfig.isMobile" class="mobile-demo-container">
           <div class="mobile-view-btn">
-            <tiny-mobile-button type="secondary" @click="openIframe(demo)">{{
-              i18nByKey('yan-shi')
-            }}</tiny-mobile-button>
+            <tiny-button tiny_mode="pc" @click="openIframe(demo)">{{ i18nByKey('yan-shi') }}</tiny-button>
           </div>
         </div>
         <div v-else class="pc-demo-container">
@@ -94,7 +92,6 @@ import demoConfig from '@demos/config.js'
 import { useApiMode, useTemplateMode } from '@/tools'
 import useTheme from '@/tools/useTheme'
 import AsyncHighlight from './async-highlight.vue'
-import { Button as TinyMobileButton } from '@opentiny/vue-mobile'
 
 const props = defineProps({
   demo: {

From dafa0bab0f76476e51f82ee3727912ecc520989a Mon Sep 17 00:00:00 2001
From: James-9696 <hujm969696@163.com>
Date: Tue, 21 Jan 2025 18:14:08 -0800
Subject: [PATCH 08/15] fix: modify components file

---
 .../sites/src/views/components/components.vue | 1086 ++++++++---------
 1 file changed, 534 insertions(+), 552 deletions(-)

diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index ebd440fc44..27bafd6a6e 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -2,11 +2,11 @@
   <!-- 一个组件的文档:  描述md + demos + apis -->
   <header class="flex-horizontal docs-header">
     <div class="docs-title-wrap">
-      <div class="markdown-body markdown-top-body" size="medium" v-html="cmpTopMd"></div>
+      <div class="markdown-body markdown-top-body" size="medium" v-html="state.cmpTopMd"></div>
       <version-tip
-        v-if="currJson.meta || currJson.versionTipOption"
-        :meta="currJson.meta"
-        v-bind="currJson.versionTipOption"
+        v-if="state.currJson.meta || state.currJson.versionTipOption"
+        :meta="state.currJson.meta"
+        v-bind="state.currJson.versionTipOption"
       >
       </version-tip>
     </div>
@@ -20,19 +20,19 @@
     <div class="ti-rel cmp-container">
       <div class="flex-horizontal docs-content-main">
         <div class="docs-tabs-wrap">
-          <tiny-tabs v-model="activeTab" ref="demoTabs" class="docs-content-tabs" @click="onTabsClick">
+          <tiny-tabs v-model="state.activeTab" ref="demoTabs" class="docs-content-tabs" @click="onTabsClick">
             <tiny-tab-item :title="i18nByKey('demos')" name="demos">
               <!-- demos列表 -->
-              <template v-if="currJson?.demos?.length">
+              <template v-if="state.currJson?.demos?.length">
                 <div class="all-demos-container" id="all-demos-container">
                   <div v-if="apiModeState.demoMode === 'default'" id="demo-list" class="ti-f-c ti-f-wrap demo-list">
                     <demo
-                      v-for="demo in currJson.demos"
+                      v-for="demo in state.currJson.demos"
                       :key="demo.name"
-                      :observer="observer"
+                      :observer="state.observer"
                       :isIntersecting="demo.isIntersecting"
                       :demo="demo"
-                      :curr-demo-id="currDemoId"
+                      :curr-demo-id="state.currDemoId"
                       class="mb32"
                       @mounted="demoMounted"
                       @get-iframe-demo="getIframeDemo"
@@ -40,10 +40,10 @@
                   </div>
                   <div v-else>
                     <demo
-                      v-if="singleDemo"
+                      v-if="state.singleDemo"
                       :isIntersecting="true"
-                      :key="singleDemo.name"
-                      :demo="singleDemo"
+                      :key="state.singleDemo.name"
+                      :demo="state.singleDemo"
                       @get-iframe-demo="getIframeDemo"
                     />
                   </div>
@@ -51,9 +51,9 @@
               </template>
 
               <!-- 贡献者 -->
-              <div class="cmp-contributor" v-if="contributors.length">
+              <div class="cmp-contributor" v-if="state.contributors.length">
                 <h2 class="cmp-contributor-title">{{ i18nByKey('contributor') }}</h2>
-                <template v-for="item in contributors" :key="item.id">
+                <template v-for="item in state.contributors" :key="item.id">
                   <tiny-tooltip popper-class="docs-tooltip" placement="top" effect="light">
                     <template #content>
                       <span class="cmp-contributor-tip">{{ item.nickname }}</span>
@@ -65,12 +65,16 @@
                 </template>
               </div>
             </tiny-tab-item>
-            <tiny-tab-item v-if="showApiTab && !isRunningTest && currJson.apis?.length" title="API" name="api">
+            <tiny-tab-item
+              v-if="state.showApiTab && !isRunningTest && state.currJson.apis?.length"
+              title="API"
+              name="api"
+            >
               <!-- api文档 -->
               <div id="API" class="all-api-container">
                 <div class="ti-f-c ti-f-wrap api-list">
                   <!-- apis 是一个数组 {name,type,properties:[原table内容],events:[] ...........} -->
-                  <div class="mt20 wp100" v-for="oneGroup in currJson.apis" :key="oneGroup.name">
+                  <div class="mt20 wp100" v-for="oneGroup in state.currJson.apis" :key="oneGroup.name">
                     <div class="ti-f-r ti-f-pos-start ti-fw-bold">
                       <h2 :id="`cmp-${oneGroup.name}`" class="ti-f18">
                         {{ oneGroup.name }}
@@ -88,8 +92,8 @@
                           <tiny-grid
                             ref="apiTableRef"
                             class="api-table"
-                            :data="tableData[oneGroup.name][key]"
-                            :expand-config="apiExpandConf"
+                            :data="state.tableData[oneGroup.name][key]"
+                            :expand-config="state.apiExpandConf"
                             row-id="name"
                           >
                             <tiny-grid-column class-name="api-table-expand-col" type="expand" width="32">
@@ -97,19 +101,23 @@
                                 <async-highlight
                                   v-if="row.code"
                                   :code="row.code.trim()"
-                                  :types="chartCode ? 'html' : 'ts'"
+                                  :types="state.chartCode ? 'html' : 'ts'"
                                 ></async-highlight>
                                 <div v-if="row.depTypes">
                                   <async-highlight
                                     v-for="(k, i) in row.depTypes"
                                     :key="i"
-                                    :code="currJson.types[k]?.code"
+                                    :code="state.currJson.types[k]?.code"
                                     types="ts"
                                   ></async-highlight>
                                 </div>
                               </template>
                             </tiny-grid-column>
-                            <tiny-grid-column field="name" :title="i18nByKey('name')" :width="columnWidth[key][0]">
+                            <tiny-grid-column
+                              field="name"
+                              :title="i18nByKey('name')"
+                              :width="state.columnWidth[key][0]"
+                            >
                               <template #default="{ row }">
                                 <span class="api-table-name">
                                   <a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
@@ -126,17 +134,17 @@
                               </template>
                             </tiny-grid-column>
                             <tiny-grid-column
-                              v-if="tableData[oneGroup.name][key].find((i) => i.type)"
+                              v-if="state.tableData[oneGroup.name][key].find((i) => i.type)"
                               field="type"
                               :title="i18nByKey('propType')"
-                              :width="columnWidth[key][1]"
+                              :width="state.columnWidth[key][1]"
                             >
                               <template #default="{ row }">
                                 <span
                                   :class="{ 'type-link': row.typeAnchorName || row.linkTo }"
                                   :id="row.typeAnchorName ? row.type : ''"
                                   @click="toOuterType(row)"
-                                  >{{ row.type }} <icon-outer-link v-if="row.linkTo"></icon-outer-link
+                                  >{{ row.type }} <IconOuterLink v-if="row.linkTo"></IconOuterLink
                                 ></span>
                               </template>
                             </tiny-grid-column>
@@ -144,7 +152,7 @@
                               v-if="key === 'props' || key === 'options'"
                               field="defaultValue"
                               :title="i18nByKey('defValue')"
-                              :width="columnWidth[key][2]"
+                              :width="state.columnWidth[key][2]"
                             ></tiny-grid-column>
                             <tiny-grid-column field="desc" :title="i18nByKey('desc')">
                               <template #default="data">
@@ -165,18 +173,18 @@
           <!-- 移动端展示内容 -->
           <div class="phone-container">
             <div class="mobile-iframe-container">
-              <iframe ref="iframeRef" width="100%" height="100%" :src="iframeUrl" frameborder="0"></iframe>
+              <iframe ref="iframeRef" width="100%" height="100%" :src="state.iframeUrl" frameborder="0"></iframe>
             </div>
           </div>
         </div>
         <!-- demo与api目录锚点 -->
-        <div class="cmp-page-anchor catalog" v-if="currAnchorLinks.length">
+        <div class="cmp-page-anchor catalog" v-if="state.currAnchorLinks.length">
           <tiny-anchor
             id="anchor"
             :offset-top="56"
-            :links="currAnchorLinks"
+            :links="state.currAnchorLinks"
             :key="anchorRefreshKey"
-            :is-affix="anchorAffix"
+            :is-affix="state.anchorAffix"
             type="dot"
             container-id="#doc-layout-scroller"
             @link-click="handleAnchorClick"
@@ -185,22 +193,30 @@
         </div>
       </div>
 
-      <h2 id="FAQ" v-if="cmpFAQMd" class="ti-f30 ti-fw-normal ti-mt28 ti-mb20">FAQ</h2>
-      <div class="markdown-body" v-html="cmpFAQMd"></div>
-      <div v-if="currJson.owner" class="ti-abs ti-right24 ti-top24" @click="copyText(currJson.owner)">
-        {{ i18nByKey('doc-owner') }} : {{ currJson.owner }}
+      <h2 id="FAQ" v-if="state.cmpFAQMd" class="ti-f30 ti-fw-normal ti-mt28 ti-mb20">FAQ</h2>
+      <div class="markdown-body" v-html="state.cmpFAQMd"></div>
+      <div v-if="state.currJson.owner" class="ti-abs ti-right24 ti-top24" @click="copyText(state.currJson.owner)">
+        {{ i18nByKey('doc-owner') }} : {{ state.currJson.owner }}
       </div>
     </div>
     <div id="footer"></div>
   </div>
 </template>
 
-<script lang="jsx">
-import { defineComponent, reactive, computed, toRefs, watch, onMounted, onUnmounted, nextTick, ref } from 'vue'
+<script setup lang="ts">
+import { reactive, computed, watch, onMounted, onUnmounted, nextTick, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { marked } from 'marked'
 import hljs from 'highlight.js'
-import { Anchor, ButtonGroup, Grid, GridColumn, Tabs, TabItem, Tooltip } from '@opentiny/vue'
+import {
+  Anchor as TinyAnchor,
+  ButtonGroup as TinyButtonGroup,
+  Grid as TinyGrid,
+  GridColumn as TinyGridColumn,
+  Tabs as TinyTabs,
+  TabItem as TinyTabItem,
+  Tooltip as TinyTooltip
+} from '@opentiny/vue'
 import { iconOuterLink } from '@opentiny/vue-icon'
 import debounce from '@opentiny/vue-renderless/common/deps/debounce'
 import { i18nByKey, getWord, $clone, fetchDemosFile, useApiMode, useTemplateMode, getCmpContributors } from '@/tools'
@@ -211,585 +227,551 @@ import { faqMdConfig, getWebdocPath } from './cmp-config'
 import AsyncHighlight from './async-highlight.vue'
 import VersionTip from './VersionTip.vue'
 
-export default defineComponent({
-  name: 'CmpPageVue',
-  components: {
-    Demo: demo,
-    TinyAnchor: Anchor,
-    TinyButtonGroup: ButtonGroup,
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem,
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyTooltip: Tooltip,
-    IconOuterLink: iconOuterLink(),
-    AsyncHighlight,
-    VersionTip
-  },
-  setup() {
-    const iframeRef = ref()
-    const isRunningTest = localStorage.getItem('tiny-e2e-test') === 'true'
-    const anchorRefreshKey = ref(0)
-    const apiTableRef = ref()
-    const route = useRoute()
-
-    const state = reactive({
-      webDocPath: computed(() => ''),
-      langKey: getWord('zh-CN', 'en-US'),
-      cmpId: '',
-      observer: null,
-      currJson: { column: 1, demos: [], apis: [], types: {} },
-      cmpTopMd: null,
-      cmpFAQMd: null,
-      currDemoId: '',
-      demoAnchorLinks: computed(() => {
-        const links =
-          state.currJson?.demos?.map((demo) => ({
-            key: demo.demoId,
-            title: demo.name[state.langKey],
-            link: `#${demo.demoId}`
-          })) || []
-        if (state.cmpFAQMd) {
-          links.push({
-            key: 'FAQ',
-            title: 'FAQ',
-            link: '#FAQ'
-          })
-        }
-        return links
-      }),
-      iframeUrl: '',
-      apiAnchorLinks: computed(() => getApiAnchorLinks()),
-      anchorAffix: true,
-      currAnchorLinks: computed(() => (state.activeTab === 'demos' ? state.demoAnchorLinks : state.apiAnchorLinks)),
-      // 单demo显示时
-      singleDemo: null,
-      activeTab: route.hash === '#api' ? 'api' : 'demos',
-      tableData: {},
-      currApiTypes: [],
-      showApiTab: computed(() => state.currApiTypes.length),
-      columnWidth: {
-        props: ['15%', '20%', '15%'],
-        options: ['15%', '20%', '15%'],
-        events: ['15%', '25%', 0],
-        methods: ['15%', '20%', 0],
-        slots: ['15%', 0, 0],
-        format: ['15%', 0, 0]
-      },
-      apiExpandConf: {
-        expandAll: false,
-        trigger: 'row',
-        expandRowKeys: [],
-        accordion: false,
-        activeMethod: (row) => row.typeAnchorName,
-        showIcon: true // 配置是否显示展开图标
-      },
-      contributors: [], // 贡献者
-      chartCode: false
-    })
+defineOptions({
+  name: 'CmpPageVue'
+})
 
-    const { apiModeState } = useApiMode()
-    const { templateModeState, staticPath, optionsList } = useTemplateMode()
-
-    let finishNum = 0
-    let isAllMounted = false
-    let demoMountedResolve
-    const demoMounted = () => {
-      finishNum++
-      if (finishNum === state.currJson.demos.length) {
-        isAllMounted = true
-        demoMountedResolve(true)
-      }
+const { apiModeState } = useApiMode()
+const { templateModeState, staticPath, optionsList } = useTemplateMode()
+const IconOuterLink = iconOuterLink()
+const iframeRef = ref()
+const isRunningTest = localStorage.getItem('tiny-e2e-test') === 'true'
+const anchorRefreshKey = ref(0)
+const apiTableRef = ref()
+const route = useRoute()
+const state = reactive({
+  webDocPath: computed(() => ''),
+  langKey: getWord('zh-CN', 'en-US'),
+  cmpId: '',
+  observer: null,
+  currJson: { column: 1, demos: [], apis: [], types: {} },
+  cmpTopMd: null,
+  cmpFAQMd: null,
+  currDemoId: '',
+  demoAnchorLinks: computed(() => {
+    const links =
+      state.currJson?.demos?.map((demo) => ({
+        key: demo.demoId,
+        title: demo.name[state.langKey],
+        link: `#${demo.demoId}`
+      })) || []
+    if (state.cmpFAQMd) {
+      links.push({
+        key: 'FAQ',
+        title: 'FAQ',
+        link: '#FAQ'
+      })
     }
-
-    const getIframeConetent = (demoId, demoName) => {
-      const frameWindow = iframeRef.value.contentWindow
-      frameWindow.postMessage({ from: 'tiny-vue-site', component: state.cmpId, demo: demoName })
-      router.push(`#${demoId}`)
+    return links
+  }),
+  iframeUrl: '',
+  apiAnchorLinks: computed(() => getApiAnchorLinks()),
+  anchorAffix: true,
+  currAnchorLinks: computed(() => (state.activeTab === 'demos' ? state.demoAnchorLinks : state.apiAnchorLinks)),
+  // 单demo显示时
+  singleDemo: null,
+  activeTab: route.hash === '#api' ? 'api' : 'demos',
+  tableData: {},
+  currApiTypes: [],
+  showApiTab: computed(() => state.currApiTypes.length),
+  columnWidth: {
+    props: ['15%', '20%', '15%'],
+    options: ['15%', '20%', '15%'],
+    events: ['15%', '25%', 0],
+    methods: ['15%', '20%', 0],
+    slots: ['15%', 0, 0],
+    format: ['15%', 0, 0]
+  },
+  apiExpandConf: {
+    expandAll: false,
+    trigger: 'row',
+    expandRowKeys: [],
+    accordion: false,
+    activeMethod: (row) => row.typeAnchorName,
+    showIcon: true // 配置是否显示展开图标
+  },
+  contributors: [], // 贡献者
+  chartCode: false
+})
+let finishNum = ref(0)
+let isAllMounted = ref(false)
+let demoMountedResolve
+
+watch(
+  () => router.currentRoute.value.params.cmpId,
+  (cmpId) => {
+    if (!cmpId) {
+      state.currJson = {}
+    } else {
+      loadPage()
+      // 切换组件时tabs激活页变成demos
+      state.activeTab = 'demos'
+      // 每次切换组件都需要让锚点组件重新刷新
+      anchorRefreshKey.value++
     }
+  }
+)
 
-    const getIframeDemo = (demo) => {
-      if (demo?.codeFiles.length > 0) {
-        getIframeConetent(demo.demoId, demo.codeFiles[0])
-        jumpToMobileDemoAndHash(demo.demoId)
-        state.currDemoId = demo.demoId
-        state.currJson.demos.forEach((item) => {
-          if (item.demoId === demo.demoId) {
-            item.isIntersecting = true
-          }
-        })
-      }
+watch(
+  () => apiModeState.demoMode,
+  (value) => {
+    if (value) {
+      scrollToLayoutTop()
     }
+  }
+)
 
-    const jumpToMobileDemoAndHash = (hash) => {
-      if (apiModeState.demoMode === 'single') {
-        const singleDemo = state.currJson.demos.find((d) => d.demoId === hash)
+watch(
+  () => templateModeState.mode,
+  () => {
+    loadPage()
+  }
+)
+
+onMounted(() => {
+  loadPage()
+  // 加载公共尾部
+  const common = new window.TDCommon(['#footer'], {})
+  common.renderFooter()
+  setScrollListener()
+})
 
-        // 单示例模式下如果没有匹配到锚点对应的示例，则这不加载示例直接跳转锚点id
-        if (singleDemo) {
-          state.singleDemo = singleDemo
-          scrollToLayoutTop()
-        }
-      } else if (apiModeState.demoMode === 'default') {
-        // 多示例模式，自动会切到相应的位置。只需要记录singleDemo就好了
-        state.singleDemo = state.currJson.demos.find((d) => d.demoId === hash)
-        scrollByHash(hash)
-      }
-    }
+onUnmounted(() => {
+  removeScrollListener()
+})
 
-    const allDemoMounted = async () => {
-      if (isAllMounted) {
-        return isAllMounted
-      }
-      return new Promise((resolve) => {
-        demoMountedResolve = resolve
-      })
-    }
+const demoMounted = () => {
+  finishNum.value++
+  if (finishNum.value === state.currJson.demos.length) {
+    isAllMounted.value = true
+    demoMountedResolve(true)
+  }
+}
 
-    const getApiAnchorLinks = () => {
-      if (!state.currJson.apis?.length) {
-        return []
+const getIframeConetent = (demoId, demoName) => {
+  const frameWindow = iframeRef.value.contentWindow
+  frameWindow.postMessage({ from: 'tiny-vue-site', component: state.cmpId, demo: demoName })
+  router.push(`#${demoId}`)
+}
+
+const getIframeDemo = (demo) => {
+  if (demo?.codeFiles.length > 0) {
+    getIframeConetent(demo.demoId, demo.codeFiles[0])
+    jumpToMobileDemoAndHash(demo.demoId)
+    state.currDemoId = demo.demoId
+    state.currJson.demos.forEach((item) => {
+      if (item.demoId === demo.demoId) {
+        item.isIntersecting = true
       }
+    })
+  }
+}
 
-      const apiAnchorLinks = []
-      state.currJson.apis?.forEach((apiGroup) => {
-        const { name } = apiGroup
-        const typeLinks = state.currApiTypes
-          .filter((i) => apiGroup[i]?.length)
-          .map((i) => ({
-            key: i,
-            link: `#${name}--${i}`,
-            title: i
-          }))
-
-        const linkItem = {
-          key: name,
-          link: `#cmp-${name}`,
-          title: name,
-          children: typeLinks
-        }
-        apiAnchorLinks.push(linkItem)
-      })
+const jumpToMobileDemoAndHash = (hash) => {
+  if (apiModeState.demoMode === 'single') {
+    const singleDemo = state.currJson.demos.find((d) => d.demoId === hash)
 
-      return apiAnchorLinks
+    // 单示例模式下如果没有匹配到锚点对应的示例，则这不加载示例直接跳转锚点id
+    if (singleDemo) {
+      state.singleDemo = singleDemo
+      scrollToLayoutTop()
     }
+  } else if (apiModeState.demoMode === 'default') {
+    // 多示例模式，自动会切到相应的位置。只需要记录singleDemo就好了
+    state.singleDemo = state.currJson.demos.find((d) => d.demoId === hash)
+    scrollByHash(hash)
+  }
+}
 
-    // 封装api表格数据
-    const parseApiData = () => {
-      if (!state.currJson.apis?.length) {
-        return {}
-      }
+const allDemoMounted = async () => {
+  if (isAllMounted.value) {
+    return isAllMounted.value
+  }
+  return new Promise((resolve) => {
+    demoMountedResolve = resolve
+  })
+}
 
-      const tableData = {}
-      const apis = state.currJson.apis || []
-      for (const apiGroup of apis) {
-        const apiDisplay = {}
-        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 item = {
-                name,
-                type,
-                defaultValue: defaultValue || '--',
-                desc: desc[state.langKey],
-                demoId,
-                meta,
-                versionTipOption,
-                typeAnchorName: '',
-                linkTo
-              }
-              if (typeAnchorName) {
-                item.typeAnchorName = `${typeAnchorName?.includes('#') ? '' : '#'}${typeAnchorName}`
-                item.code = state.currJson.types[i.typeAnchorName]?.code || ''
-                item.depTypes = state.currJson.types[i.typeAnchorName]?.depTypes || []
-              }
-              return item
-            })
-            apiDisplay[apiType] = apiArr.sort((a, b) => a.name.localeCompare(b.name))
-            state.currApiTypes = Array.from(new Set([...state.currApiTypes, apiType]))
-          }
-        }
+const getApiAnchorLinks = () => {
+  if (!state.currJson.apis?.length) {
+    return []
+  }
 
-        tableData[apiGroup.name] = apiDisplay
-      }
-      state.tableData = tableData
+  const apiAnchorLinks = []
+  state.currJson.apis?.forEach((apiGroup) => {
+    const { name } = apiGroup
+    const typeLinks = state.currApiTypes
+      .filter((i) => apiGroup[i]?.length)
+      .map((i) => ({
+        key: i,
+        link: `#${name}--${i}`,
+        title: i
+      }))
+
+    const linkItem = {
+      key: name,
+      link: `#cmp-${name}`,
+      title: name,
+      children: typeLinks
     }
+    apiAnchorLinks.push(linkItem)
+  })
 
-    const getRowData = (type) => {
-      const tableData = state.tableData
-      let rowData
-      for (const comp of Object.values(tableData)) {
-        for (const apiGroup of Object.values(comp)) {
-          rowData = apiGroup.find((i) => i.type === type)
-          if (rowData) {
-            return rowData
+  return apiAnchorLinks
+}
+
+// 封装api表格数据
+const parseApiData = () => {
+  if (!state.currJson.apis?.length) {
+    return {}
+  }
+
+  const tableData = {}
+  const apis = state.currJson.apis || []
+  for (const apiGroup of apis) {
+    const apiDisplay = {}
+    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 item = {
+            name,
+            type,
+            defaultValue: defaultValue || '--',
+            desc: desc[state.langKey],
+            demoId,
+            meta,
+            versionTipOption,
+            typeAnchorName: '',
+            linkTo
           }
-        }
+          if (typeAnchorName) {
+            item.typeAnchorName = `${typeAnchorName?.includes('#') ? '' : '#'}${typeAnchorName}`
+            item.code = state.currJson.types[i.typeAnchorName]?.code || ''
+            item.depTypes = state.currJson.types[i.typeAnchorName]?.depTypes || []
+          }
+          return item
+        })
+        apiDisplay[apiType] = apiArr.sort((a, b) => a.name.localeCompare(b.name))
+        state.currApiTypes = Array.from(new Set([...state.currApiTypes, apiType]))
       }
     }
 
-    const jumpToApi = (hash) => {
-      state.activeTab = 'api'
-      nextTick(() => {
-        const rowData = getRowData(hash)
-        const row = document.getElementById(hash).closest('.tiny-grid-body__row')
-        if (row) {
-          apiTableRef.value.forEach((i) => {
-            i.setCurrentRow(rowData)
-            i.setRowExpansion(rowData, true)
-          })
-        }
-      })
+    tableData[apiGroup.name] = apiDisplay
+  }
+  state.tableData = tableData
+}
+
+const getRowData = (type) => {
+  const tableData = state.tableData
+  let rowData
+  for (const comp of Object.values(tableData)) {
+    for (const apiGroup of Object.values(comp)) {
+      rowData = apiGroup.find((i) => i.type === type)
+      if (rowData) {
+        return rowData
+      }
     }
+  }
+}
 
-    // 页面加载/点击api中的链接，根据hash滚动。
-    const scrollByHash = (hash) => {
-      setTimeout(() => {
-        if (!hash) {
-          document.getElementById('doc-layout-scroller').scrollTo({
-            top: 0,
-            left: 0
-          })
-        } else if (state.currJson.types[hash]) {
-          jumpToApi(hash)
-        } else {
-          let scrollTarget
-          try {
-            //  用户打开官网有时候会带一些特殊字符的hash，try catch一下防止js报错
-            scrollTarget = document.querySelector(`#${hash}`)
-          } catch (err) {}
-
-          if (scrollTarget && !isRunningTest) {
-            // doc-layout-scroller(滚动) > tabs > tab-content(relative)， 造成  scrollTarget.offsetTop 是相对于 tab-content的距离
-            // 所以滚动需要修正 tab-title的占位高度才行
-            document.getElementById('doc-layout-scroller').scrollTo({
-              top: scrollTarget.offsetTop,
-              left: 0,
-              behavior: 'smooth'
-            })
-          }
-        }
-      }, 0)
+const jumpToApi = (hash) => {
+  state.activeTab = 'api'
+  nextTick(() => {
+    const rowData = getRowData(hash)
+    const row = document.getElementById(hash).closest('.tiny-grid-body__row')
+    if (row) {
+      apiTableRef.value.forEach((i) => {
+        i.setCurrentRow(rowData)
+        i.setRowExpansion(rowData, true)
+      })
     }
+  })
+}
 
-    // 在singleDemo情况时，才需要滚动示例区域到顶
-    const scrollToLayoutTop = () => {
-      let hash = router.currentRoute.value.hash?.slice(1)
-      if (hash !== 'API') {
-        setTimeout(() => {
-          document.getElementById('doc-layout-scroller').scrollTo({
-            top: 0,
-            left: 0,
-            behavior: 'smooth'
-          })
-        }, 0)
+// 页面加载/点击api中的链接，根据hash滚动。
+const scrollByHash = (hash) => {
+  setTimeout(() => {
+    if (!hash) {
+      document.getElementById('doc-layout-scroller').scrollTo({
+        top: 0,
+        left: 0
+      })
+    } else if (state.currJson.types[hash]) {
+      jumpToApi(hash)
+    } else {
+      let scrollTarget
+      try {
+        //  用户打开官网有时候会带一些特殊字符的hash，try catch一下防止js报错
+        scrollTarget = document.querySelector(`#${hash}`)
+      } catch (err) {}
+
+      if (scrollTarget && !isRunningTest) {
+        // doc-layout-scroller(滚动) > tabs > tab-content(relative)， 造成  scrollTarget.offsetTop 是相对于 tab-content的距离
+        // 所以滚动需要修正 tab-title的占位高度才行
+        document.getElementById('doc-layout-scroller').scrollTo({
+          top: scrollTarget.offsetTop,
+          left: 0,
+          behavior: 'smooth'
+        })
       }
     }
+  }, 0)
+}
 
-    // saas下切换mode和组价示例都会触发loadPage,需要防抖
-    const loadPage = debounce(templateModeState.isSaas ? 100 : 0, false, () => {
-      const lang = getWord('cn', 'en')
-      state.cmpId = router.currentRoute.value.params.cmpId
-
-      // 将请求合并起来，这样页面更新一次，页面刷新的时机就固定了
-      const promiseArr = [
-        fetchDemosFile(`${staticPath.value}/${getWebdocPath(state.cmpId)}/webdoc/${state.cmpId}.${lang}.md`),
-        null,
-        fetchDemosFile(
-          `@demos/apis/${getWebdocPath(state.cmpId) === 'chart' ? state.cmpId : getWebdocPath(state.cmpId)}.js`
-        )
-      ]
-
-      state.chartCode = getWebdocPath(state.cmpId) === 'chart'
-
-      // 兼容ts文档
-      if (['interfaces', 'types', 'classes'].includes(state.cmpId)) {
-        state.activeTab = 'api'
-      } else {
-        promiseArr[1] = fetchDemosFile(`${staticPath.value}/${getWebdocPath(state.cmpId)}/webdoc/${state.cmpId}.js`)
-      }
+// 在singleDemo情况时，才需要滚动示例区域到顶
+const scrollToLayoutTop = () => {
+  let hash = router.currentRoute.value.hash?.slice(1)
+  if (hash !== 'API') {
+    setTimeout(() => {
+      document.getElementById('doc-layout-scroller').scrollTo({
+        top: 0,
+        left: 0,
+        behavior: 'smooth'
+      })
+    }, 0)
+  }
+}
 
-      if (faqMdConfig[state.cmpId]) {
-        promiseArr.push(
-          fetchDemosFile(`${staticPath.value}/${getWebdocPath(state.cmpId)}/webdoc/${state.cmpId}.faq.${lang}.md`)
-        )
-      }
+// saas下切换mode和组价示例都会触发loadPage,需要防抖
+const loadPage = debounce(templateModeState.isSaas ? 100 : 0, false, () => {
+  const lang = getWord('cn', 'en')
+  state.cmpId = router.currentRoute.value.params.cmpId
+
+  // 将请求合并起来，这样页面更新一次，页面刷新的时机就固定了
+  const promiseArr = [
+    fetchDemosFile(`${staticPath.value}/${getWebdocPath(state.cmpId)}/webdoc/${state.cmpId}.${lang}.md`),
+    null,
+    fetchDemosFile(
+      `@demos/apis/${getWebdocPath(state.cmpId) === 'chart' ? state.cmpId : getWebdocPath(state.cmpId)}.js`
+    )
+  ]
 
-      Promise.all(promiseArr)
-        .then(([mdData, jsData, apiData, faqData]) => {
-          // 1、加载顶部md
-          state.cmpTopMd = marked(mdData, {
-            gfm: true,
-            highlight(code, language) {
-              const validLanguage = hljs.getLanguage(language) ? language : 'plaintext'
-              return hljs.highlight(code, { language: validLanguage }).value
-            }
-          })
+  state.chartCode = getWebdocPath(state.cmpId) === 'chart'
 
-          // 2、加载faq.md
-          if (faqData) {
-            state.cmpFAQMd = marked(faqData)
-          }
-
-          // 3、加载cmpId.js 文件
-          // eslint-disable-next-line no-eval
-          const json = jsData ? eval('(' + jsData.slice(15) + ')') : {}
+  // 兼容ts文档
+  if (['interfaces', 'types', 'classes'].includes(state.cmpId)) {
+    state.activeTab = 'api'
+  } else {
+    promiseArr[1] = fetchDemosFile(`${staticPath.value}/${getWebdocPath(state.cmpId)}/webdoc/${state.cmpId}.js`)
+  }
 
-          // 默认设置每个实例demo都不和视图相交
-          json.demos?.forEach((item) => {
-            item.isIntersecting = false
-          })
+  if (faqMdConfig[state.cmpId]) {
+    promiseArr.push(
+      fetchDemosFile(`${staticPath.value}/${getWebdocPath(state.cmpId)}/webdoc/${state.cmpId}.faq.${lang}.md`)
+    )
+  }
 
-          state.currJson = {
-            ...json,
-            demos: $clone(json.demos || []), // 克隆一下,避免保存上次的isOpen
-            column: json.column || '1' // columns可能为空
-          }
+  Promise.all(promiseArr)
+    .then(([mdData, jsData, apiData, faqData]) => {
+      // 1、加载顶部md
+      state.cmpTopMd = marked(mdData, {
+        gfm: true,
+        highlight(code, language) {
+          const validLanguage = hljs.getLanguage(language) ? language : 'plaintext'
+          return hljs.highlight(code, { language: validLanguage }).value
+        }
+      })
 
-          if (apiData) {
-            // eslint-disable-next-line no-eval
-            const apiJson = eval('(' + apiData.slice(15) + ')')
-            // pc、mobile、mobile-first三种模式
-            const demoMode = templateModeState.isSaas ? templateModeState.mode : import.meta.env.VITE_APP_MODE
-            const demoKey = demoMode === 'mobile-first' ? 'mfDemo' : `${demoMode}Demo`
-            state.currJson.apis = apiJson.apis.map((item) => {
-              Object.keys(item).forEach((key) => {
-                const apiItem = item[key]
-                if (Array.isArray(apiItem)) {
-                  item[key] = apiItem
-                    .filter((i) => !i.mode || i.mode.includes(demoMode))
-                    .map((filterItem) => ({ ...filterItem, demoId: filterItem[demoKey] }))
-                }
-              })
-              return item
-            })
-            state.currJson.types =
-              apiJson.types?.reduce((res, cur) => {
-                res[cur.name] = cur
-                return res
-              }, {}) || {}
-            parseApiData()
-          }
+      // 2、加载faq.md
+      if (faqData) {
+        state.cmpFAQMd = marked(faqData)
+      }
 
-          let hash = router.currentRoute.value.hash?.slice(1)
+      // 3、加载cmpId.js 文件
+      // eslint-disable-next-line no-eval
+      const json = jsData ? eval('(' + jsData.slice(15) + ')') : {}
 
-          // 单demo处理，如果有hash,取hash的demo, 没有hash, 取第1项
-          if (hash) {
-            state.singleDemo = state.currJson.demos.find((d) => d.demoId === hash)
-            if (!state.singleDemo) {
-              state.singleDemo = state.currJson.demos[0]
-            }
-          } else {
-            state.singleDemo = state.currJson.demos[0]
-          }
+      // 默认设置每个实例demo都不和视图相交
+      json.demos?.forEach((item) => {
+        item.isIntersecting = false
+      })
 
-          if (demoConfig.isMobile && !hash) {
-            // 初始化iframe,当前组件第一个demo展示
-            state.iframeUrl = `${import.meta.env.VITE_MOBILE_URL}?component=${state.cmpId}&demo=${
-              state.currJson?.demos[0].codeFiles[0]
-            }`
-          } else {
-            state.iframeUrl = `${import.meta.env.VITE_MOBILE_URL}?component=${state.cmpId}&demo=${hash}.vue`
-          }
+      state.currJson = {
+        ...json,
+        demos: $clone(json.demos || []), // 克隆一下,避免保存上次的isOpen
+        column: json.column || '1' // columns可能为空
+      }
 
-          // F5刷新加载时，跳到当前示例
-          // 应当在所有demo渲染完毕后在滚动，否则滚动完位置后，demo渲染会使滚动位置错位
-          return allDemoMounted().then(() => {
-            scrollByHash(hash)
+      if (apiData) {
+        // eslint-disable-next-line no-eval
+        const apiJson = eval('(' + apiData.slice(15) + ')')
+        // pc、mobile、mobile-first三种模式
+        const demoMode = templateModeState.isSaas ? templateModeState.mode : import.meta.env.VITE_APP_MODE
+        const demoKey = demoMode === 'mobile-first' ? 'mfDemo' : `${demoMode}Demo`
+        state.currJson.apis = apiJson.apis.map((item) => {
+          Object.keys(item).forEach((key) => {
+            const apiItem = item[key]
+            if (Array.isArray(apiItem)) {
+              item[key] = apiItem
+                .filter((i) => !i.mode || i.mode.includes(demoMode))
+                .map((filterItem) => ({ ...filterItem, demoId: filterItem[demoKey] }))
+            }
           })
+          return item
         })
-        .finally(() => {
-          // 获取组件贡献者
-          getContributors()
-        })
-    })
-
-    /**
-     * 获取贡献者
-     */
-    const getContributors = () => {
-      const cmpId = state.cmpId?.includes('grid') ? 'grid' : state.cmpId
-      state.contributors = getCmpContributors(cmpId)
-    }
-
-    const onDocLayoutScroll = debounce(100, false, () => {
-      const docLayout = document.getElementById('doc-layout-scroller')
-      const { scrollTop, scrollHeight, clientHeight: layoutHeight } = docLayout
-      const headerHeight = document.querySelector('.docs-header')?.clientHeight || 0
-      const footerHeight = document.getElementById('footer')?.clientHeight || 0
-      const anchorHeight = document.querySelector('#anchor')?.clientHeight || 0
-      const remainHeight = scrollHeight - scrollTop - layoutHeight // doc-layout-scroller视口下隐藏的部分高度
-      state.anchorAffix = layoutHeight - headerHeight - (footerHeight - remainHeight) > anchorHeight
-    })
+        state.currJson.types =
+          apiJson.types?.reduce((res, cur) => {
+            res[cur.name] = cur
+            return res
+          }, {}) || {}
+        parseApiData()
+      }
 
-    const setScrollListener = () => {
-      nextTick(() => {
-        const docLayout = document.getElementById('doc-layout-scroller')
-        if (docLayout) {
-          docLayout.addEventListener('scroll', onDocLayoutScroll)
-        }
+      let hash = router.currentRoute.value.hash?.slice(1)
 
-        const options = {
-          root: docLayout,
-          threshold: 0.2
+      // 单demo处理，如果有hash,取hash的demo, 没有hash, 取第1项
+      if (hash) {
+        state.singleDemo = state.currJson.demos.find((d) => d.demoId === hash)
+        if (!state.singleDemo) {
+          state.singleDemo = state.currJson.demos[0]
         }
+      } else {
+        state.singleDemo = state.currJson.demos[0]
+      }
 
-        const callback = (entries) => {
-          entries.forEach((entry) => {
-            if (entry.isIntersecting) {
-              // 当demo示例与视图相交才加载对应的vue组件
-              const demoId = entry.target.id
-              state.currJson.demos.forEach((item) => {
-                if (item.demoId === demoId) {
-                  item.isIntersecting = true
-                }
-              })
-            }
-          })
-        }
+      if (demoConfig.isMobile && !hash) {
+        // 初始化iframe,当前组件第一个demo展示
+        state.iframeUrl = `${import.meta.env.VITE_MOBILE_URL}?component=${state.cmpId}&demo=${
+          state.currJson?.demos[0].codeFiles[0]
+        }`
+      } else {
+        state.iframeUrl = `${import.meta.env.VITE_MOBILE_URL}?component=${state.cmpId}&demo=${hash}.vue`
+      }
 
-        state.observer = new IntersectionObserver(callback, options)
+      // F5刷新加载时，跳到当前示例
+      // 应当在所有demo渲染完毕后在滚动，否则滚动完位置后，demo渲染会使滚动位置错位
+      return allDemoMounted().then(() => {
+        scrollByHash(hash)
       })
-    }
+    })
+    .finally(() => {
+      // 获取组件贡献者
+      getContributors()
+    })
+})
 
-    const removeScrollListener = () => {
-      const docLayout = document.getElementById('doc-layout-scroller')
-      if (docLayout) {
-        docLayout.removeEventListener('scroll', onDocLayoutScroll)
-      }
+/**
+ * 获取贡献者
+ */
+const getContributors = () => {
+  const cmpId = state.cmpId?.includes('grid') ? 'grid' : state.cmpId
+  state.contributors = getCmpContributors(cmpId)
+}
+
+const onDocLayoutScroll = debounce(100, false, () => {
+  const docLayout = document.getElementById('doc-layout-scroller')
+  const { scrollTop, scrollHeight, clientHeight: layoutHeight } = docLayout
+  const headerHeight = document.querySelector('.docs-header')?.clientHeight || 0
+  const footerHeight = document.getElementById('footer')?.clientHeight || 0
+  const anchorHeight = document.querySelector('#anchor')?.clientHeight || 0
+  const remainHeight = scrollHeight - scrollTop - layoutHeight // doc-layout-scroller视口下隐藏的部分高度
+  state.anchorAffix = layoutHeight - headerHeight - (footerHeight - remainHeight) > anchorHeight
+})
+
+const setScrollListener = () => {
+  nextTick(() => {
+    const docLayout = document.getElementById('doc-layout-scroller')
+    if (docLayout) {
+      docLayout.addEventListener('scroll', onDocLayoutScroll)
     }
 
-    const fn = {
-      demoMounted,
-      copyText: (text) => {
-        navigator.clipboard.writeText(text)
-      },
-      onTabsClick: (data) => {
-        if (data.name) {
-          router.push(`#${data.name}`)
-          scrollToLayoutTop()
-        }
-      },
-      // 点击 api区域的 name列时
-      jumpToDemo: (demoId) => {
-        state.activeTab = 'demos'
-        if (demoId.startsWith('chart') || demoId.startsWith('grid')) {
-          router.push(demoId)
-        } else {
-          if (demoId) {
-            router.push(`#${demoId}`)
-          }
-          if (apiModeState.demoMode === 'single') {
-            state.singleDemo = state.currJson.demos.find((d) => d.demoId === demoId)
-          }
-          scrollByHash(demoId)
-        }
-      },
+    const options = {
+      root: docLayout,
+      threshold: 0.2
+    }
 
-      // 跳转到其他组件的api
-      toOuterType(row) {
-        if (!row.linkTo) {
-          return
+    const callback = (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          // 当demo示例与视图相交才加载对应的vue组件
+          const demoId = entry.target.id
+          state.currJson.demos.forEach((item) => {
+            if (item.demoId === demoId) {
+              item.isIntersecting = true
+            }
+          })
         }
+      })
+    }
 
-        router.push(row.linkTo)
-      },
+    state.observer = new IntersectionObserver(callback, options)
+  })
+}
 
-      // 目录列表上的点击
-      handleAnchorClick: (e, data) => {
-        if (demoConfig.isMobile) {
-          // 点击目录列表更新iframe显示
-          const hashId = data.link.slice(1)
-          getIframeConetent(state.cmpId, hashId + '.vue')
-        }
+const removeScrollListener = () => {
+  const docLayout = document.getElementById('doc-layout-scroller')
+  if (docLayout) {
+    docLayout.removeEventListener('scroll', onDocLayoutScroll)
+  }
+}
 
-        if (apiModeState.demoMode === 'single' && data.link.startsWith('#')) {
-          e.preventDefault()
-          const hash = data.link.slice(1)
-          const singleDemo = state.currJson.demos.find((d) => d.demoId === hash)
+const copyText = (text) => {
+  navigator.clipboard.writeText(text)
+}
 
-          // 单示例模式下如果没有匹配到锚点对应的示例，则这不加载示例直接跳转锚点id
-          if (singleDemo) {
-            state.singleDemo = singleDemo
-            scrollToLayoutTop()
-          }
+const onTabsClick = (data) => {
+  if (data.name) {
+    router.push(`#${data.name}`)
+    scrollToLayoutTop()
+  }
+}
 
-          router.push(data.link)
-        } else if (apiModeState.demoMode === 'default' && data.link.startsWith('#')) {
-          // 多示例模式，自动会切到相应的位置。只需要记录singleDemo就好了
-          e.preventDefault()
-          const hash = data.link.slice(1)
-          state.currDemoId = hash
-          state.singleDemo = state.currJson.demos.find((d) => d.demoId === hash)
-          router.push(data.link)
-          scrollByHash(hash)
-        }
-      }
+// 点击 api区域的 name列时
+const jumpToDemo = (demoId) => {
+  state.activeTab = 'demos'
+  if (demoId.startsWith('chart') || demoId.startsWith('grid')) {
+    router.push(demoId)
+  } else {
+    if (demoId) {
+      router.push(`#${demoId}`)
     }
+    if (apiModeState.demoMode === 'single') {
+      state.singleDemo = state.currJson.demos.find((d) => d.demoId === demoId)
+    }
+    scrollByHash(demoId)
+  }
+}
 
-    watch(
-      () => router.currentRoute.value.params.cmpId,
-      (cmpId) => {
-        if (!cmpId) {
-          state.currJson = {}
-        } else {
-          loadPage()
-          // 切换组件时tabs激活页变成demos
-          state.activeTab = 'demos'
-          // 每次切换组件都需要让锚点组件重新刷新
-          anchorRefreshKey.value++
-        }
-      }
-    )
-
-    watch(
-      () => apiModeState.demoMode,
-      (value) => {
-        if (value) {
-          scrollToLayoutTop()
-        }
-      }
-    )
+// 跳转到其他组件的api
+const toOuterType = (row) => {
+  if (!row.linkTo) {
+    return
+  }
 
-    watch(
-      () => templateModeState.mode,
-      () => {
-        loadPage()
-      }
-    )
+  router.push(row.linkTo)
+}
 
-    onMounted(() => {
-      loadPage()
-      // 加载公共尾部
-      const common = new window.TDCommon(['#footer'], {})
-      common.renderFooter()
-      setScrollListener()
-    })
+// 目录列表上的点击
+const handleAnchorClick = (e, data) => {
+  if (demoConfig.isMobile) {
+    // 点击目录列表更新iframe显示
+    const hashId = data.link.slice(1)
+    getIframeConetent(state.cmpId, hashId + '.vue')
+  }
 
-    onUnmounted(() => {
-      removeScrollListener()
-    })
+  if (apiModeState.demoMode === 'single' && data.link.startsWith('#')) {
+    e.preventDefault()
+    const hash = data.link.slice(1)
+    const singleDemo = state.currJson.demos.find((d) => d.demoId === hash)
 
-    const hasKey = (apiArr, key) => !apiArr.every((item) => item[key] === undefined)
-
-    return {
-      ...toRefs(state),
-      ...fn,
-      getIframeDemo,
-      i18nByKey,
-      anchorRefreshKey,
-      apiModeState,
-      templateModeState,
-      optionsList,
-      hasKey,
-      isRunningTest,
-      apiTableRef,
-      demoConfig,
-      iframeRef
+    // 单示例模式下如果没有匹配到锚点对应的示例，则这不加载示例直接跳转锚点id
+    if (singleDemo) {
+      state.singleDemo = singleDemo
+      scrollToLayoutTop()
     }
+
+    router.push(data.link)
+  } else if (apiModeState.demoMode === 'default' && data.link.startsWith('#')) {
+    // 多示例模式，自动会切到相应的位置。只需要记录singleDemo就好了
+    e.preventDefault()
+    const hash = data.link.slice(1)
+    state.currDemoId = hash
+    state.singleDemo = state.currJson.demos.find((d) => d.demoId === hash)
+    router.push(data.link)
+    scrollByHash(hash)
   }
-})
+}
 </script>
 
 <style lang="less" scoped>
@@ -1115,10 +1097,10 @@ export default defineComponent({
   height: 770px;
   border: 0;
   position: fixed;
-  top: 280px;
+  top: 200px;
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYsAAAMFCAYAAACFxdoKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjg3MTZDNTAwMTI1MzExRUE5Mzk1OTFBNjdDQ0JBNUQ5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjg3MTZDNTAxMTI1MzExRUE5Mzk1OTFBNjdDQ0JBNUQ5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODcxNkM0RkUxMjUzMTFFQTkzOTU5MUE2N0NDQkE1RDkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODcxNkM0RkYxMjUzMTFFQTkzOTU5MUE2N0NDQkE1RDkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7YMDcrAAAcl0lEQVR42uzd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)
     no-repeat center top;
-  background-size: cover;
+  background-size: contain;
   z-index: 1;
 }
 

From a7654144e5e457197f863515605e4b669e4a94a0 Mon Sep 17 00:00:00 2001
From: James-9696 <hujm969696@163.com>
Date: Tue, 21 Jan 2025 18:59:03 -0800
Subject: [PATCH 09/15] fix: mobile display adjustment

---
 examples/sites/src/views/components/components.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index 803d7145fb..57d5562be6 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -360,11 +360,6 @@ const getIframeDemo = (demo) => {
     getIframeConetent(demo.demoId, demo.codeFiles[0])
     jumpToMobileDemoAndHash(demo.demoId)
     state.currDemoId = demo.demoId
-    state.currJson.demos.forEach((item) => {
-      if (item.demoId === demo.demoId) {
-        item.isIntersecting = true
-      }
-    })
   }
 }
 
@@ -380,7 +375,6 @@ const jumpToMobileDemoAndHash = (hash) => {
   } else if (apiModeState.demoMode === 'default') {
     // 多示例模式，自动会切到相应的位置。只需要记录singleDemo就好了
     state.singleDemo = state.currJson.demos.find((d) => d.demoId === hash)
-    scrollByHash(hash)
   }
 }
 
@@ -1107,6 +1101,7 @@ const handleAnchorClick = (e, data) => {
 
 .mobile-view-container {
   width: 400px;
+  margin: 0 20px;
 }
 
 .mobile-iframe-container {

From 19d78fae19d1666da03921b656dc88eaf5cc7166 Mon Sep 17 00:00:00 2001
From: gimmy <975402925@qq.com>
Date: Wed, 22 Jan 2025 23:15:30 +0800
Subject: [PATCH 10/15] fix: fix sites vite config

---
 examples/sites/vite.extend.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/examples/sites/vite.extend.ts b/examples/sites/vite.extend.ts
index 618dd69f21..9c748053d2 100644
--- a/examples/sites/vite.extend.ts
+++ b/examples/sites/vite.extend.ts
@@ -1,5 +1,7 @@
 import path from 'node:path'
 import tailwindCss from 'tailwindcss'
+import fg from 'fast-glob'
+import fs from 'fs-extra'
 
 // 删除构建后一些无用的静态资源
 export const delStaticPlugin = () => {

From 855e782536c39cbe88e94a0c08ce711cd7b186b1 Mon Sep 17 00:00:00 2001
From: gimmy <975402925@qq.com>
Date: Wed, 22 Jan 2025 23:47:15 +0800
Subject: [PATCH 11/15] fix: fix sites vite config

---
 examples/sites/env/.env.mobilepages | 9 +++++++++
 examples/sites/package.json         | 1 +
 2 files changed, 10 insertions(+)
 create mode 100644 examples/sites/env/.env.mobilepages

diff --git a/examples/sites/env/.env.mobilepages b/examples/sites/env/.env.mobilepages
new file mode 100644
index 0000000000..15d06101a2
--- /dev/null
+++ b/examples/sites/env/.env.mobilepages
@@ -0,0 +1,9 @@
+# 1、声明一个变量
+VITE_CONTEXT=/tiny-vue/
+VITE_BUILD_TARGET='inner'
+# 官网应用类型：pc / mobile / mobile-first
+VITE_APP_MODE='mobile'
+
+VITE_APP_BUILD_BASE_URL='/tiny-vue/'
+VITE_PLAYGROUND_URL=/playground.html
+VITE_MOBILE_URL=/mobile.html
diff --git a/examples/sites/package.json b/examples/sites/package.json
index 5e481421d9..24145ddb3f 100644
--- a/examples/sites/package.json
+++ b/examples/sites/package.json
@@ -15,6 +15,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:mobile:page": "vite build --mode mobilepages && cp cp-component-md.sh ./dist",
     "build:visualizer": "vite build --mode visualizer",
     "build:open": "vite build --mode open",
     "prettier": "npx prettier --write ./**/*.{ts,tsx,css,less,scss,vue}",

From a46ec22b71f20c209c6301229b2d6194fd24e100 Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Thu, 23 Jan 2025 11:15:49 +0800
Subject: [PATCH 12/15] fix: fix demo not visible after build

---
 examples/sites/demos/mobile/config.js              | 2 +-
 examples/sites/src/views/components/components.vue | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/examples/sites/demos/mobile/config.js b/examples/sites/demos/mobile/config.js
index 4059ce183c..ab99dae059 100644
--- a/examples/sites/demos/mobile/config.js
+++ b/examples/sites/demos/mobile/config.js
@@ -8,6 +8,6 @@ export default {
   base: '',
   prodBase: '',
   initApp: (app) => {
-    app.config.globalProperties[map.tinyMode] = { value: 'mobile' }
+    app.config.globalProperties[map.tinyMode] = { value: 'pc' }
   }
 }
diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index 57d5562be6..f543c13382 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -26,7 +26,7 @@
               <template v-if="state.currJson?.demos?.length">
                 <div class="all-demos-container" id="all-demos-container">
                   <div v-if="apiModeState.demoMode === 'default'" id="demo-list" class="ti-f-c ti-f-wrap demo-list">
-                    <demo
+                    <demo-box
                       v-for="demo in state.currJson.demos"
                       :key="demo.name"
                       :observer="state.observer"
@@ -39,7 +39,7 @@
                     />
                   </div>
                   <div v-else>
-                    <demo
+                    <demo-box
                       v-if="state.singleDemo"
                       :isIntersecting="true"
                       :key="state.singleDemo.name"
@@ -221,7 +221,7 @@ import {
 import { iconOuterLink } from '@opentiny/vue-icon'
 import debounce from '@opentiny/vue-renderless/common/deps/debounce'
 import { i18nByKey, getWord, $clone, fetchDemosFile, useApiMode, useTemplateMode, getCmpContributors } from '@/tools'
-import demo from '@/views/components/demo'
+import DemoBox from '@/views/components/demo'
 import demoConfig from '@demos/config.js'
 import { router } from '@/router.js'
 import { faqMdConfig, getWebdocPath } from './cmp-config'

From e1ef5bb8331212658376b3e2fe3d5c58d3e830b8 Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Thu, 23 Jan 2025 14:41:39 +0800
Subject: [PATCH 13/15] fix: change mobile github page env

---
 examples/sites/env/.env.mobilepages | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/examples/sites/env/.env.mobilepages b/examples/sites/env/.env.mobilepages
index 15d06101a2..c58a37ae9f 100644
--- a/examples/sites/env/.env.mobilepages
+++ b/examples/sites/env/.env.mobilepages
@@ -1,9 +1,9 @@
 # 1、声明一个变量
-VITE_CONTEXT=/tiny-vue/
+VITE_CONTEXT=/tiny-vue-web-doc/
 VITE_BUILD_TARGET='inner'
 # 官网应用类型：pc / mobile / mobile-first
 VITE_APP_MODE='mobile'
 
-VITE_APP_BUILD_BASE_URL='/tiny-vue/'
-VITE_PLAYGROUND_URL=/playground.html
-VITE_MOBILE_URL=/mobile.html
+VITE_APP_BUILD_BASE_URL='/tiny-vue-web-doc/'
+VITE_PLAYGROUND_URL=/tiny-vue-web-doc/playground.html
+VITE_MOBILE_URL=/tiny-vue-web-doc/mobile.html

From 74227177200e3bd29356a15d8152ac29d4e2bc8a Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Sun, 26 Jan 2025 10:23:41 +0800
Subject: [PATCH 14/15] docs: separate mobile docs

---
 examples/sites/demos/apis/actionsheet.js      | 106 ----
 examples/sites/demos/apis/alert.js            |  47 +-
 examples/sites/demos/apis/avatar.js           | 113 ----
 examples/sites/demos/apis/badge.js            |  39 +-
 examples/sites/demos/apis/button.js           |  35 +-
 examples/sites/demos/apis/checkbox.js         |  53 +-
 examples/sites/demos/apis/checkboxgroup.js    |  80 ---
 examples/sites/demos/apis/container.js        |  59 +--
 examples/sites/demos/apis/dialog-box.js       |  15 +-
 examples/sites/demos/apis/dropdownmenu.js     | 239 ---------
 examples/sites/demos/apis/exception.js        |  97 +---
 examples/sites/demos/apis/file-upload.js      | 222 ++------
 examples/sites/demos/apis/form.js             |  51 +-
 examples/sites/demos/apis/icon.js             |   2 +-
 examples/sites/demos/apis/imageviewer.js      | 156 ------
 examples/sites/demos/apis/index-bar.js        |  79 ---
 examples/sites/demos/apis/input.js            | 206 ++------
 examples/sites/demos/apis/label.js            | 116 -----
 examples/sites/demos/apis/list.js             |  80 ---
 examples/sites/demos/apis/loading.js          |  41 +-
 examples/sites/demos/apis/mask.js             |  67 ---
 examples/sites/demos/apis/minipicker.js       | 218 --------
 examples/sites/demos/apis/modal.js            | 107 ++--
 examples/sites/demos/apis/multi-select.js     | 188 -------
 examples/sites/demos/apis/navbar.js           | 133 -----
 examples/sites/demos/apis/numeric.js          |  77 +--
 examples/sites/demos/apis/popover.js          | 103 +---
 examples/sites/demos/apis/progress.js         |  30 +-
 examples/sites/demos/apis/pull-refresh.js     | 155 +-----
 examples/sites/demos/apis/radio.js            |  35 +-
 examples/sites/demos/apis/search.js           |  75 +--
 examples/sites/demos/apis/slider.js           |  73 +--
 examples/sites/demos/apis/switch.js           |  26 +-
 examples/sites/demos/apis/tabbar.js           |  71 +--
 examples/sites/demos/apis/table.js            |  69 ---
 examples/sites/demos/apis/tabs.js             |  97 +---
 examples/sites/demos/apis/tag.js              |  58 +--
 examples/sites/demos/apis/timeline.js         | 208 --------
 examples/sites/demos/apis/toast.js            |  70 ---
 examples/sites/demos/apis/user-head.js        |  77 +--
 .../app/actionsheet/webdoc/actionsheet.js     |  92 ++++
 .../demos/mobile/app/alert/webdoc/alert.js    | 125 +++++
 .../demos/mobile/app/avatar/webdoc/avatar.js  | 101 ++++
 .../demos/mobile/app/badge/webdoc/badge.js    | 108 +++-
 .../demos/mobile/app/button/webdoc/button.js  | 111 ++++
 .../mobile/app/checkbox/webdoc/checkbox.js    | 140 +++++
 .../app/checkboxgroup/webdoc/checkboxgroup.js |  71 +++
 .../mobile/app/container/webdoc/container.js  |  77 +++
 .../app/dialog-box/webdoc/dialog-box.js       |  10 +
 .../app/dropdownmenu/webdoc/dropdownmenu.js   | 216 ++++++++
 .../mobile/app/exception/webdoc/exception.js  | 103 ++++
 .../app/file-upload/webdoc/file-upload.js     | 487 ++++++++++++++++++
 .../demos/mobile/app/form/webdoc/form.js      | 240 +++++++++
 .../demos/mobile/app/icon/webdoc/icon.js      |   1 +
 .../app/imageviewer/webdoc/imageviewer.js     | 140 +++++
 .../mobile/app/index-bar/webdoc/index-bar.js  |  71 +++
 .../demos/mobile/app/input/webdoc/input.js    | 448 ++++++++++++++++
 .../demos/mobile/app/label/webdoc/label.js    | 101 ++++
 .../demos/mobile/app/list/webdoc/list.js      |  68 +++
 .../mobile/app/loading/webdoc/loading.js      | 143 +++--
 .../demos/mobile/app/mask/webdoc/mask.js      |  59 +++
 .../app/minipicker/webdoc/minipicker.js       | 196 +++++++
 .../demos/mobile/app/modal/webdoc/modal.js    | 341 ++++++++++++
 .../app/multi-select/webdoc/multi-select.js   | 158 ++++++
 .../demos/mobile/app/navbar/webdoc/navbar.js  | 119 +++++
 .../mobile/app/numeric/webdoc/numeric.js      | 199 +++++++
 .../mobile/app/popover/webdoc/popover.js      | 289 +++++++++++
 .../mobile/app/progress/webdoc/progress.js    | 105 ++++
 .../app/pull-refresh/webdoc/pull-refresh.js   | 139 +++++
 .../demos/mobile/app/radio/webdoc/radio.js    |  99 ++++
 .../demos/mobile/app/search/webdoc/search.js  | 129 +++++
 .../demos/mobile/app/slider/webdoc/slider.js  | 168 ++++++
 .../demos/mobile/app/switch/webdoc/switch.js  |  72 +++
 .../demos/mobile/app/tabbar/webdoc/tabbar.js  | 100 ++++
 .../demos/mobile/app/table/webdoc/table.js    |  61 +++
 .../demos/mobile/app/tabs/webdoc/tabs.js      | 166 ++++++
 .../sites/demos/mobile/app/tag/webdoc/tag.js  |  83 +++
 .../mobile/app/timeline/webdoc/timeline.js    | 187 +++++++
 .../demos/mobile/app/toast/webdoc/toast.js    |  62 +++
 .../mobile/app/user-head/webdoc/user-head.js  | 123 +++++
 80 files changed, 5990 insertions(+), 3491 deletions(-)
 delete mode 100644 examples/sites/demos/apis/actionsheet.js
 delete mode 100644 examples/sites/demos/apis/avatar.js
 delete mode 100644 examples/sites/demos/apis/checkboxgroup.js
 delete mode 100644 examples/sites/demos/apis/dropdownmenu.js
 delete mode 100644 examples/sites/demos/apis/imageviewer.js
 delete mode 100644 examples/sites/demos/apis/index-bar.js
 delete mode 100644 examples/sites/demos/apis/label.js
 delete mode 100644 examples/sites/demos/apis/list.js
 delete mode 100644 examples/sites/demos/apis/mask.js
 delete mode 100644 examples/sites/demos/apis/minipicker.js
 delete mode 100644 examples/sites/demos/apis/multi-select.js
 delete mode 100644 examples/sites/demos/apis/navbar.js
 delete mode 100644 examples/sites/demos/apis/table.js
 delete mode 100644 examples/sites/demos/apis/timeline.js
 delete mode 100644 examples/sites/demos/apis/toast.js

diff --git a/examples/sites/demos/apis/actionsheet.js b/examples/sites/demos/apis/actionsheet.js
deleted file mode 100644
index cde9b6253a..0000000000
--- a/examples/sites/demos/apis/actionsheet.js
+++ /dev/null
@@ -1,106 +0,0 @@
-export default {
-  mode: ['mobile'],
-  apis: [
-    {
-      name: 'actionsheet ',
-      type: 'component',
-      props: [
-        {
-          name: 'ellipsis',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否省略显示，该属性默认为false</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'ellipsis'
-        },
-        {
-          name: 'menus',
-          type: 'Array',
-          defaultValue: '50',
-          desc: {
-            'zh-CN': '<p>列表数组</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'ellipsis'
-        },
-        {
-          name: 'visible',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>上划列表显示隐藏,该属性默认为false</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'ellipsis'
-        },
-        {
-          name: 'content-position',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '是否显示action插槽',
-            'en-US': 'Whether to display action slots '
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slot-action'
-        }
-      ],
-      events: [
-        {
-          name: 'click',
-          type: 'Function()',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置组件点击列表项时触发的回调函数</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'clickfn'
-        }
-      ],
-      methods: [
-        {
-          name: 'visibleHandle',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>菜单列表隐藏方法</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slot-item'
-        }
-      ],
-      slots: [
-        {
-          name: 'action',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>action插槽</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slot-action'
-        },
-        {
-          name: 'item',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>item插槽</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slot-item'
-        },
-        {
-          mode: []
-        }
-      ]
-    }
-  ]
-}
diff --git a/examples/sites/demos/apis/alert.js b/examples/sites/demos/apis/alert.js
index 1014c1d4f0..79df77cf82 100644
--- a/examples/sites/demos/apis/alert.js
+++ b/examples/sites/demos/apis/alert.js
@@ -1,5 +1,5 @@
 export default {
-  mode: ['pc', 'mobile', 'mobile-first'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'alert',
@@ -13,9 +13,8 @@ export default {
             'zh-CN': '文字是否居中',
             'en-US': 'Whether the text is centered'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'center',
-          mobileDemo: 'center',
           mfDemo: ''
         },
         {
@@ -26,9 +25,8 @@ export default {
             'zh-CN': '警告是否可以关闭',
             'en-US': 'Set whether alarms can be disabled.'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'custom-close',
-          mobileDemo: 'custom-close',
           mfDemo: ''
         },
         {
@@ -39,9 +37,8 @@ export default {
             'zh-CN': '关闭按钮自定义文本',
             'en-US': 'Customized text of the close button'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'custom-close',
-          mobileDemo: 'custom-close',
           mfDemo: ''
         },
         {
@@ -64,9 +61,8 @@ export default {
             'zh-CN': '警告的提示内容',
             'en-US': 'Set the warning prompt content'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
-          mobileDemo: 'custom-close',
           mfDemo: ''
         },
         {
@@ -78,14 +74,13 @@ export default {
             'en-US':
               'The icon for the custom warning of the incoming icon component will be automatically used based on the type value by default'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'icon',
-          mobileDemo: 'icon',
           mfDemo: ''
         },
         {
           name: 'scrolling',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '是否开启描述文字在鼠标 hover 时滚动显示的动画。',
@@ -97,7 +92,7 @@ export default {
         },
         {
           name: 'show-foldable',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '展示带标题可折叠样式。',
@@ -134,7 +129,7 @@ export default {
         },
         {
           name: 'single-line',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '描述内容是否一行显示，超出显示...，默认值为 false。',
@@ -151,23 +146,10 @@ export default {
             'zh-CN': '警告的尺寸大小',
             'en-US': 'Set the size of the warning'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'size',
-          mobileDemo: 'size',
           mfDemo: ''
         },
-        {
-          name: 'target',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '挂载容器的ref值，通过该属性可以让组件展示在对应容器的顶部',
-            'en-US':
-              'Mounted container reference, this property allows the component to be displayed at the top of the corresponding container.'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'target'
-        },
         {
           name: 'title',
           type: 'string',
@@ -190,9 +172,8 @@ export default {
             'zh-CN': '警告的类型',
             'en-US': 'Set the alarm type'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
-          mobileDemo: 'size',
           mfDemo: ''
         }
       ],
@@ -205,9 +186,8 @@ export default {
             'zh-CN': '关闭 alert 时触发的事件',
             'en-US': 'Event triggered when the alert function is disabled'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'custom-close',
-          mobileDemo: 'custom-close',
           mfDemo: ''
         },
         {
@@ -265,9 +245,8 @@ export default {
             'zh-CN': '组件默认插槽，当 size 设置为 large 时有效，显示在 <code>description</code>下方 ',
             'en-US': 'The default slot for the component is valid when size is set to large'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'slot-default',
-          mobileDemo: 'slot-default',
           mfDemo: ''
         },
         {
diff --git a/examples/sites/demos/apis/avatar.js b/examples/sites/demos/apis/avatar.js
deleted file mode 100644
index 3b4f39d976..0000000000
--- a/examples/sites/demos/apis/avatar.js
+++ /dev/null
@@ -1,113 +0,0 @@
-export default {
-  mode: ['mobile'],
-  apis: [
-    {
-      name: 'avatar',
-      type: 'component',
-      props: [
-        {
-          name: 'alt',
-          type: 'Function',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置图片的备用文字描述</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'avatar-src-set'
-        },
-        {
-          name: 'error',
-          type: 'Function()',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置img 标签的 onerror 函数</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'avatar-src-set'
-        },
-        {
-          name: 'fit',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置图片的 object-fit</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'avatar-src-set'
-        },
-        {
-          name: 'icon',
-          type: 'Object',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置显示内容为icon</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'avatar-src-set'
-        },
-        {
-          name: 'shape',
-          type: 'String',
-          defaultValue: 'circle',
-          desc: {
-            'zh-CN': '<p>该属性的可选值为 circle | square</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'avatar-src-set'
-        },
-        {
-          name: 'size',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>该属性的可选值为 large|medium|small</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'avatar-size'
-        },
-        {
-          name: 'src',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置图片链接地址</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'avatar-src-set'
-        },
-        {
-          name: 'src-set',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置源图容器</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'avatar-src-set'
-        }
-      ],
-      events: [],
-      methods: [],
-      slots: [
-        {
-          name: 'default',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>组件默认插槽</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'avatar-src-set'
-        }
-      ]
-    }
-  ]
-}
diff --git a/examples/sites/demos/apis/badge.js b/examples/sites/demos/apis/badge.js
index 566238641b..808d48b01f 100644
--- a/examples/sites/demos/apis/badge.js
+++ b/examples/sites/demos/apis/badge.js
@@ -1,5 +1,5 @@
 export default {
-  mode: ['pc', 'mobile', 'mobile-first'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'badge',
@@ -36,9 +36,8 @@ export default {
             'zh-CN': '是否隐藏标记',
             'en-US': 'Whether to hide badge'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'dynamic-hidden',
-          mobileDemo: 'hidden',
           mfDemo: ''
         },
         {
@@ -49,9 +48,8 @@ export default {
             'zh-CN': '指定跳转的目标页面地址',
             'en-US': 'Specify the URL of the target page.'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'link',
-          mobileDemo: 'href-target',
           mfDemo: ''
         },
         {
@@ -62,22 +60,10 @@ export default {
             'zh-CN': '是否以小圆点的形式来显示标记',
             'en-US': 'Set whether to display the badge in the form of small dots'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'is-dot',
-          mobileDemo: 'is-dot',
           mfDemo: ''
         },
-        {
-          name: 'is-mini',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>设置小尺寸，该属性默认为false</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'is-mini'
-        },
         {
           name: 'max',
           type: 'number',
@@ -88,9 +74,8 @@ export default {
             'en-US':
               'Specifies the maximum number of badges to be displayed. If the actual badge value exceeds the maximum value, the number of badges is displayed in the format of "+". The value must be of the number type.'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'max',
-          mobileDemo: 'is-mini',
           mfDemo: ''
         },
         {
@@ -106,7 +91,7 @@ export default {
         },
         {
           name: 'show-Left',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '设置是否向左展示，仅对圆点生效。',
@@ -124,9 +109,8 @@ export default {
             'en-US':
               'Set the jump method for linking to the target page when clicking on the tag, only used when the href attribute exists'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'link',
-          mobileDemo: 'href-target',
           mfDemo: ''
         },
         {
@@ -161,9 +145,8 @@ export default {
             'zh-CN': '相关数据条目数',
             'en-US': 'Set the number of related data entries'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
-          mobileDemo: 'content',
           mfDemo: ''
         }
       ],
@@ -178,9 +161,8 @@ export default {
             'zh-CN': '消息提示内容',
             'en-US': 'Message Content'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'slot-content',
-          mobileDemo: 'content',
           mfDemo: ''
         },
         {
@@ -191,9 +173,8 @@ export default {
             'zh-CN': '默认插槽，有data属性时，默认插槽不生效',
             'en-US': 'Default slot. When there is a data attribute, the default slot is not valid'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'slot-default',
-          mobileDemo: 'content',
           mfDemo: ''
         }
       ]
diff --git a/examples/sites/demos/apis/button.js b/examples/sites/demos/apis/button.js
index 43bd2f48f9..01acea838c 100644
--- a/examples/sites/demos/apis/button.js
+++ b/examples/sites/demos/apis/button.js
@@ -1,5 +1,5 @@
 export default {
-  mode: ['pc', 'mobile', 'mobile-first'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'button',
@@ -19,7 +19,7 @@ export default {
         },
         {
           name: 'banner',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '设置通栏按钮',
@@ -42,7 +42,7 @@ export default {
         },
         {
           name: 'custom-class',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '设置 custom-class 属性定制按钮样式',
@@ -59,9 +59,8 @@ export default {
             'zh-CN': '是否被禁用按钮',
             'en-US': 'Sets whether the button is disabled'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'dynamic-disabled',
-          mobileDemo: 'disabled',
           mfDemo: ''
         },
         {
@@ -77,7 +76,7 @@ export default {
         },
         {
           name: 'href',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '通过设置 href 属性可跳转到指定页面',
@@ -94,9 +93,8 @@ export default {
             'zh-CN': '按钮左侧展示的图标，接收为<code>Icon</code>组件',
             'en-US': 'The icon displayed by the button is received as an <code>Icon</code> component'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'icon',
-          mobileDemo: 'icon',
           mfDemo: ''
         },
         {
@@ -107,9 +105,8 @@ export default {
             'zh-CN': '是否加载中状态',
             'en-US': 'Loading status'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'loading',
-          mobileDemo: 'loading',
           mfDemo: ''
         },
         {
@@ -144,9 +141,8 @@ export default {
             'zh-CN': '设置按钮禁用时间，防止重复提交，单位毫秒',
             'en-US': 'Set the button disable time, in milliseconds, to prevent repeated submission'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'reset-time',
-          mobileDemo: 'reset-time',
           mfDemo: ''
         },
         {
@@ -169,9 +165,8 @@ export default {
             'zh-CN': '定义按钮尺寸',
             'en-US': 'Define the button size'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'size',
-          mobileDemo: 'size',
           mfDemo: ''
         },
         {
@@ -182,9 +177,8 @@ export default {
             'zh-CN': '按钮显示的文本',
             'en-US': 'Set the text displayed by the button'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'text',
-          mobileDemo: 'base',
           mfDemo: ''
         },
         {
@@ -196,9 +190,8 @@ export default {
             'zh-CN': '展示按钮不同的状态，设置为<code>text</code>则展示为文本按钮',
             'en-US': 'Display different states of buttons, set to <code>text</code> to display as text buttons'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
-          mobileDemo: 'base',
           mfDemo: ''
         }
       ],
@@ -211,9 +204,8 @@ export default {
             'zh-CN': '当按钮被点击时触发的回调函数',
             'en-US': 'Sets the callback function triggered when a button is clicked'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'click',
-          mobileDemo: 'event',
           mfDemo: ''
         }
       ],
@@ -227,9 +219,8 @@ export default {
             'zh-CN': '默认插槽，自定义按钮展示内容',
             'en-US': 'Default slot'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'image',
-          mobileDemo: '',
           mfDemo: ''
         }
       ]
diff --git a/examples/sites/demos/apis/checkbox.js b/examples/sites/demos/apis/checkbox.js
index ba375b8ff9..c38d151988 100644
--- a/examples/sites/demos/apis/checkbox.js
+++ b/examples/sites/demos/apis/checkbox.js
@@ -1,5 +1,5 @@
 export default {
-  mode: ['pc', 'mobile', 'mobile-first'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'checkbox',
@@ -13,9 +13,8 @@ export default {
             'zh-CN': '是否默认勾选',
             'en-US': 'Currently selected'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'checked',
-          mobileDemo: '',
           mfDemo: ''
         },
         {
@@ -26,14 +25,13 @@ export default {
             'zh-CN': '是否禁用',
             'en-US': 'Disable'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'indeterminate',
-          mobileDemo: 'disabled',
           mfDemo: ''
         },
         {
           name: 'display-only',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '是否开启组件 display-only 只显示模式，默认值为 false',
@@ -50,22 +48,10 @@ export default {
             'zh-CN': '没有选中时的值',
             'en-US': 'Value when no option is selected'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'text',
-          mobileDemo: 'custom-value',
           mfDemo: ''
         },
-        {
-          name: 'icon-position',
-          type: 'String',
-          defaultValue: 'center',
-          desc: {
-            'zh-CN': "<p>图标与文本的对齐方式，可选值：'center' | 'top'</p>",
-            'en-US': "<p>Alignment of icon and text, optional value: 'center' | 'top'</p>"
-          },
-          mode: ['mobile'],
-          mobileDemo: 'icon-position'
-        },
         {
           name: 'indeterminate',
           type: 'boolean',
@@ -74,9 +60,8 @@ export default {
             'zh-CN': '设置 indeterminate 状态，只负责样式控制',
             'en-US': 'Sets the indeterminate state and controls only the style.'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'indeterminate',
-          mobileDemo: 'indeterminate',
           mfDemo: ''
         },
         {
@@ -88,9 +73,8 @@ export default {
             'en-US':
               'Selected value (This parameter is valid only when checkbox-group or the bound object type is array)'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'checkbox-group',
-          mobileDemo: 'basic-usage',
           mfDemo: ''
         },
         {
@@ -112,9 +96,8 @@ export default {
             'zh-CN': '原生 name 属性',
             'en-US': 'Native name attribute'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
-          mobileDemo: '',
           mfDemo: ''
         },
         {
@@ -148,9 +131,8 @@ export default {
             'zh-CN': '选中时的值',
             'en-US': 'Value when selected'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'text',
-          mobileDemo: 'custom-value',
           mfDemo: ''
         },
         {
@@ -163,17 +145,6 @@ export default {
           },
           mode: ['mobile-first'],
           mfDemo: ''
-        },
-        {
-          name: 'v-model / modelValue',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>绑定值</p>',
-            'en-US': '<p>value</p>'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'basic-usage'
         }
       ],
       events: [
@@ -185,9 +156,8 @@ export default {
             'zh-CN': '当绑定值变化时触发的事件',
             'en-US': 'This event is triggered when the binding value changes'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'checkbox-events',
-          mobileDemo: 'event-change',
           mfDemo: ''
         }
       ],
@@ -201,9 +171,8 @@ export default {
             'zh-CN': 'checkbox的内容',
             'en-US': 'Checkbox content'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'checkbox-slot',
-          mobileDemo: '',
           mfDemo: ''
         }
       ]
diff --git a/examples/sites/demos/apis/checkboxgroup.js b/examples/sites/demos/apis/checkboxgroup.js
deleted file mode 100644
index 4a3888beba..0000000000
--- a/examples/sites/demos/apis/checkboxgroup.js
+++ /dev/null
@@ -1,80 +0,0 @@
-export default {
-  mode: ['mobile'],
-  apis: [
-    {
-      name: 'CheckboxGroup',
-      type: 'component',
-      props: [
-        {
-          name: 'disabled',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否禁用，该属性默认为false</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'disabled'
-        },
-        {
-          name: 'max',
-          type: 'Number',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>可被勾选的 checkbox 的最大数量</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'min-max'
-        },
-        {
-          name: 'min',
-          type: 'Number',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>可被勾选的 checkbox 的最小数量</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'min-max'
-        },
-        {
-          name: 'value / v-model',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>绑定值</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'dedisabled'
-        },
-        {
-          name: 'vertical',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否竖向模式</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'vertical'
-        }
-      ],
-      events: [
-        {
-          name: 'change',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>当绑定值变化时触发的事件,该事件可获取更新后的值</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'event-change'
-        }
-      ],
-      methods: [],
-      slots: []
-    }
-  ]
-}
diff --git a/examples/sites/demos/apis/container.js b/examples/sites/demos/apis/container.js
index db79a52579..570e1969f5 100644
--- a/examples/sites/demos/apis/container.js
+++ b/examples/sites/demos/apis/container.js
@@ -1,5 +1,5 @@
 export default {
-  mode: ['pc', 'mobile'],
+  mode: ['pc'],
   apis: [
     {
       name: 'container',
@@ -38,17 +38,6 @@ export default {
           mode: ['pc'],
           pcDemo: 'custom-with-height'
         },
-        {
-          name: 'left-width',
-          type: 'number | string',
-          defaultValue: '60',
-          desc: {
-            'zh-CN': '左侧宽度',
-            'en-US': 'Left width'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'custom-width'
-        },
         {
           name: 'pattern',
           typeAnchorName: 'IContainerPattern',
@@ -58,20 +47,8 @@ export default {
             'zh-CN': '版型类型',
             'en-US': 'Measurement type'
           },
-          mode: ['pc', 'mobile'],
-          pcDemo: 'basic-usage',
-          mobileDemo: 'basic-usaage'
-        },
-        {
-          name: 'right-width',
-          type: 'number | string',
-          defaultValue: '44',
-          desc: {
-            'zh-CN': '右侧宽度',
-            'en-US': 'right width'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'custom-width'
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
         }
       ],
       events: [],
@@ -87,16 +64,6 @@ export default {
           mode: ['pc'],
           pcDemo: 'basic-usage'
         },
-        {
-          name: 'center',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '中部内容插槽',
-            'en-US': 'Renter Slot'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'basic-usage'
-        },
         {
           name: 'default',
           defaultValue: '',
@@ -126,26 +93,6 @@ export default {
           },
           mode: ['pc'],
           pcDemo: 'basic-usage'
-        },
-        {
-          name: 'left',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '左侧内容插槽',
-            'en-US': 'Title Slot'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'basic-usage'
-        },
-        {
-          name: 'right',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '右侧内容插槽',
-            'en-US': 'Right Slot'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'basic-usage'
         }
       ]
     }
diff --git a/examples/sites/demos/apis/dialog-box.js b/examples/sites/demos/apis/dialog-box.js
index 8150a4124a..597e967bfe 100644
--- a/examples/sites/demos/apis/dialog-box.js
+++ b/examples/sites/demos/apis/dialog-box.js
@@ -65,7 +65,10 @@ export default {
           name: 'drag-outside-window',
           type: 'boolean',
           defaultValue: 'false',
-          desc: { 'zh-CN': '可将弹窗拖出窗口', 'en-US': 'Pop ups can be dragged out of the window' },
+          desc: {
+            'zh-CN': '可将弹窗拖出窗口',
+            'en-US': 'Pop ups can be dragged out of the window'
+          },
           mode: ['pc'],
           pcDemo: 'draggable'
         },
@@ -216,7 +219,7 @@ export default {
         {
           name: 'top',
           type: 'string',
-          defaultValue: `'15vh'`,
+          defaultValue: "'15vh'",
           desc: {
             'zh-CN': '设置弹出框距离窗口顶部的高度',
             'en-US': 'Set the height of the popup from the top of the window'
@@ -238,7 +241,7 @@ export default {
         {
           name: 'width',
           type: 'string',
-          defaultValue: `'500px'`,
+          defaultValue: "'500px'",
           desc: {
             'zh-CN': '弹出框的宽度',
             'en-US': 'Wideness of the dialog box that is displayed'
@@ -249,7 +252,7 @@ export default {
         {
           name: 'custom-style',
           type: 'string',
-          defaultValue: ``,
+          defaultValue: '',
           desc: {
             'zh-CN': '自定义实现双层抽屉',
             'en-US': 'Custom Styles'
@@ -264,7 +267,7 @@ export default {
         {
           name: 'no-animation',
           type: 'string',
-          defaultValue: ``,
+          defaultValue: '',
           desc: {
             'zh-CN': '是否开启动画',
             'en-US': 'Indicates whether to enable animation'
@@ -279,7 +282,7 @@ export default {
         {
           name: 'dialog-transition',
           type: 'string',
-          defaultValue: ``,
+          defaultValue: '',
           desc: {
             'zh-CN': '启动弹出动效由小变大',
             'en-US': 'Startup pop-up effect from small to large'
diff --git a/examples/sites/demos/apis/dropdownmenu.js b/examples/sites/demos/apis/dropdownmenu.js
deleted file mode 100644
index 3eb15a5b83..0000000000
--- a/examples/sites/demos/apis/dropdownmenu.js
+++ /dev/null
@@ -1,239 +0,0 @@
-export default {
-  mode: ['mobile'],
-  apis: [
-    {
-      name: 'DropdownMenu',
-      type: 'component',
-      props: [
-        {
-          name: 'active-color',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>标题和选项的选中态颜色</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'activeColor'
-        },
-        {
-          name: 'close-on-click-outside',
-          type: 'Boolean',
-          defaultValue: 'true',
-          desc: {
-            'zh-CN': '<p>设置点击外部元素后关闭菜单,默认问true</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'closeOnClickOutside'
-        },
-        {
-          name: 'close-on-click-overlay',
-          type: 'Boolean',
-          defaultValue: 'true',
-          desc: {
-            'zh-CN': '<p>设置点击遮罩层后关闭菜单，默认为true设置点击遮罩层后关闭菜单，默认为true</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'closeOnClickOverlay'
-        },
-        {
-          name: 'direction',
-          type: 'String',
-          defaultValue: 'down',
-          desc: {
-            'zh-CN': '<p>设置弹出框弹出框展开方向，默认为down</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'direction'
-        },
-        {
-          name: 'duration',
-          type: 'Number',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置弹出框的动画时长</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'duration'
-        },
-        {
-          name: 'overlay',
-          type: 'Boolean',
-          defaultValue: 'true',
-          desc: {
-            'zh-CN': '<p>设置是否显示遮罩层，默认为true</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'overlay'
-        }
-      ],
-      events: [],
-      methods: [],
-      slots: [
-        {
-          name: 'default',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>定义菜单内容</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slot'
-        }
-      ]
-    },
-    {
-      name: 'DropdownItem',
-      type: 'component',
-      props: [
-        {
-          name: 'disabled',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>设置是否禁用，默认为false</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'disabled'
-        },
-        {
-          name: 'icon',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置菜单选项项左侧icon</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'icon'
-        },
-        {
-          name: 'options',
-          type: 'Array',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置选项数据</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'screen-funnel'
-        },
-        {
-          name: 'title',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>菜单项标题</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'screen-funnel'
-        },
-        {
-          name: 'title-class',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>标题类名</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'title-class'
-        },
-        {
-          name: 'type',
-          type: 'String',
-          defaultValue: 'selection',
-          desc: {
-            'zh-CN': '<p>设置菜单项类型，可选值为 filter | sort | selection,默认值为 selection</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'title-class'
-        },
-        {
-          name: 'value',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>当前选中项对应的 value，可以通过v-model双向绑定</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'activeColor'
-        }
-      ],
-      events: [
-        {
-          name: 'change',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>点击选项时触发，type为 selection 时启用</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'event'
-        },
-        {
-          name: 'close',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>关闭菜单时触发</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'event'
-        },
-        {
-          name: 'open',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>打开菜单时触发</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'event'
-        }
-      ],
-      methods: [],
-      slots: [
-        {
-          name: 'default',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>定义菜单内容</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slot'
-        },
-        {
-          name: 'icon',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>当type为selection时选项左侧内容</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slot'
-        },
-        {
-          name: 'title',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>当type为selection时选项内容</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slot'
-        }
-      ]
-    }
-  ]
-}
diff --git a/examples/sites/demos/apis/exception.js b/examples/sites/demos/apis/exception.js
index 7647c46a87..6d4652545a 100644
--- a/examples/sites/demos/apis/exception.js
+++ b/examples/sites/demos/apis/exception.js
@@ -1,24 +1,13 @@
 export default {
-  mode: ['mobile', 'mobile-first'],
+  mode: ['mobile-first'],
   apis: [
     {
       name: 'Exception',
       type: 'component',
       props: [
-        {
-          name: 'buttonText',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>按钮文字/p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'buttonText'
-        },
         {
           name: 'component-page',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '设置组件级空态',
@@ -29,7 +18,7 @@ export default {
         },
         {
           name: 'exception-class',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '设置自定义类',
@@ -38,42 +27,9 @@ export default {
           mode: ['mobile-first'],
           mfDemo: ''
         },
-        {
-          name: 'exceptionClass',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>自定义缺省页类名</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'exceptionClass'
-        },
-        {
-          name: 'imageUrl',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>自定义图片</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'buttonText'
-        },
-        {
-          name: 'message',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>主图片文字，在图片下方</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'message'
-        },
         {
           name: 'page-empty',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '设置页面级空态',
@@ -84,7 +40,7 @@ export default {
         },
         {
           name: 'sub-message',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '设置二级标题',
@@ -93,44 +49,20 @@ export default {
           mode: ['mobile-first'],
           mfDemo: 'sub-message'
         },
-        {
-          name: 'subMessage',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>副文本内容,在描述文字的下方</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'subMessage'
-        },
         {
           name: 'type',
-          type: 'String',
+          type: 'string',
           defaultValue: 'nodata',
           desc: {
             'zh-CN':
               '<p>设置缺省页类型，默认为nodata,可选值有 weaknet || noperm || busy || build || weaknet || pcview</p>',
             'en-US': 'display different button'
           },
-          mode: ['mobile', 'mobile-first'],
-          mobileDemo: 'type',
+          mode: ['mobile-first'],
           mfDemo: 'page-empty'
         }
       ],
-      events: [
-        {
-          name: 'click',
-          type: 'Function()',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>点击按钮时触发，type 为 nodata 时启用</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'message'
-        }
-      ],
+      events: [],
       methods: [],
       slots: [
         {
@@ -141,8 +73,7 @@ export default {
             'zh-CN': '<p>设置内容</p>',
             'en-US': 'Click'
           },
-          mode: ['mobile', 'mobile-first'],
-          mobileDemo: 'mobileexception',
+          mode: ['mobile-first'],
           mfDemo: 'content-slot'
         },
         {
@@ -155,16 +86,6 @@ export default {
           },
           mode: ['mobile-first'],
           mfDemo: ''
-        },
-        {
-          name: 'footer',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置底部内容</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'mobileexception'
         }
       ]
     }
diff --git a/examples/sites/demos/apis/file-upload.js b/examples/sites/demos/apis/file-upload.js
index 621ebc3ce0..1c9c8dadb2 100644
--- a/examples/sites/demos/apis/file-upload.js
+++ b/examples/sites/demos/apis/file-upload.js
@@ -1,5 +1,5 @@
 export default {
-  mode: ['pc', 'mobile', 'mobile-first'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'file-upload',
@@ -13,9 +13,8 @@ export default {
             'zh-CN': '限制文件类型（thumbnail-mode 模式下此参数无效）',
             'en-US': 'Restrict the types of files. This parameter is invalid in thumbnail-mode mode'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'accept-file-image',
-          mobileDemo: 'accept-file',
           mfDemo: ''
         },
         {
@@ -26,9 +25,8 @@ export default {
             'zh-CN': '上传的地址，必填参数',
             'en-US': 'The address for uploading files, required parameter'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
-          mobileDemo: 'accept-file',
           mfDemo: ''
         },
         {
@@ -39,9 +37,8 @@ export default {
             'zh-CN': '是否在选取文件后立即进行上传',
             'en-US': 'Whether to upload a file immediately after it is selected'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'manual-upload',
-          mobileDemo: 'manual-upload',
           mfDemo: ''
         },
         {
@@ -69,9 +66,8 @@ export default {
             'en-US':
               'Hook before deleting files. The parameters are the uploaded files and file list. If false is returned or Promise is returned and rejected, the deletion stops'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'prevent-delete-file',
-          mobileDemo: 'prevent-delete-file',
           mfDemo: ''
         },
         {
@@ -84,25 +80,13 @@ export default {
             'en-US':
               'Hook before uploading a file. The parameter is the file to be uploaded. If false is returned or Promise is returned and rejected, the upload stops'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'before-upload-limit',
-          mobileDemo: 'upload-request',
           mfDemo: ''
         },
-        {
-          name: 'buttons',
-          type: 'Boolean',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置组件基本按钮禁用或启用。</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
-        },
         {
           name: 'cache-token',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN':
@@ -114,7 +98,7 @@ export default {
         },
         {
           name: 'custom-class',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '自定义class',
@@ -132,9 +116,8 @@ export default {
             'zh-CN': '上传时附带的额外参数，参数自定义',
             'en-US': 'Extra parameters attached during upload, parameter customization'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
-          mobileDemo: 'data',
           mfDemo: ''
         },
         {
@@ -145,25 +128,13 @@ export default {
             'zh-CN': '是否禁用',
             'en-US': 'Is it disabled'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'disabled',
-          mobileDemo: 'dynamic-disable',
           mfDemo: ''
         },
-        {
-          name: 'display',
-          type: 'Boolean',
-          defaultValue: 'true',
-          desc: {
-            'zh-CN': '<p>显示删除文件功能，该属性默认为true</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
-        },
         {
           name: 'display-only',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '文件上传模式，通过 display-only 设置组件是否只读',
@@ -218,17 +189,6 @@ export default {
           mode: ['pc'],
           pcDemo: 'encrypt-config'
         },
-        {
-          name: 'file-icon-list',
-          type: 'Array',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>配置文件上传显示的图标路径，未配置会默认显示组件内部配置图标</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'file-icon-list'
-        },
         {
           name: 'file-list',
           typeAnchorName: 'IFileListItem',
@@ -238,9 +198,8 @@ export default {
             'zh-CN': '上传的文件列表',
             'en-US': 'List of uploaded files'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'upload-file-list',
-          mobileDemo: 'upload-file-list',
           mfDemo: ''
         },
         {
@@ -255,28 +214,6 @@ export default {
           pcDemo: 'file-size',
           mfDemo: ''
         },
-        {
-          name: 'file-title',
-          type: 'String',
-          defaultValue: '附件',
-          desc: {
-            'zh-CN': '<p>头部标题，该属性默认为‘附件’</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'header-show'
-        },
-        {
-          name: 'header-show',
-          type: 'Boolean',
-          defaultValue: 'true',
-          desc: {
-            'zh-CN': '<p>是否显示头部，该属性默认为true</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'header-show'
-        },
         {
           name: 'headers',
           typeAnchorName: 'IHeaders',
@@ -286,9 +223,8 @@ export default {
             'zh-CN': '设置上传的请求头部;通过设置 headers 为头部请求信息',
             'en-US': 'Set the upload request header. You can set headers to the header request information'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'upload-request',
-          mobileDemo: 'upload-request',
           mfDemo: ''
         },
         {
@@ -301,9 +237,8 @@ export default {
             'en-US':
               'Overwrite the default upload behavior. You can customize the upload implementation. The upload cannot be performed because the TinyVue official website uses Mock upload'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'http-request',
-          mobileDemo: 'upload-http-request',
           mfDemo: ''
         },
         {
@@ -331,7 +266,7 @@ export default {
         },
         {
           name: 'is-folder-title',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN':
@@ -355,7 +290,7 @@ export default {
         },
         {
           name: 'isFolder',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN':
@@ -373,9 +308,8 @@ export default {
             'zh-CN': '最大允许上传个数',
             'en-US': 'Maximum number of files that can be uploaded'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'max-file-count',
-          mobileDemo: 'max-file-count',
           mfDemo: ''
         },
         {
@@ -398,9 +332,8 @@ export default {
             'zh-CN': '文件列表的类型',
             'en-US': 'File list type'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'upload-file-list-thumb',
-          mobileDemo: 'picture-card',
           mfDemo: ''
         },
         {
@@ -430,7 +363,7 @@ export default {
         },
         {
           name: 'mergeService',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '配置 mergeService 为true 且开启多文件上传走默认服务会将多个上传服务合并为一个服务上传',
@@ -439,20 +372,9 @@ export default {
           mode: ['mobile-first'],
           mfDemo: ''
         },
-        {
-          name: 'mini-mode',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>设置 mini 模式。</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'mini-mode'
-        },
         {
           name: 'mode',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '气泡上传，在 list-type 为默认值 text 时，设置 mode 为 bubble 时进行气泡模式的上传',
@@ -469,9 +391,8 @@ export default {
             'zh-CN': '是否支持多选文件',
             'en-US': 'Specifies whether multiple files can be selected'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'multiple-file',
-          mobileDemo: 'multiple-file',
           mfDemo: ''
         },
         {
@@ -482,9 +403,8 @@ export default {
             'zh-CN': '上传的文件字段名',
             'en-US': 'Field name of the uploaded file'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'upload-file-list-slot',
-          mobileDemo: 'data',
           mfDemo: ''
         },
         {
@@ -511,7 +431,7 @@ export default {
         },
         {
           name: 'paramsWhitelist',
-          type: 'Array',
+          type: 'array',
           defaultValue: '',
           desc: {
             'zh-CN':
@@ -590,14 +510,13 @@ export default {
             'zh-CN': '是否显示已上传文件列表',
             'en-US': 'Whether to display the list of uploaded files'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'upload-file-list',
-          mobileDemo: 'upload-file-list',
           mfDemo: ''
         },
         {
           name: 'show-name',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '上传请求参数，默认为 false',
@@ -608,7 +527,7 @@ export default {
         },
         {
           name: 'show-title',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '配置 show-title 为 false 隐藏标题，默认为 true',
@@ -617,20 +536,9 @@ export default {
           mode: ['mobile-first'],
           mfDemo: ''
         },
-        {
-          name: 'size',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>为单个按钮且按钮为TinyVue的Button组件时生效，值可设置为：medium，small，mini</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'size'
-        },
         {
           name: 'source-type',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '数据源类型',
@@ -639,17 +547,6 @@ export default {
           mode: ['mobile-first'],
           mfDemo: ''
         },
-        {
-          name: 'success-statistics',
-          type: 'Boolean',
-          defaultValue: 'true',
-          desc: {
-            'zh-CN': '<p>文件上传成功数量展示，该属性默认为true</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'prevent-delete-file'
-        },
         {
           name: 'thumb-option',
           typeAnchorName: 'IThumbOption',
@@ -665,7 +562,7 @@ export default {
         },
         {
           name: 'title',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '通过 title 可自定义标题',
@@ -685,20 +582,9 @@ export default {
           mode: ['mobile-first'],
           mfDemo: ''
         },
-        {
-          name: 'type',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>文本，该属性默认为select</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
-        },
         {
           name: 'updateId',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': 'EDM 需要更新文档的 docId',
@@ -718,17 +604,6 @@ export default {
           mode: ['mobile-first'],
           mfDemo: ''
         },
-        {
-          name: 'upload-icon',
-          type: 'Boolean',
-          defaultValue: 'true',
-          desc: {
-            'zh-CN': '<p>是否显示头部文件上传按钮，该属性默认为true</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'data'
-        },
         {
           name: 'with-credentials',
           type: 'boolean',
@@ -737,9 +612,8 @@ export default {
             'zh-CN': '支持发送 cookie 凭证信息',
             'en-US': 'Cookie credential information can be sent'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'upload-request',
-          mobileDemo: 'with-credentials',
           mfDemo: ''
         }
       ],
@@ -754,9 +628,8 @@ export default {
             'en-US':
               'The event triggered when the file status changes, including adding a file, successfully uploading, and failing to upload, will be triggered'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'upload-events',
-          mobileDemo: 'upload-events',
           mfDemo: ''
         },
         {
@@ -795,9 +668,8 @@ export default {
             'en-US':
               'Event triggered when file upload fails; Message is the error message event object, file is the current upload failure file information, and fileList is the upload success file array'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'upload-events',
-          mobileDemo: 'upload-events',
           mfDemo: ''
         },
         {
@@ -809,9 +681,8 @@ export default {
             'zh-CN': '文件超出个数限制时触发的事件； files 为上传的文件',
             'en-US': 'Event triggered when the number of files exceeds the limit; Files are uploaded files'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'upload-events',
-          mobileDemo: 'upload-events',
           mfDemo: ''
         },
         {
@@ -835,9 +706,8 @@ export default {
             'zh-CN': '点击文件列表中已上传的文件时触发的事件',
             'en-US': 'Event triggered when clicking on an uploaded file in the file list'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'upload-events',
-          mobileDemo: 'upload-events',
           mfDemo: ''
         },
         {
@@ -849,9 +719,8 @@ export default {
             'zh-CN': '文件上传时触发的事件； message 为进度条事件对象',
             'en-US': 'Event triggered during file upload; Message is the progress bar event object'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'upload-events',
-          mobileDemo: 'upload-events',
           mfDemo: ''
         },
         {
@@ -864,9 +733,8 @@ export default {
             'en-US':
               'Event triggered when removing a file from the file list; File is the information of the currently removed file'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'upload-events',
-          mobileDemo: 'upload-events',
           mfDemo: ''
         },
         {
@@ -880,9 +748,8 @@ export default {
             'en-US':
               'Event triggered when the file is successfully uploaded; Res is the response information event object after successful upload, file is the current uploaded file, and fileList is an array of all uploaded files'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'upload-events',
-          mobileDemo: 'upload-events',
           mfDemo: ''
         }
       ],
@@ -895,9 +762,8 @@ export default {
             'zh-CN': '取消上传请求',
             'en-US': 'Cancel the upload request'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'abort-quest',
-          mobileDemo: 'abort-quest',
           mfDemo: ''
         },
         {
@@ -919,9 +785,8 @@ export default {
             'zh-CN': '清空已上传的文件列表（该方法不支持在 before-upload 中调用）',
             'en-US': 'Clear the list of uploaded files. (This method cannot be invoked in before-upload)'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'clear-files',
-          mobileDemo: 'clear-files',
           mfDemo: ''
         },
         {
@@ -965,9 +830,8 @@ export default {
             'zh-CN': '手动上传文件列表',
             'en-US': 'List of manually uploaded files'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'manual-upload',
-          mobileDemo: 'manual-upload',
           mfDemo: ''
         }
       ],
@@ -992,9 +856,8 @@ export default {
             'zh-CN': '提示说明文字',
             'en-US': 'Prompt Description'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'custom-upload-tip',
-          mobileDemo: 'custom-upload-tip',
           mfDemo: ''
         },
         {
@@ -1005,9 +868,8 @@ export default {
             'zh-CN': '触发文件选择框的内容',
             'en-US': 'Content of the triggering file selection box'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'custom-trigger',
-          mobileDemo: 'custom-upload-tip',
           mfDemo: ''
         }
       ]
diff --git a/examples/sites/demos/apis/form.js b/examples/sites/demos/apis/form.js
index d7ecb659d4..3a17e4c83f 100644
--- a/examples/sites/demos/apis/form.js
+++ b/examples/sites/demos/apis/form.js
@@ -1,5 +1,5 @@
 export default {
-  mode: ['pc', 'mobile', 'mobile-first'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'form',
@@ -61,9 +61,8 @@ export default {
             'zh-CN': '行内布局模式',
             'en-US': 'In-line layout mode'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'form-in-row',
-          mobileDemo: 'hide-required-asterisk',
           mfDemo: ''
         },
         {
@@ -75,9 +74,8 @@ export default {
             'en-US':
               ' Whether to display the verification information inline form when validate-type is set to text,(It is recommended to use message-type setting)'
           },
-          mode: ['pc', 'mobile'],
-          pcDemo: '',
-          mobileDemo: 'validate'
+          mode: ['pc'],
+          pcDemo: ''
         },
         {
           name: 'label-align',
@@ -98,9 +96,8 @@ export default {
             'zh-CN': '表单中标签的布局位置',
             'en-US': 'Layout position of the label in the form'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'label-position',
-          mobileDemo: 'label-width',
           mfDemo: ''
         },
         {
@@ -111,9 +108,8 @@ export default {
             'zh-CN': '表单中标签后缀',
             'en-US': 'Label suffix in the form'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'form-in-row',
-          mobileDemo: 'form-label-suffix',
           mfDemo: ''
         },
         {
@@ -124,9 +120,8 @@ export default {
             'zh-CN': '表单中标签占位宽度',
             'en-US': 'Label placeholder width in the form'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'label-position',
-          mobileDemo: 'label-width',
           mfDemo: ''
         },
         {
@@ -150,9 +145,8 @@ export default {
             'zh-CN': '表单数据对象',
             'en-US': 'Form data object'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'form-validation',
-          mobileDemo: '',
           mfDemo: ''
         },
         {
@@ -188,9 +182,8 @@ export default {
             'zh-CN': '表单验证规则',
             'en-US': 'Form validation rule'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'form-validation',
-          mobileDemo: 'validate',
           mfDemo: ''
         },
         {
@@ -201,9 +194,8 @@ export default {
             'zh-CN': '是否显示校验错误信息',
             'en-US': 'Display verification error information.'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'novalid-tip',
-          mobileDemo: '',
           mfDemo: ''
         },
         {
@@ -225,9 +217,8 @@ export default {
             'zh-CN': '是否在 rules 属性改变后立即触发一次验证（"deep"选项新增于3.21.0）',
             'en-US': 'Whether to trigger a verification immediately after the rules attribute is changed'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'custom-validation-rule',
-          mobileDemo: '',
           mfDemo: ''
         },
         {
@@ -244,7 +235,7 @@ export default {
         },
         {
           name: 'validate-tag',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': 'vue2下面原生html标签支持显示tooltip校验提示信息',
@@ -274,9 +265,8 @@ export default {
             'zh-CN': '任一表单项被校验后触发',
             'en-US': 'Triggered after any form item is verified'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'events',
-          mobileDemo: '',
           mfDemo: ''
         }
       ],
@@ -291,9 +281,8 @@ export default {
             'en-US':
               'The verification result of removing a form item is transferred to the prop attribute of the form item to be removed or an array consisting of prop. If this parameter is not transferred, the verification result of the entire form is removed.'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'form-validate-field',
-          mobileDemo: 'validate',
           mfDemo: ''
         },
         {
@@ -304,9 +293,8 @@ export default {
             'zh-CN': '对整个表单进行重置，将所有字段值重置为初始值并移除校验结果',
             'en-US': 'Reset all field values to the initial values and remove the verification result.'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'form-validation',
-          mobileDemo: 'validate',
           mfDemo: ''
         },
         {
@@ -320,9 +308,8 @@ export default {
             'en-US':
               'Method for verifying the entire form. The parameter is a callback function. The callback function will be invoked after the verification is complete and two parameters are transferred: whether the verification is successful and whether the verification fails. If the callback function is not transferred, a promise is returned.'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'form-validation',
-          mobileDemo: 'validate',
           mfDemo: ''
         },
         {
@@ -336,9 +323,8 @@ export default {
             'en-US':
               'A method for verifying some form fields. The first parameter is a single prop or a prop array, and the second parameter is a callback function. After each form item is verified, the callback will be called in sequence'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'form-validate-field',
-          mobileDemo: '',
           mfDemo: ''
         }
       ],
@@ -351,9 +337,8 @@ export default {
             'zh-CN': '默认插槽，自定义表单内容',
             'en-US': 'Default slot'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
-          mobileDemo: '',
           mfDemo: ''
         },
         {
diff --git a/examples/sites/demos/apis/icon.js b/examples/sites/demos/apis/icon.js
index 3038ff2d82..b4b58ca0e8 100644
--- a/examples/sites/demos/apis/icon.js
+++ b/examples/sites/demos/apis/icon.js
@@ -1,4 +1,4 @@
 export default {
-  mode: ['pc', 'mobile'],
+  mode: ['pc'],
   apis: []
 }
diff --git a/examples/sites/demos/apis/imageviewer.js b/examples/sites/demos/apis/imageviewer.js
deleted file mode 100644
index 77c2a41bba..0000000000
--- a/examples/sites/demos/apis/imageviewer.js
+++ /dev/null
@@ -1,156 +0,0 @@
-export default {
-  mode: ['mobile'],
-  apis: [
-    {
-      name: 'ImageViewer',
-      type: 'component',
-      props: [
-        {
-          name: 'arrow-show',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否显示图片切换按钮,该属性默认为false</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'image-full-current'
-        },
-        {
-          name: 'async-close',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否开启异步关闭，该属性默认为false</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
-        },
-        {
-          name: 'close-show',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否显示关闭按钮，该属性默认为false</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'image-full-current'
-        },
-        {
-          name: 'image-full-current',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否全屏显示，该属性默认为false</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'image-full-current'
-        },
-        {
-          name: 'preview-visible',
-          type: 'Boolean',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置图片预览显示隐藏</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'image-full-current'
-        },
-        {
-          name: 'show-index',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否显示当前图片下标，该属性默认为false</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slot-index'
-        },
-        {
-          name: 'start-position',
-          type: 'Number',
-          defaultValue: '0',
-          desc: {
-            'zh-CN': '<p>图片预览起始位置索引,该属性默认为0</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'start-position'
-        },
-        {
-          name: 'tool-show',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否显示工具栏钮，该属性默认为false</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
-        },
-        {
-          name: 'url-list',
-          type: 'Array',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>配置图片路径</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'image-full-current'
-        },
-        {
-          name: 'z-index',
-          type: 'Number',
-          defaultValue: '2000',
-          desc: {
-            'zh-CN': '<p>设置图片预览的 z-index，该属性默认为2000</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slot-index'
-        }
-      ],
-      events: [
-        {
-          name: 'change',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>切换当前图片时触发，{ index:切换时图片索引, url: 切换时图片链接 }</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'events-change-close'
-        },
-        {
-          name: 'close',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>close，{ index: 关闭时图片索引, url: 关闭时图片链接 }</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'events-change-close'
-        }
-      ],
-      methods: [],
-      slots: [
-        {
-          name: 'index',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>自定义页码内容</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slot-index'
-        }
-      ]
-    }
-  ]
-}
diff --git a/examples/sites/demos/apis/index-bar.js b/examples/sites/demos/apis/index-bar.js
deleted file mode 100644
index dfa6a6ca57..0000000000
--- a/examples/sites/demos/apis/index-bar.js
+++ /dev/null
@@ -1,79 +0,0 @@
-export default {
-  mode: ['mobile'],
-  apis: [
-    {
-      name: 'IndexBar',
-      type: 'component',
-      props: [
-        {
-          name: 'indexList',
-          type: '[]',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>索引文字列表</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'base'
-        }
-      ],
-      events: [
-        {
-          name: 'change',
-          type: 'Function(arg1)',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>\t当前索引改变触发</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'event'
-        },
-        {
-          name: 'select',
-          type: 'Function(arg1)',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>选中新的索引触发</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'event'
-        }
-      ],
-      methods: [],
-      slots: [
-        {
-          name: 'default',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>\t自定义内容</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'event'
-        }
-      ]
-    },
-    {
-      name: 'IndexBarAnchor',
-      type: 'component',
-      props: [
-        {
-          name: 'index',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>索引文字</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'base'
-        }
-      ],
-      events: [],
-      methods: [],
-      slots: []
-    }
-  ]
-}
diff --git a/examples/sites/demos/apis/input.js b/examples/sites/demos/apis/input.js
index 3b38844b8b..87c3d2c07d 100644
--- a/examples/sites/demos/apis/input.js
+++ b/examples/sites/demos/apis/input.js
@@ -1,5 +1,5 @@
 export default {
-  mode: ['pc', 'mobile', 'mobile-first'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'input',
@@ -13,9 +13,8 @@ export default {
             'zh-CN': '原生 autocomplete 属性',
             'en-US': 'Native autocomplete attribute'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'native',
-          mobileDemo: 'native-attributes',
           mfDemo: ''
         },
         {
@@ -26,9 +25,8 @@ export default {
             'zh-CN': '原生属性，页面加载时，自动获取焦点',
             'en-US': 'Native attribute. The focus is automatically obtained during page loading.'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: '',
-          mobileDemo: 'native-attributes',
           mfDemo: ''
         },
         {
@@ -41,9 +39,8 @@ export default {
             'en-US':
               'Adaptive content height. This parameter is valid only for <code>type="textarea"</code>. Objects can be transferred, for example, {minRows: 2, maxRows: 6}'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'resize',
-          mobileDemo: 'textarea-scalable',
           mfDemo: ''
         },
         {
@@ -55,9 +52,8 @@ export default {
             'en-US':
               'Whether to display the clear button. This attribute is not applicable to <code>type="textarea"</code>.'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'clearable',
-          mobileDemo: 'clearable',
           mfDemo: ''
         },
         {
@@ -69,9 +65,8 @@ export default {
             'en-US':
               'Native attribute, which is used to set the width. This parameter is valid only when type is "textarea"'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'rows',
-          mobileDemo: 'textarea-rows-cols',
           mfDemo: ''
         },
         {
@@ -83,14 +78,13 @@ export default {
             'en-US':
               'Whether to display the word count statistics. This parameter is valid only when type is "text" or type is "textarea"'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'counter',
-          mobileDemo: 'counter',
           mfDemo: ''
         },
         {
           name: 'custom-class',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '设置自定义样式',
@@ -107,9 +101,8 @@ export default {
             'zh-CN': '是否禁用',
             'en-US': 'Disable'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'native',
-          mobileDemo: 'disabled',
           mfDemo: ''
         },
         {
@@ -151,7 +144,7 @@ export default {
         },
         {
           name: 'height',
-          type: 'Number',
+          type: 'number',
           defaultValue: '',
           desc: {
             'zh-CN': '设置文本域的最小高度',
@@ -173,17 +166,6 @@ export default {
           pcDemo: 'resize',
           mfDemo: ''
         },
-        {
-          name: 'is-select',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '是否可下拉选择',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'type-select'
-        },
         {
           name: 'label',
           type: 'string',
@@ -192,9 +174,8 @@ export default {
             'zh-CN': '等价于原生 input aria-label 属性',
             'en-US': 'Equiphorus input aria-label attribute'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: '',
-          mobileDemo: '',
           mfDemo: ''
         },
         {
@@ -217,9 +198,8 @@ export default {
             'zh-CN': '原生属性，设置最大值',
             'en-US': 'Native attribute, set the maximum value'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'native',
-          mobileDemo: 'native-attributes',
           mfDemo: ''
         },
         {
@@ -230,9 +210,8 @@ export default {
             'zh-CN': '原生属性，最大输入长度',
             'en-US': 'Native attribute, maximum input length'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'native',
-          mobileDemo: 'counter',
           mfDemo: ''
         },
         {
@@ -254,22 +233,10 @@ export default {
             'zh-CN': '原生属性，设置最小值',
             'en-US': 'Native attribute, which sets the minimum value'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'native',
-          mobileDemo: 'native-attributes',
           mfDemo: ''
         },
-        {
-          name: 'minlength',
-          type: 'Number',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '原生属性，最小输入长度',
-            'en-US': 'Native attribute, minimum input length'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'counter'
-        },
         {
           name: 'modelValue / v-model',
           type: 'string | number',
@@ -289,9 +256,8 @@ export default {
             'zh-CN': '原生 input name 属性',
             'en-US': 'Native input name attribute'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: '',
-          mobileDemo: 'native-attributes',
           mfDemo: ''
         },
         {
@@ -302,9 +268,8 @@ export default {
             'zh-CN': '输入框占位文本',
             'en-US': 'Enter the place-holder text in the text box'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
-          mobileDemo: 'basic-usage',
           mfDemo: ''
         },
         {
@@ -315,9 +280,8 @@ export default {
             'zh-CN': '输入框头部图标',
             'en-US': 'Icon at the head of the input box'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'input-icon',
-          mobileDemo: 'prefix-suffix-icon',
           mfDemo: ''
         },
         {
@@ -328,9 +292,8 @@ export default {
             'zh-CN': '原生属性，是否只读',
             'en-US': 'Native attribute, read-only'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'native',
-          mobileDemo: 'native-attributes',
           mfDemo: ''
         },
         {
@@ -353,22 +316,10 @@ export default {
             'zh-CN': '输入框行数，只对 type="textarea" 有效',
             'en-US': 'Number of lines in the input box. This parameter is valid only for type="textarea"'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'rows',
-          mobileDemo: 'textarea-rows-cols',
           mfDemo: ''
         },
-        {
-          name: 'select-menu',
-          type: 'Array',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '下拉选择的选项',
-            'en-US': 'options of select'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'type-select'
-        },
         {
           name: 'show-password',
           type: 'boolean',
@@ -377,9 +328,8 @@ export default {
             'zh-CN': '是否显示切换密码图标',
             'en-US': 'Whether to display the switchover password icon'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'show-password',
-          mobileDemo: 'show-password',
           mfDemo: ''
         },
         {
@@ -391,9 +341,8 @@ export default {
             'en-US':
               'Whether to display the number of input words. This parameter is valid only when type is "text" or type is "textarea"'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'show-word-limit',
-          mobileDemo: 'counter',
           mfDemo: ''
         },
         {
@@ -431,9 +380,8 @@ export default {
             'zh-CN': '原生属性，设置输入字段的合法数字间隔',
             'en-US': 'Native attribute, which is used to set the valid digit interval of the input field.'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'native',
-          mobileDemo: 'native-attributes',
           mfDemo: ''
         },
         {
@@ -444,9 +392,8 @@ export default {
             'zh-CN': '输入框尾部图标',
             'en-US': 'Input box end icon'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'input-icon',
-          mobileDemo: 'prefix-suffix-icon',
           mfDemo: ''
         },
         {
@@ -461,28 +408,6 @@ export default {
           pcDemo: '',
           mfDemo: ''
         },
-        {
-          name: 'tips',
-          type: 'String | Slot',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '提示信息',
-            'en-US': 'tips under input'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slots'
-        },
-        {
-          name: 'title',
-          type: 'String | Slot',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '自定义标题',
-            'en-US': 'custom title'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
-        },
         {
           name: 'type',
           type: "'text' | 'textarea' | 'password' | InputHTMLAttributes.type",
@@ -492,9 +417,8 @@ export default {
             'en-US':
               'Set the type attribute of the input box. The default value is "text". The options are "text", "textarea", and type values of other native inputs.'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'type',
-          mobileDemo: 'type',
           mfDemo: ''
         },
         {
@@ -508,17 +432,6 @@ export default {
           mode: ['mobile-first'],
           mfDemo: ''
         },
-        {
-          name: 'v-model / modelValue',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '绑定值',
-            'en-US': 'input value'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'basic-usage'
-        },
         {
           name: 'validate-event',
           type: 'boolean',
@@ -527,26 +440,13 @@ export default {
             'zh-CN': '输入时是否触发表单的校验',
             'en-US': 'Trigger form verification upon input'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'validate-event',
-          mobileDemo: 'validate-event',
           mfDemo: ''
         },
-        {
-          name: 'width',
-          type: 'Number | String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '宽度，取值为数字或元素 width 属性有效值，如果是数字则以 px 为单位',
-            'en-US':
-              'width, accepts a numerical value or a valid value for the width property, and if it is a number, it is measured in pixels.'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
-        },
         {
           name: 'popup-more',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN':
@@ -580,9 +480,8 @@ export default {
             'zh-CN': '在 Input 失去焦点时触发',
             'en-US': 'Trigger when Input loses focus'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'event',
-          mobileDemo: 'events',
           mfDemo: ''
         },
         {
@@ -593,9 +492,8 @@ export default {
             'zh-CN': '在 Input 值改变时触发',
             'en-US': 'triggered when the input value changes.'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'event',
-          mobileDemo: 'events',
           mfDemo: ''
         },
         {
@@ -606,9 +504,8 @@ export default {
             'zh-CN': '在点击由 clearable 属性生成的清空按钮时触发',
             'en-US': 'Trigger when the clear button generated by the clearable property is clicked'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'event',
-          mobileDemo: 'events',
           mfDemo: ''
         },
         {
@@ -619,9 +516,8 @@ export default {
             'zh-CN': '在 Input 获得焦点时触发',
             'en-US': 'Trigger when Input obtains focus'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'event',
-          mobileDemo: 'events',
           mfDemo: ''
         },
         {
@@ -632,9 +528,8 @@ export default {
             'zh-CN': '输入值时触发事件',
             'en-US': 'An event is triggered when a value is entered.'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'event',
-          mobileDemo: 'events',
           mfDemo: ''
         }
       ],
@@ -659,9 +554,8 @@ export default {
             'zh-CN': '使 input 失去焦点',
             'en-US': 'The input loses focus.'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'methods',
-          mobileDemo: 'methods',
           mfDemo: ''
         },
         {
@@ -672,9 +566,8 @@ export default {
             'zh-CN': '使 input 获取焦点',
             'en-US': 'To enable the input to obtain the focus'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'methods',
-          mobileDemo: 'methods',
           mfDemo: ''
         },
         {
@@ -685,9 +578,8 @@ export default {
             'zh-CN': '选中 input 中的文字',
             'en-US': 'Select the text in input.'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'methods',
-          mobileDemo: 'methods',
           mfDemo: ''
         }
       ],
@@ -700,9 +592,8 @@ export default {
             'zh-CN': '输入框后置内容，只对 type="text" 有效',
             'en-US': 'Content at the end of the text box. This field is valid only for type="text"'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'slot',
-          mobileDemo: 'slots',
           mfDemo: ''
         },
         {
@@ -713,9 +604,8 @@ export default {
             'zh-CN': '输入框头部内容，只对 type="text" 有效',
             'en-US': 'Content in the header of the text box, which is valid only for type="text"'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'slot',
-          mobileDemo: 'slots',
           mfDemo: ''
         },
         {
@@ -726,9 +616,8 @@ export default {
             'zh-CN': '输入框前置内容，只对 type="text" 有效',
             'en-US': 'Content before the text box, which is valid only for type="text"'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'slot',
-          mobileDemo: 'slots',
           mfDemo: ''
         },
         {
@@ -739,28 +628,9 @@ export default {
             'zh-CN': '输入框尾部内容，只对 type="text" 有效',
             'en-US': 'The content at the end of the text box is valid only for type="text"'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'slot',
-          mobileDemo: 'slots',
           mfDemo: ''
-        },
-        {
-          name: 'tips',
-          desc: {
-            'zh-CN': '提示信息插槽',
-            'en-US': 'tips slot'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slots'
-        },
-        {
-          name: 'title',
-          desc: {
-            'zh-CN': '标题插槽',
-            'en-US': 'title slot'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slots'
         }
       ]
     }
diff --git a/examples/sites/demos/apis/label.js b/examples/sites/demos/apis/label.js
deleted file mode 100644
index d96f8905bc..0000000000
--- a/examples/sites/demos/apis/label.js
+++ /dev/null
@@ -1,116 +0,0 @@
-export default {
-  mode: ['mobile'],
-  apis: [
-    {
-      name: 'Label',
-      type: 'component',
-      props: [
-        {
-          mode: []
-        },
-        {
-          name: 'decimal',
-          type: 'number',
-          defaultValue: '2',
-          desc: {
-            'zh-CN': '<p>小数点的位数</p>',
-            'en-US': 'decimal'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'decimal'
-        },
-        {
-          name: 'ellipsis',
-          type: 'number',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>支持超出省略号显示的行数</p>',
-            'en-US': 'ellipsis'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'ellipsis'
-        },
-        {
-          name: 'is-required',
-          type: 'boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否添加*号</p>',
-            'en-US': 'is required'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'required'
-        },
-        {
-          name: 'label',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>文本</p>',
-            'en-US': 'text'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'base'
-        },
-        {
-          name: 'limit',
-          type: 'number',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>限制文本的字数</p>',
-            'en-US': 'text limit'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'limit'
-        },
-        {
-          name: 'position',
-          type: 'string',
-          defaultValue: 'left',
-          desc: {
-            'zh-CN': '<p>整行显示时的位置:left,center,right</p>',
-            'en-US': 'position of whole line dispaly'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'position'
-        },
-        {
-          name: 'size',
-          type: 'string',
-          defaultValue: 'normal',
-          desc: {
-            'zh-CN': '<p>文本大小:large,normal,small,mini</p>',
-            'en-US': 'text size'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'size'
-        },
-        {
-          name: 'type',
-          type: 'string',
-          defaultValue: 'base',
-          desc: {
-            'zh-CN': '<p>类型 \n base, number</p>',
-            'en-US': 'type'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'type'
-        },
-        {
-          name: 'wholeline',
-          type: 'boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否整行显示</p>',
-            'en-US': 'whole line display'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'wholeline'
-        }
-      ],
-      events: [],
-      methods: [],
-      slots: []
-    }
-  ]
-}
diff --git a/examples/sites/demos/apis/list.js b/examples/sites/demos/apis/list.js
deleted file mode 100644
index cc935725ad..0000000000
--- a/examples/sites/demos/apis/list.js
+++ /dev/null
@@ -1,80 +0,0 @@
-export default {
-  mode: ['mobile'],
-  apis: [
-    {
-      name: 'List',
-      type: 'component',
-      props: [
-        {
-          name: 'content',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置主文本</p>',
-            'en-US': 'Is fixed top'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'double-line'
-        },
-        {
-          mode: []
-        },
-        {
-          name: 'sub-text',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置次文本</p>',
-            'en-US': 'Is show right arrow'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'single-line'
-        }
-      ],
-      events: [],
-      methods: [],
-      slots: [
-        {
-          name: 'default',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>自定义主文本内容</p>',
-            'en-US': 'Is show right arrow'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
-        },
-        {
-          name: 'description',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>自定义描述内容</p>',
-            'en-US': 'Is show right arrow'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slots'
-        },
-        {
-          name: 'prefix',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>自定义头部内容</p>',
-            'en-US': 'Is show right arrow'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slots'
-        },
-        {
-          name: 'suffix',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>自定义尾部内容</p>',
-            'en-US': 'Is show right arrow'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slots'
-        }
-      ]
-    }
-  ]
-}
diff --git a/examples/sites/demos/apis/loading.js b/examples/sites/demos/apis/loading.js
index 2b4816cc19..7c780478b1 100644
--- a/examples/sites/demos/apis/loading.js
+++ b/examples/sites/demos/apis/loading.js
@@ -1,5 +1,5 @@
 export default {
-  mode: ['pc', 'mobile', 'mobile-first'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'loading',
@@ -97,9 +97,8 @@ export default {
             'en-US':
               'Loading the DOM node to be overwritten. A DOM object or character string can be transferred. If a character string is transferred, it is transferred to document.querySelector as a parameter to obtain the corresponding DOM node.'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
-          mobileDemo: 'type',
           mfDemo: ''
         },
         {
@@ -113,44 +112,10 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'loading-tip-text',
           mfDemo: ''
-        },
-        {
-          name: 'tiny_mode',
-          type: 'string',
-          defaultValue: 'pc',
-          desc: {
-            'zh-CN': '<p>通配置项pc,mobile表示不同设备</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'type'
-        },
-        {
-          name: 'type',
-          type: 'string',
-          defaultValue: 'primary',
-          desc: {
-            'zh-CN': '<p>通过type设置不同的加载样式</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'type'
         }
       ],
       events: [],
-      methods: [
-        {
-          name: 'closeLoading',
-          type: 'Function',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>关闭Loading</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'type'
-        }
-      ],
+      methods: [],
       slots: []
     }
   ]
diff --git a/examples/sites/demos/apis/mask.js b/examples/sites/demos/apis/mask.js
deleted file mode 100644
index 8c76c58156..0000000000
--- a/examples/sites/demos/apis/mask.js
+++ /dev/null
@@ -1,67 +0,0 @@
-export default {
-  mode: ['mobile'],
-  apis: [
-    {
-      name: 'Mask',
-      type: 'component',
-      props: [
-        {
-          name: 'cancelTouch',
-          type: 'boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '是否禁用touch事件，设为 <code>true</code> 后点击遮罩层不会关闭',
-            'en-US': "whether to disable touch events, and mask wouldn't close when it was set <code>true</code>"
-          },
-          mode: ['mobile'],
-          mobileDemo: 'cancel-touch'
-        },
-        {
-          name: 'visible',
-          type: 'boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '是否展示遮罩层',
-            'en-US': 'whether to show mask layer'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'base'
-        },
-        {
-          name: 'z-index',
-          type: 'number',
-          defaultValue: '99',
-          desc: {
-            'zh-CN': '层叠数值',
-            'en-US': 'z-index property'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'z-index'
-        }
-      ],
-      events: [
-        {
-          name: 'click',
-          desc: {
-            'zh-CN': '点击遮罩层触发',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'basic-usage'
-        }
-      ],
-      methods: [],
-      slots: [
-        {
-          name: 'default',
-          desc: {
-            'zh-CN': '默认插槽',
-            'en-US': 'Default slot'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slot-default'
-        }
-      ]
-    }
-  ]
-}
diff --git a/examples/sites/demos/apis/minipicker.js b/examples/sites/demos/apis/minipicker.js
deleted file mode 100644
index df1f441c37..0000000000
--- a/examples/sites/demos/apis/minipicker.js
+++ /dev/null
@@ -1,218 +0,0 @@
-export default {
-  mode: ['mobile'],
-  apis: [
-    {
-      name: 'MiniPicker',
-      type: 'component',
-      props: [
-        {
-          name: 'cancel-button-text',
-          type: 'String',
-          defaultValue: '取消',
-          desc: {
-            'zh-CN': '<p>取消按钮内容设置，该属性默认为‘取消’</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'cancel-button-text'
-        },
-        {
-          name: 'columns',
-          type: 'Array',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>配置每一列显示的数据</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'multicolumn'
-        },
-        {
-          name: 'confirm-button-text',
-          type: 'String',
-          defaultValue: '确定',
-          desc: {
-            'zh-CN': '<p>确定按钮内容设置，该属性默认为‘确定’</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'confirm-button-text'
-        },
-        {
-          name: 'default-index',
-          type: 'Number',
-          defaultValue: '0',
-          desc: {
-            'zh-CN': '<p>单列选择时,选择的初始值索引，该属性默认为0</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'defaultindex'
-        },
-        {
-          name: 'item-height',
-          type: 'Number',
-          defaultValue: '34',
-          desc: {
-            'zh-CN': '<p>选项高度，该属性默认为34</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'itemheight'
-        },
-        {
-          name: 'swipe-duration',
-          type: 'Number',
-          defaultValue: '1000',
-          desc: {
-            'zh-CN': '<p>快速滑动时惯性滚动的时长，单位 ms,该属性默认为1000</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'cancel-button-text'
-        },
-        {
-          name: 'title',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>标题</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'cancel-button-text'
-        },
-        {
-          name: 'value-key',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>选项对象中，选项文字对应的键名，该属性默认为"text"</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
-        },
-        {
-          name: 'visible',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>选择器组件显示或隐藏，该属性默认为false</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'cancel-button-text'
-        },
-        {
-          name: 'visible-item-count',
-          type: 'Number',
-          defaultValue: '5',
-          desc: {
-            'zh-CN': '<p>可见的选项个数，该属性默认为5</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'visibleitemcount'
-        }
-      ],
-      events: [
-        {
-          name: 'cancel',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>点击取消按钮时触发</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
-        },
-        {
-          name: 'change',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>选项改变时触发。</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'change'
-        },
-        {
-          name: 'confirm',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>点击确定按钮时触发</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'cancel'
-        }
-      ],
-      methods: [
-        {
-          name: 'getColumnIndex',
-          type: '获取对应列选中项的索引，参数columnIndex，返回值optionIndex',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>下拉时触发的事件</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'methods'
-        },
-        {
-          name: 'getColumnValue',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>获取对应列选中的值，参数columnIndex，返回值value</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'methods'
-        },
-        {
-          name: 'getColumnValues',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>获取对应列中所有选项，参数columnIndex，返回值values</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'methods'
-        },
-        {
-          name: 'getIndexes',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>获取所有列选中值对应的索引</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'column'
-        },
-        {
-          name: 'getValues',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>获取所有列选中的值</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'column'
-        }
-      ],
-      slots: [
-        {
-          name: 'toolbar',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>自定义工具栏</p>',
-            'en-US': 'toolbar'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'toolbar'
-        }
-      ]
-    }
-  ]
-}
diff --git a/examples/sites/demos/apis/modal.js b/examples/sites/demos/apis/modal.js
index 02a5087725..eed9cc38c5 100644
--- a/examples/sites/demos/apis/modal.js
+++ b/examples/sites/demos/apis/modal.js
@@ -1,5 +1,5 @@
 export default {
-  mode: ['pc', 'mobile', 'mobile-first'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'modal',
@@ -68,7 +68,7 @@ export default {
         },
         {
           name: 'custom-class',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '组件自定义 class 样式',
@@ -79,7 +79,7 @@ export default {
         },
         {
           name: 'description',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '组件详情信息',
@@ -96,9 +96,8 @@ export default {
             'zh-CN': "自动关闭的延时，仅当 type 为 'message' 有效",
             'en-US': "Delay for automatic shutdown, only valid when type is 'message'"
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'message-close',
-          mobileDemo: 'duration',
           mfDemo: ''
         },
         {
@@ -109,9 +108,8 @@ export default {
             'zh-CN': '是否允许按 Esc 键关闭窗口',
             'en-US': 'Whether to allow pressing the Esc key to close a window'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-other',
-          mobileDemo: 'mask-closable',
           mfDemo: ''
         },
         {
@@ -133,9 +131,8 @@ export default {
             'zh-CN': '是否最大化显示',
             'en-US': 'Whether to maximize the display'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-size',
-          mobileDemo: 'fullscreen',
           mfDemo: ''
         },
         {
@@ -146,9 +143,8 @@ export default {
             'zh-CN': '窗口的高度',
             'en-US': 'window height'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-size',
-          mobileDemo: '',
           mfDemo: ''
         },
         {
@@ -160,9 +156,8 @@ export default {
             'en-US':
               "If you don't want the window to be clicked repeatedly, you can set a unique id to prevent repeated prompts. This is only valid when type is 'message'"
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'message-id',
-          mobileDemo: 'id',
           mfDemo: ''
         },
         {
@@ -173,9 +168,8 @@ export default {
             'zh-CN': '关闭弹窗时，是否重置表单数据',
             'en-US': 'Whether to reset the form data when closing the pop-up window'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-other',
-          mobileDemo: 'is-form-reset',
           mfDemo: ''
         },
         {
@@ -186,9 +180,8 @@ export default {
             'zh-CN': '是否锁住滚动条，不允许页面滚动',
             'en-US': 'Whether to lock the scroll bar and not allow the page to scroll'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-lock',
-          mobileDemo: 'lock-scroll',
           mfDemo: ''
         },
         {
@@ -199,9 +192,8 @@ export default {
             'zh-CN': '是否锁住页面，不允许窗口之外的任何操作',
             'en-US': 'Whether to lock the page and not allow any operations outside the window'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-lock',
-          mobileDemo: 'lock-view',
           mfDemo: ''
         },
         {
@@ -212,9 +204,8 @@ export default {
             'zh-CN': '是否显示遮罩层',
             'en-US': 'Whether to display the mask layer'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-mask',
-          mobileDemo: 'mask-closable',
           mfDemo: ''
         },
         {
@@ -225,9 +216,8 @@ export default {
             'zh-CN': '是否允许点击遮罩层关闭窗口',
             'en-US': 'Whether to allow clicking on the mask layer to close the window'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-mask',
-          mobileDemo: 'mask-closable',
           mfDemo: ''
         },
         {
@@ -238,9 +228,8 @@ export default {
             'zh-CN': '窗口的内容',
             'en-US': 'Window contents'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
-          mobileDemo: 'message',
           mfDemo: ''
         },
         {
@@ -262,9 +251,8 @@ export default {
             'zh-CN': '窗口的最小高度',
             'en-US': 'Minimum height of window'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-resize',
-          mobileDemo: 'min-height',
           mfDemo: ''
         },
         {
@@ -275,9 +263,8 @@ export default {
             'zh-CN': '窗口的最小宽度',
             'en-US': 'The minimum width of the window'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-resize',
-          mobileDemo: 'min-width',
           mfDemo: ''
         },
         {
@@ -288,13 +275,12 @@ export default {
             'zh-CN': '是否显示',
             'en-US': 'Whether to display'
           },
-          mode: ['pc', 'mobile'],
-          pcDemo: 'basic-usage',
-          mobileDemo: 'cancel-event'
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
         },
         {
           name: 'options',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': "多选选项，格式为 [{ value: 'value1', name: '选项1' }, ...]",
@@ -305,7 +291,7 @@ export default {
         },
         {
           name: 'position',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': "弹出框位置，默认居中显示，设置值为 'bottom-right' 时弹出框显示在右下角",
@@ -322,14 +308,13 @@ export default {
             'zh-CN': '是否允许拖动调整窗口大小',
             'en-US': 'Whether to allow dragging to resize the window'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-resize',
-          mobileDemo: 'resize',
           mfDemo: ''
         },
         {
           name: 'show-close',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '是否显示关闭按钮，默认值为 true',
@@ -348,7 +333,6 @@ export default {
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-footer',
-          mobileDemo: 'showFooter',
           mfDemo: ''
         },
         {
@@ -359,9 +343,8 @@ export default {
             'zh-CN': '是否显示头部',
             'en-US': 'Display Header'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-header',
-          mobileDemo: 'showHeader',
           mfDemo: ''
         },
         {
@@ -373,9 +356,8 @@ export default {
             'zh-CN': "消息状态，当 type 为 'alert'、'message'、'confirm' 时有效",
             'en-US': "Message status, valid when type is 'alert', 'message', 'confirm'"
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'status',
-          mobileDemo: 'status',
           mfDemo: ''
         },
         {
@@ -386,9 +368,8 @@ export default {
             'zh-CN': '窗口的标题',
             'en-US': 'Window title'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-header',
-          mobileDemo: 'title',
           mfDemo: ''
         },
         {
@@ -399,9 +380,8 @@ export default {
             'zh-CN': "消息距离顶部的位置，仅当 type 为 'message' 时有效",
             'en-US': "The position of the message from the top, only valid when type is 'message'"
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'message-top',
-          mobileDemo: 'top',
           mfDemo: ''
         },
         {
@@ -412,14 +392,13 @@ export default {
             'zh-CN': '窗口类型',
             'en-US': 'Window type'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
-          mobileDemo: 'type',
           mfDemo: ''
         },
         {
           name: 'v-model',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '绑定值',
@@ -437,9 +416,8 @@ export default {
             'en-US':
               'The width of the window(Set the width in pixels or percentages, and the browser window size can be changed to display in the center)'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-size',
-          mobileDemo: 'grid',
           mfDemo: ''
         },
         {
@@ -450,9 +428,8 @@ export default {
             'zh-CN': '自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）',
             'en-US': 'Customize the stacking order (may be used in some special scenarios, such as when it is blocked)'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-other',
-          mobileDemo: 'zIndex',
           mfDemo: ''
         }
       ],
@@ -466,9 +443,8 @@ export default {
             'zh-CN': '点击取消按钮时会触发该事件',
             'en-US': 'This event is triggered when the Cancel button is clicked'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-event',
-          mobileDemo: 'cancel-event',
           mfDemo: ''
         },
         {
@@ -480,9 +456,8 @@ export default {
             'zh-CN': '点击关闭按钮时会触发该事件',
             'en-US': 'This event is triggered when the close button is clicked'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-event',
-          mobileDemo: 'close-event',
           mfDemo: ''
         },
         {
@@ -494,9 +469,8 @@ export default {
             'zh-CN': '点击确定按钮时会触发该事件',
             'en-US': 'This event is triggered when the OK button is clicked'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-event',
-          mobileDemo: 'confirm-event',
           mfDemo: ''
         },
         {
@@ -508,9 +482,8 @@ export default {
             'zh-CN': '在窗口关闭时会触发该事件',
             'en-US': 'This event is triggered when the window is closed'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-event',
-          mobileDemo: 'hide-event',
           mfDemo: ''
         },
         {
@@ -522,9 +495,8 @@ export default {
             'zh-CN': '在窗口显示时会触发该事件',
             'en-US': 'This event is triggered when the window is displayed'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-event',
-          mobileDemo: 'show-event',
           mfDemo: ''
         },
         {
@@ -536,9 +508,8 @@ export default {
             'zh-CN': '窗口缩放时会触发该事件',
             'en-US': 'This event is triggered when a window is zoomed in or out'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-event',
-          mobileDemo: 'zoom-event',
           mfDemo: ''
         }
       ],
@@ -552,9 +523,8 @@ export default {
             'zh-CN': '默认插槽',
             'en-US': 'Default slot'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-fn-slots',
-          mobileDemo: 'cancel-event',
           mfDemo: ''
         },
         {
@@ -565,9 +535,8 @@ export default {
             'zh-CN': '窗口底部的模板',
             'en-US': 'Template at the bottom of the window'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'modal-fn-slots',
-          mobileDemo: 'footer-slot',
           mfDemo: ''
         }
       ]
diff --git a/examples/sites/demos/apis/multi-select.js b/examples/sites/demos/apis/multi-select.js
deleted file mode 100644
index 40b4c1a045..0000000000
--- a/examples/sites/demos/apis/multi-select.js
+++ /dev/null
@@ -1,188 +0,0 @@
-export default {
-  mode: ['mobile'],
-  apis: [
-    {
-      name: 'multiSelect',
-      type: 'component',
-      props: [
-        {
-          name: 'data-source',
-          type: 'IMultiSelectMenu[]',
-          typeAnchorName: 'IMultiSelectMenu',
-          defaultValue: '[]',
-          desc: {
-            'zh-CN': '数据源',
-            'en-US': 'data source'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'basic-usage'
-        },
-        {
-          name: 'default-selected-array',
-          type: 'number[]',
-          defaultValue: '',
-          desc: {
-            'zh-CN': `默认值，当 type='wheel' 时适用`,
-            'en-US': `default selected value, used when type='wheel'`
-          },
-          mode: ['mobile'],
-          mobileDemo: 'type-wheel'
-        },
-        {
-          name: 'disabled',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '禁用',
-            'en-US': 'disabled'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'disabled'
-        },
-        {
-          name: 'filterable',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '可筛选',
-            'en-US': 'filterable'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'filter'
-        },
-        {
-          name: 'mask',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '是否显示遮罩层',
-            'en-US': 'to show mask'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'mask'
-        },
-        {
-          name: 'mask-options',
-          type: 'IMaskOptions',
-          typeAnchorName: 'IMaskOptions',
-          defaultValue: '{}',
-          desc: {
-            'zh-CN':
-              '遮罩层配置：<ul><li>zIndex: 遮罩层的层叠数值</li><li>cancelTouch: 是否禁用 touch 事件，禁用后点击遮罩层不能关闭下拉框</li></ul>',
-            'en-US':
-              'Mask layer settings, including the following properties: <p>zIndex: the stacking order value of the mask layer;</p><p>cancelTouch: whether to disable touch events.</p>'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'mask-options'
-        },
-        {
-          name: 'search-placeholder',
-          type: 'string',
-          defaultValue: '搜索',
-          desc: {
-            'zh-CN': '搜索框默认提示',
-            'en-US': 'search input placeholder'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'filter'
-        },
-        {
-          name: 'type',
-          type: `'list' | 'wheel'`,
-          defaultValue: '',
-          desc: {
-            'zh-CN': '选项外观，其中 list：列表形式；wheel：滑轮模式',
-            'en-US': 'option appearance'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'wheel'
-        },
-        {
-          name: 'v-model/modelValue',
-          type: '(string | string[])[]',
-          defaultValue: '[]',
-          desc: {
-            'zh-CN': '<p>选中值</p>',
-            'en-US': '<p>selected value</p>'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'basic-usage'
-        }
-      ],
-      events: [
-        {
-          name: 'item-click',
-          type: '(option, headerIndex) => void',
-          desc: {
-            'zh-CN': '点击选项事件，当 type="list" 时适用',
-            'en-us': 'click option event, applicable when type = "list"'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'event-click-item'
-        },
-        {
-          name: 'confirm',
-          type: '',
-          defaultValue: '',
-          desc: {
-            'zh-CN': `确认事件，当 type='wheel' 时适用`,
-            'en-US': `confirm selection event, applicable when the type = 'wheel'`
-          },
-          mode: ['mobile'],
-          mobileDemo: 'type-wheel'
-        },
-        {
-          name: 'reset',
-          type: '',
-          defaultValue: '',
-          desc: {
-            'zh-CN': `重置事件，当 type='wheel' 时适用`,
-            'en-US': `reset selection event, applicable when the type = 'wheel'`
-          },
-          mode: ['mobile'],
-          mobileDemo: 'type-wheel'
-        }
-      ],
-      slots: [
-        {
-          name: 'footer',
-          desc: {
-            'zh-CN': '选项底部插槽',
-            'en-US': 'slot under options'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slots'
-        }
-      ]
-    }
-  ],
-
-  types: [
-    {
-      name: 'IMultiSelectMenu',
-      type: 'interface',
-      depTypes: ['IMultiSelectOption'],
-      code: `
-interface IMultiSelectMenu {
-  title: string, // 菜单项标题
-  options: IMultiSelectOption[], // 选项数据
-  multiple?: boolean, // 是否多选
-  disabled?: boolean, // 菜单项是否禁用
-  hasFooter?: boolean // 是否显示底部
-}
-`
-    },
-    {
-      name: 'IMultiSelectOption',
-      type: 'interface',
-      code: `
-interface IMultiSelectOption {
-  label: string, // 选项内容
-  value: string, // 选项值
-  disabled?: boolean, // 是否禁用
-  children?: IMultiSelectOption[], // 子选项数据
-}
-`
-    }
-  ]
-}
diff --git a/examples/sites/demos/apis/navbar.js b/examples/sites/demos/apis/navbar.js
deleted file mode 100644
index b22c53665e..0000000000
--- a/examples/sites/demos/apis/navbar.js
+++ /dev/null
@@ -1,133 +0,0 @@
-export default {
-  mode: ['mobile'],
-  apis: [
-    {
-      name: 'navBar',
-      type: 'component',
-      props: [
-        {
-          name: 'fixed',
-          type: 'Boolean',
-          defaultValue: 'true',
-          desc: {
-            'zh-CN': '<p>是否固定在顶部，该属性默认为true</p>',
-            'en-US': 'Is fixed top'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'left-right-arrow'
-        },
-        {
-          name: 'left-arrow',
-          type: 'Boolean',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>是否显示左侧箭头，该属性默认为false</p>',
-            'en-US': 'Is show left arrow'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'left-right-arrow'
-        },
-        {
-          name: 'left-text',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置左侧文本</p>',
-            'en-US': 'Is show left text'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'left-right-text'
-        },
-        {
-          name: 'right-arrow',
-          type: 'Boolean',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>是否显示右侧箭头</p>',
-            'en-US': 'Is show right arrow'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'left-right-arrow'
-        },
-        {
-          name: 'right-text',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置右侧文本</p>',
-            'en-US': 'Is show right text'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'left-right-text'
-        },
-        {
-          name: 'sub-title',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置副标题</p>',
-            'en-US': 'set sub-title'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'left-right-text'
-        },
-        {
-          name: 'title',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置主标题</p>',
-            'en-US': 'set main-title'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'z-index'
-        },
-        {
-          name: 'z-index',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置z-index</p>',
-            'en-US': 'set z-index'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'z-index'
-        }
-      ],
-      events: [],
-      methods: [],
-      slots: [
-        {
-          name: 'default',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>自定义标题</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'left-right-arrow'
-        },
-        {
-          name: 'left',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>自定义左侧内容</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'left-right-text'
-        },
-        {
-          name: 'right',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>自定义右侧内容</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'left-right-text'
-        }
-      ]
-    }
-  ]
-}
diff --git a/examples/sites/demos/apis/numeric.js b/examples/sites/demos/apis/numeric.js
index 4e178646bd..55f2f61499 100644
--- a/examples/sites/demos/apis/numeric.js
+++ b/examples/sites/demos/apis/numeric.js
@@ -1,5 +1,5 @@
 export default {
-  mode: ['pc', 'mobile', 'mobile-first'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'numeric',
@@ -49,9 +49,8 @@ export default {
             'zh-CN': '向上到达最大值后，是否从最小值开始，或反过来',
             'en-US': 'When the maximum value is reached, start from the minimum value, or vice versa'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'max-min',
-          mobileDemo: 'circulate',
           mfDemo: ''
         },
         {
@@ -62,9 +61,8 @@ export default {
             'zh-CN': '是否使用加减按钮',
             'en-US': 'Whether to use the control button'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'controls',
-          mobileDemo: 'controls',
           mfDemo: ''
         },
         {
@@ -75,9 +73,8 @@ export default {
             'zh-CN': '加减按钮位置，可选值为 right，表示加减按钮均位于最右侧',
             'en-US': 'Control button position; The optional value of this attribute is right'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'controls',
-          mobileDemo: 'controls-position',
           mfDemo: ''
         },
         {
@@ -88,14 +85,13 @@ export default {
             'zh-CN': '禁用',
             'en-US': 'Whether to disable the counter'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'dynamic-disabled',
-          mobileDemo: '',
           mfDemo: ''
         },
         {
           name: 'display-only',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '设置只读态',
@@ -120,7 +116,7 @@ export default {
         },
         {
           name: 'hide-unit',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '隐藏单位',
@@ -131,7 +127,7 @@ export default {
         },
         {
           name: 'hold-zero',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '精度细化，默认值为 true ',
@@ -148,9 +144,8 @@ export default {
             'zh-CN': '组件 arial-label 属性取值',
             'en-US': 'The value of arial-label attribute'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: '',
-          mobileDemo: '',
           mfDemo: ''
         },
         {
@@ -162,9 +157,8 @@ export default {
             'en-US':
               'Maximum value that can be entered in a component to create a valid value range. Integers and decimals are supported'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'max-min',
-          mobileDemo: 'max',
           mfDemo: ''
         },
         {
@@ -176,14 +170,13 @@ export default {
             'en-US':
               'Specify the minimum value that can be entered for a component to create a valid value range. Integers and decimals are supported'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'max-min',
-          mobileDemo: 'max',
           mfDemo: ''
         },
         {
           name: 'model-truncation',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '在配置了精度情况下，是否对v-model绑字值进行精度截取，配为false时，精度仅用来作展示',
@@ -224,9 +217,8 @@ export default {
             'zh-CN': '输入框内的提示占位文本',
             'en-US': 'Set the placeholder text in the text box'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
-          mobileDemo: 'placeholder',
           mfDemo: ''
         },
         {
@@ -248,9 +240,8 @@ export default {
             'zh-CN': '数值精度',
             'en-US': 'Numeric precision'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'precision',
-          mobileDemo: 'precision',
           mfDemo: ''
         },
         {
@@ -299,9 +290,8 @@ export default {
             'zh-CN': '步长',
             'en-US': 'Increment or decrement value each time'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'about-step',
-          mobileDemo: 'step',
           mfDemo: ''
         },
         {
@@ -312,9 +302,8 @@ export default {
             'zh-CN': '是否只能输入 step 的倍数',
             'en-US': 'Whether to enter only multiples of step'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'about-step',
-          mobileDemo: 'step',
           mfDemo: ''
         },
         {
@@ -330,7 +319,7 @@ export default {
         },
         {
           name: 'string-mode',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '使用字符串模式，精度超过JS限制时使用',
@@ -341,7 +330,7 @@ export default {
         },
         {
           name: 'tabindex',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': 'Numeric组件的 tabindex ',
@@ -364,7 +353,7 @@ export default {
         },
         {
           name: 'unit-center',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '配置unit属性后，设置输入框内的数字是否居中显示，默认值为 false',
@@ -394,13 +383,13 @@ export default {
             'en-US':
               'Set whether to trigger the change event after the value is changed, except for the plus and minus buttons and direct input of values.'
           },
-          mode: ['pc', 'mobile-first', 'mobile'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'change-event',
           mfDemo: ''
         },
         {
           name: 'validate-event',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '验证事件，默认值为true',
@@ -411,26 +400,15 @@ export default {
         },
         {
           name: 'string-mode',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '使用字符串模式，精度超过JS限制时使用',
             'en-US': ''
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'string-mode',
           mfDemo: ''
-        },
-        {
-          name: 'value',
-          type: 'Number',
-          defaultValue: '0',
-          desc: {
-            'zh-CN': '<p>设置输入组件的默认值，该属性默认为 0。</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
         }
       ],
       events: [
@@ -442,9 +420,8 @@ export default {
             'zh-CN': '组件失去焦点时触发的回调函数',
             'en-US': 'The callback function triggered when a component loses focus'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'blur-event',
-          mobileDemo: 'event',
           mfDemo: ''
         },
         {
@@ -455,9 +432,8 @@ export default {
             'zh-CN': '组件的值变化时触发的回调函数',
             'en-US': 'The callback function triggered when the value of a component changes'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'change-event',
-          mobileDemo: 'event',
           mfDemo: ''
         },
         {
@@ -478,9 +454,8 @@ export default {
             'zh-CN': '组件获得焦点时触发的回调函数',
             'en-US': 'The callback function triggered when a component obtains the focus'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'focus-event',
-          mobileDemo: 'event',
           mfDemo: ''
         },
         {
diff --git a/examples/sites/demos/apis/popover.js b/examples/sites/demos/apis/popover.js
index 6a41240fd2..640f8f967b 100644
--- a/examples/sites/demos/apis/popover.js
+++ b/examples/sites/demos/apis/popover.js
@@ -1,5 +1,5 @@
 export default {
-  mode: ['pc', 'mobile', 'mobile-first'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'popover',
@@ -13,9 +13,8 @@ export default {
             'zh-CN': '是否添加到body上',
             'en-US': 'Whether to add it to the body'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: '',
-          mobileDemo: '',
           mfDemo: ''
         },
         {
@@ -26,9 +25,8 @@ export default {
             'zh-CN': '弹出层的箭头偏移位置',
             'en-US': "the layer's arrow offset "
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'offset',
-          mobileDemo: '',
           mfDemo: ''
         },
         {
@@ -39,9 +37,8 @@ export default {
             'zh-CN': '触发方式为 hover 时的隐藏延迟，单位为毫秒',
             'en-US': 'The close delay when the trigger mode is hover, in milliseconds'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'delay',
-          mobileDemo: '',
           mfDemo: ''
         },
         {
@@ -52,9 +49,8 @@ export default {
             'zh-CN': '弹出层的内容',
             'en-US': 'Layer Content.'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
-          mobileDemo: '',
           mfDemo: ''
         },
         {
@@ -65,9 +61,8 @@ export default {
             'zh-CN': '是否禁用',
             'en-US': 'Whether the status is visible'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'disabled',
-          mobileDemo: '',
           mfDemo: ''
         },
         {
@@ -81,39 +76,6 @@ export default {
           mode: ['pc'],
           pcDemo: ''
         },
-        {
-          name: 'listData',
-          type: 'Array | Object',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>内容对象列表，对象字段包含：icon图片地址、label标题、subLabel子标题</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'base'
-        },
-        {
-          name: 'maxHeight',
-          type: 'Number  | String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>最大高度</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'base'
-        },
-        {
-          name: 'modelValue / v-model',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>状态是否可见</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
-        },
         {
           name: 'offset',
           type: 'number',
@@ -122,9 +84,8 @@ export default {
             'zh-CN': '弹出层的偏移量',
             'en-US': 'Layer offset'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'offset',
-          mobileDemo: '',
           mfDemo: ''
         },
         {
@@ -135,9 +96,8 @@ export default {
             'zh-CN': '触发方式为 hover 时的显示延迟，单位为毫秒',
             'en-US': 'The display delay when the trigger mode is hover, in milliseconds'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'delay',
-          mobileDemo: '',
           mfDemo: ''
         },
         {
@@ -149,9 +109,8 @@ export default {
             'zh-CN': '弹出层出现的位置',
             'en-US': 'Layer Placement'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'custom-popper',
-          mobileDemo: 'base',
           mfDemo: ''
         },
         {
@@ -162,9 +121,8 @@ export default {
             'zh-CN': '为弹出层添加类名',
             'en-US': 'Add a class name for the pop-up layer.'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'custom-popper',
-          mobileDemo: '',
           mfDemo: ''
         },
         {
@@ -176,9 +134,8 @@ export default {
             'zh-CN': '弹出层参数',
             'en-US': 'layer parameters; Refer to the description of IPopperOption'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'popper-options',
-          mobileDemo: '',
           mfDemo: ''
         },
         {
@@ -189,9 +146,8 @@ export default {
             'zh-CN': '弹出层的标题',
             'en-US': 'Layer Title'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
-          mobileDemo: 'base',
           mfDemo: ''
         },
         {
@@ -202,8 +158,7 @@ export default {
             'zh-CN': '<p>组件的旋转中心点</p>',
             'en-US': 'display different button'
           },
-          mode: ['mobile', 'mobile-first'],
-          mobileDemo: '',
+          mode: ['mobile-first'],
           mfDemo: ''
         },
         {
@@ -214,9 +169,8 @@ export default {
             'zh-CN': '定义渐变动画',
             'en-US': 'Define gradient animation'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'transition',
-          mobileDemo: '',
           mfDemo: ''
         },
         {
@@ -227,14 +181,13 @@ export default {
             'zh-CN': '触发方式',
             'en-US': 'Trigger mode'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'trigger',
-          mobileDemo: '',
           mfDemo: ''
         },
         {
           name: 'v-model',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '状态是否可见',
@@ -262,9 +215,8 @@ export default {
             'zh-CN': '是否显示弹出层的箭头',
             'en-US': "whether to show layer's arrow"
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'custom-popper',
-          mobileDemo: '',
           mfDemo: ''
         },
         {
@@ -275,9 +227,8 @@ export default {
             'zh-CN': '弹出层宽度',
             'en-US': 'Layer width'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
-          mobileDemo: 'base',
           mfDemo: ''
         }
       ],
@@ -290,9 +241,8 @@ export default {
             'zh-CN': '进入的动画播放完毕后触发',
             'en-US': 'This event is triggered after the animation is played.'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'events',
-          mobileDemo: 'base',
           mfDemo: ''
         },
         {
@@ -303,9 +253,8 @@ export default {
             'zh-CN': '离开的动画播放完毕后触发',
             'en-US': 'Triggered after the hidden animation is played.'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'events',
-          mobileDemo: 'base',
           mfDemo: ''
         },
         {
@@ -316,9 +265,8 @@ export default {
             'zh-CN': '隐藏时触发',
             'en-US': 'Triggered when hidden'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'events',
-          mobileDemo: 'base',
           mfDemo: ''
         },
         {
@@ -329,9 +277,8 @@ export default {
             'zh-CN': '显示时触发',
             'en-US': 'Triggered when display'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'events',
-          mobileDemo: 'base',
           mfDemo: ''
         }
       ],
@@ -345,9 +292,8 @@ export default {
             'zh-CN': '弹出层元素插槽',
             'en-US': 'The layer element slot'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'content',
-          mobileDemo: 'base',
           mfDemo: ''
         },
         {
@@ -358,9 +304,8 @@ export default {
             'zh-CN': '触发源元素插槽，该插槽是必传插槽。',
             'en-US': "The layer's reference element slot"
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'content',
-          mobileDemo: 'base',
           mfDemo: ''
         }
       ]
diff --git a/examples/sites/demos/apis/progress.js b/examples/sites/demos/apis/progress.js
index 9b1c0c18ec..be73f2c338 100644
--- a/examples/sites/demos/apis/progress.js
+++ b/examples/sites/demos/apis/progress.js
@@ -1,5 +1,5 @@
 export default {
-  mode: ['pc', 'mobile', 'mobile-first'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'progress',
@@ -14,9 +14,8 @@ export default {
             'zh-CN': '进度条背景色（会覆盖 status 状态颜色）',
             'en-US': 'Background color of the progress bar (overwrites the status color)'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'custom-color',
-          mobileDemo: 'custom-color',
           mfDemo: ''
         },
         {
@@ -33,7 +32,7 @@ export default {
         },
         {
           name: 'info',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '环形进度条底部描述文字',
@@ -50,9 +49,8 @@ export default {
             'zh-CN': '百分比（必填）；该属性的可选值为 0-100',
             'en-US': 'Percentage (mandatory) The optional values for this property are 0 - 100'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
-          mobileDemo: 'dynamic-progress',
           mfDemo: ''
         },
         {
@@ -63,14 +61,13 @@ export default {
             'zh-CN': '是否显示进度条文字内容',
             'en-US': 'Display progress bar text'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'format-text',
-          mobileDemo: 'text-inside-or-no-text',
           mfDemo: ''
         },
         {
           name: 'size',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '进度条尺寸',
@@ -87,9 +84,8 @@ export default {
             'zh-CN': '进度条当前状态',
             'en-US': 'Current status of the progress bar'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'progress-status',
-          mobileDemo: 'progress-status',
           mfDemo: ''
         },
         {
@@ -100,9 +96,8 @@ export default {
             'zh-CN': 'line 类型进度条的宽度，单位 px',
             'en-US': 'The width of the progress bar of type line, in px'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
-          mobileDemo: 'progress-width',
           mfDemo: ''
         },
         {
@@ -114,9 +109,8 @@ export default {
             'en-US':
               'The text displayed on the progress bar is embedded in the progress bar. This parameter is available only when type is set to line'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'format-text',
-          mobileDemo: 'format-text',
           mfDemo: ''
         },
         {
@@ -127,9 +121,8 @@ export default {
             'zh-CN': '进度条类型',
             'en-US': 'Progress bar type'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'progress-type-circle',
-          mobileDemo: 'progress-type',
           mfDemo: ''
         },
         {
@@ -140,9 +133,8 @@ export default {
             'zh-CN': '环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用）',
             'en-US': 'Circular progress bar canvas width (available only when type is circle or dashboard)'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'progress-type-circle',
-          mobileDemo: 'width',
           mfDemo: ''
         }
       ],
diff --git a/examples/sites/demos/apis/pull-refresh.js b/examples/sites/demos/apis/pull-refresh.js
index b8c3b8aa0e..e2565bb498 100644
--- a/examples/sites/demos/apis/pull-refresh.js
+++ b/examples/sites/demos/apis/pull-refresh.js
@@ -1,146 +1,13 @@
 export default {
-  mode: ['mobile', 'mobile-first'],
+  mode: ['mobile-first'],
   apis: [
     {
       name: 'pull-refresh ',
       type: 'component',
-      props: [
-        {
-          name: 'disabled-pull-down',
-          type: 'boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否禁用下拉刷新</p>',
-            'en-US': 'disablde pull down'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'disabled-pull-down'
-        },
-        {
-          name: 'disabled-pull-up',
-          type: 'boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否禁用上拉</p>',
-            'en-US': 'disablded pull up'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'disabled-pull-up'
-        },
-        {
-          name: 'has-more',
-          type: 'boolean',
-          defaultValue: 'true',
-          desc: {
-            'zh-CN': '<p>是否有更多数据</p>',
-            'en-US': 'has more'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'has-more'
-        },
-        {
-          name: 'loosing-text',
-          type: 'string',
-          defaultValue: '释放即可刷新',
-          desc: {
-            'zh-CN': '<p>下拉高度大于等于head-height时的提示文字，默认为：释放即可刷新</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'loosing-text'
-        },
-        {
-          name: 'pull-down-loading-text',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>下拉加载文字</p>',
-            'en-US': 'pull down loading text'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'pulling-text'
-        },
-        {
-          name: 'pull-up-distance',
-          type: 'number',
-          defaultValue: '18',
-          desc: {
-            'zh-CN': '<p>触发上拉刷新的距离</p>',
-            'en-US': 'pull up distance'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'pull-up-distance'
-        },
-        {
-          name: 'pull-up-loading-text',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>上拉加载文字</p>',
-            'en-US': 'pull up loading text'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'pulling-text'
-        },
-        {
-          name: 'v-model',
-          type: 'boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否刷新状态，可以手动设置false来关闭刷新</p>',
-            'en-US': 'is refreshing'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'base'
-        }
-      ],
-      events: [
-        {
-          name: 'pull-down',
-          type: '(event: PullEvent) => void',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>下拉时触发的事件</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'event'
-        },
-        {
-          name: 'pull-up',
-          type: '(event: PullEvent) => void',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>上拉时触发的事件</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'event'
-        }
-      ],
+      props: [],
+      events: [],
       methods: [],
-      slots: [
-        {
-          name: 'footer',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>上拉加载更多插槽</p>',
-            'en-US': 'pull up slot'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'pull-refresh-slot'
-        },
-        {
-          name: 'header',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>下拉刷新插槽</p>',
-            'en-US': 'pull down slot'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
-        }
-      ]
+      slots: []
     },
     {
       name: 'pull-refresh',
@@ -151,7 +18,7 @@ export default {
         },
         {
           name: 'disabled',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '默认值是false',
           desc: {
             'zh-CN': '是否禁用下拉刷新',
@@ -185,7 +52,7 @@ export default {
         },
         {
           name: 'loadingText',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '数据刷新过程的提示文本',
@@ -196,7 +63,7 @@ export default {
         },
         {
           name: 'loosingText',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '向下拖动超过阈值后可松开进行刷新的提示文本',
@@ -207,7 +74,7 @@ export default {
         },
         {
           name: 'modelValue',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '默认值是false',
           desc: {
             'zh-CN': '是否正在进行下拉刷新',
@@ -229,7 +96,7 @@ export default {
         },
         {
           name: 'pullingText',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '向下拖动过程的提示文本',
@@ -240,7 +107,7 @@ export default {
         },
         {
           name: 'selfSimulate',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '默认值是false',
           desc: {
             'zh-CN':
@@ -264,7 +131,7 @@ export default {
         },
         {
           name: 'successText',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '刷新成功的提示文本',
diff --git a/examples/sites/demos/apis/radio.js b/examples/sites/demos/apis/radio.js
index 34d01441e7..d99b74dc7c 100644
--- a/examples/sites/demos/apis/radio.js
+++ b/examples/sites/demos/apis/radio.js
@@ -1,5 +1,5 @@
 export default {
-  mode: ['pc', 'mobile', 'mobile-first'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'radio',
@@ -13,9 +13,8 @@ export default {
             'zh-CN': '是否禁用',
             'en-US': 'Disable'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'dynamic-disable',
-          mobileDemo: 'disabled',
           mfDemo: ''
         },
         {
@@ -38,9 +37,8 @@ export default {
             'zh-CN': 'radio 选中时的值',
             'en-US': 'Value when radio is selected'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
-          mobileDemo: 'label',
           mfDemo: ''
         },
         {
@@ -62,14 +60,13 @@ export default {
             'zh-CN': '原生 name 属性',
             'en-US': 'Native name attribute'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: '',
-          mobileDemo: 'base',
           mfDemo: ''
         },
         {
           name: 'tabindex',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': 'Radio 组件的 tabindex。默认值为 1 ',
@@ -86,14 +83,13 @@ export default {
             'zh-CN': '单选框文本内容',
             'en-US': 'Radio Box Text Content'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'radio-text',
-          mobileDemo: 'base',
           mfDemo: ''
         },
         {
           name: 'v-model',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '绑定值',
@@ -101,17 +97,6 @@ export default {
           },
           mode: ['mobile-first'],
           mfDemo: ''
-        },
-        {
-          name: 'value',
-          type: 'object | string',
-          defaultValue: '{}',
-          desc: {
-            'zh-CN': '<p>绑定值，该属性默认为{}</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'base'
         }
       ],
       events: [
@@ -123,9 +108,8 @@ export default {
             'zh-CN': '绑定值变化时触发的事件',
             'en-US': 'Event triggered when the binding value changes'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'radio-events',
-          mobileDemo: 'event',
           mfDemo: ''
         }
       ],
@@ -139,9 +123,8 @@ export default {
             'zh-CN': 'radio 的默认插槽',
             'en-US': 'Radio default slot'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'default-slot',
-          mobileDemo: '',
           mfDemo: ''
         }
       ]
diff --git a/examples/sites/demos/apis/search.js b/examples/sites/demos/apis/search.js
index 8a794fa46d..3ce823793c 100644
--- a/examples/sites/demos/apis/search.js
+++ b/examples/sites/demos/apis/search.js
@@ -1,5 +1,5 @@
 export default {
-  mode: ['pc', 'mobile', 'mobile-first'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'search',
@@ -7,7 +7,7 @@ export default {
       props: [
         {
           name: 'big',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '大尺寸，配置为true时，搜索框高度将变高。',
@@ -16,20 +16,9 @@ export default {
           mode: ['mobile-first'],
           mfDemo: 'big-mode'
         },
-        {
-          name: 'button-text',
-          type: 'String',
-          defaultValue: '搜索',
-          desc: {
-            'zh-CN': '<p>自定义搜索框按钮的文本内容，默认是‘搜索’</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'button-text'
-        },
         {
           name: 'change-bg-color',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '可通过 change-bg-color 属性切换背景色(只针对移动端有效)。',
@@ -53,7 +42,7 @@ export default {
         },
         {
           name: 'default-value',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '设置搜索输入框内的默认搜索值',
@@ -116,14 +105,13 @@ export default {
             'zh-CN': '搜索输入框内的提示占位文本',
             'en-US': 'Search for prompt placeholder text in the input box'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
-          mobileDemo: 'button-text',
           mfDemo: ''
         },
         {
           name: 'search-size',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '通过 size 属性定义输入框尺寸，可选项有 medium、small、mini，默认为 small',
@@ -141,14 +129,13 @@ export default {
             'zh-CN': '搜索类型的选项列表',
             'en-US': 'List of options for search types'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'search-types',
-          mobileDemo: 'default-value',
           mfDemo: ''
         },
         {
           name: 'show-button',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '可通过 show-button 属性对移动端设置按钮搜索。',
@@ -168,17 +155,6 @@ export default {
           mode: ['mobile-first'],
           mfDemo: 'size-medium'
         },
-        {
-          name: 'themeType',
-          type: 'String',
-          defaultValue: 'primary',
-          desc: {
-            'zh-CN': '<p>配置主题色，primary:蓝 gray:灰</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'base'
-        },
         {
           name: 'transparent',
           type: 'boolean',
@@ -214,17 +190,6 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
           mfDemo: ''
-        },
-        {
-          name: 'v-model/value',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置搜索输入框内的默认搜索值</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'default-value'
         }
       ],
       events: [
@@ -238,9 +203,8 @@ export default {
             'en-US':
               'The callback function triggered upon input completion; value is the search type, input is the current input value'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'events',
-          mobileDemo: 'events',
           mfDemo: ''
         },
         {
@@ -251,9 +215,8 @@ export default {
             'zh-CN': '清空值触发的回调函数',
             'en-US': 'Callback function triggered by clearing values'
           },
-          mode: ['pc', 'mobile'],
-          pcDemo: 'events',
-          mobileDemo: 'clear'
+          mode: ['pc'],
+          pcDemo: 'events'
         },
         {
           name: 'input',
@@ -278,9 +241,8 @@ export default {
             'en-US':
               'The callback function triggered when clicking the search button in expansion mode; value is the search type, input is the current input value'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'events',
-          mobileDemo: 'events',
           mfDemo: ''
         },
         {
@@ -292,24 +254,13 @@ export default {
             'zh-CN': '切换类型时触发的回调函数； value 为搜索类型',
             'en-US': 'The callback function triggered when switching types; value is a search type'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'events',
-          mobileDemo: 'clear',
           mfDemo: ''
         }
       ],
       methods: [],
       slots: [
-        {
-          name: 'default',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>自定义搜索框右侧内容</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
-        },
         {
           name: 'poplist',
           type: '',
diff --git a/examples/sites/demos/apis/slider.js b/examples/sites/demos/apis/slider.js
index 1d56414c7b..0ec56cfa64 100644
--- a/examples/sites/demos/apis/slider.js
+++ b/examples/sites/demos/apis/slider.js
@@ -1,5 +1,5 @@
 export default {
-  mode: ['pc', 'mobile', 'mobile-first'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'slider',
@@ -13,9 +13,8 @@ export default {
             'zh-CN': '是否禁用',
             'en-US': 'Disable'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'dynamic-disable',
-          mobileDemo: 'dynamic-disable',
           mfDemo: ''
         },
         {
@@ -37,9 +36,8 @@ export default {
             'zh-CN': '格式化 tooltip 提示',
             'en-US': 'Format tooltip message'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'show-tip',
-          mobileDemo: 'format-tooltip',
           mfDemo: ''
         },
         {
@@ -63,9 +61,8 @@ export default {
             'en-US':
               'Set the maximum value. The value must be an integer and can be a negative number. The value must be greater than the minimum value set'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'max-min',
-          mobileDemo: 'max-min',
           mfDemo: ''
         },
         {
@@ -76,9 +73,8 @@ export default {
             'zh-CN': '设置最小值',
             'en-US': 'Set the minimum value'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'max-min',
-          mobileDemo: 'max-min',
           mfDemo: ''
         },
         {
@@ -90,22 +86,10 @@ export default {
             'en-US':
               'Set the total number of steps. That is, when you press PageDown or PageUp, the moving distance is "⌈(max-min)/num-pages⌉".'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'shortcut-operation',
-          mobileDemo: 'shortcut-operation',
           mfDemo: ''
         },
-        {
-          name: 'range',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否为范围选择</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
-        },
         {
           name: 'show-input',
           type: 'boolean',
@@ -114,14 +98,13 @@ export default {
             'zh-CN': '是否显示输入框',
             'en-US': 'Indicates whether to display the text box.'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'show-input',
-          mobileDemo: 'show-input',
           mfDemo: ''
         },
         {
           name: 'show-label',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '显示 Label，需结合show-steps一起使用',
@@ -132,7 +115,7 @@ export default {
         },
         {
           name: 'show-steps',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '显示刻度，需结合 step 一起使用，最前与最后的刻度默认不显示',
@@ -149,9 +132,8 @@ export default {
             'zh-CN': '是否显示 tooltip',
             'en-US': 'Whether to display tooltip'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'show-tip',
-          mobileDemo: 'show-tip',
           mfDemo: ''
         },
         {
@@ -163,9 +145,8 @@ export default {
             'en-US':
               'Displacement distance of each step when the slider moves. The value must be a positive integer greater than 0'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'about-step',
-          mobileDemo: 'about-step',
           mfDemo: ''
         },
         {
@@ -192,20 +173,9 @@ export default {
           pcDemo: 'basic-usage',
           mfDemo: ''
         },
-        {
-          name: 'value',
-          type: 'Number | Array',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置单滑块的当前值，必需是整数或数组。</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
-        },
         {
           name: 'marks',
-          type: `{ [key:number]: string }`,
+          type: '{ [key:number]: string }',
           defaultValue: '',
           desc: {
             'zh-CN': '<p>设置滑杆的刻度值</p>',
@@ -222,9 +192,8 @@ export default {
             'zh-CN': '是否竖向模式',
             'en-US': 'Whether the vertical mode is used'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'vertical-mode',
-          mobileDemo: 'vertical-mode',
           mfDemo: ''
         }
       ],
@@ -238,9 +207,8 @@ export default {
             'en-US':
               'Triggered when the value changes (When you drag the mouse, it is triggered only after you release the mouse).'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'slider-event',
-          mobileDemo: 'slider-event-change',
           mfDemo: ''
         },
         {
@@ -251,9 +219,8 @@ export default {
             'zh-CN': '设置滑块滑动开始时，触发该事件',
             'en-US': 'This event is triggered when the slider starts to slide.'
           },
-          mode: ['pc', 'mobile'],
-          pcDemo: 'slider-event',
-          mobileDemo: 'slider-event-start'
+          mode: ['pc'],
+          pcDemo: 'slider-event'
         },
         {
           name: 'Start',
@@ -274,9 +241,8 @@ export default {
             'zh-CN': '设置滑块滑动结束时，触发该事件',
             'en-US': 'This event is triggered when the slider sliding ends. '
           },
-          mode: ['pc', 'mobile'],
-          pcDemo: 'slider-event',
-          mobileDemo: 'slider-event-stop'
+          mode: ['pc'],
+          pcDemo: 'slider-event'
         },
         {
           name: 'Stop',
@@ -301,9 +267,8 @@ export default {
             'en-US':
               'Slot for displaying slider values, valid only if v-model is a single value. Slot parameters are: slotArg: {slotScope: number}'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'slider-slot',
-          mobileDemo: '',
           mfDemo: ''
         }
       ]
diff --git a/examples/sites/demos/apis/switch.js b/examples/sites/demos/apis/switch.js
index e7b5f638aa..641fb956cf 100644
--- a/examples/sites/demos/apis/switch.js
+++ b/examples/sites/demos/apis/switch.js
@@ -1,5 +1,5 @@
 export default {
-  mode: ['pc', 'mobile', 'mobile-first'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'switch',
@@ -24,9 +24,8 @@ export default {
             'zh-CN': '是否禁用',
             'en-US': 'Disable'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'dynamic-disable',
-          mobileDemo: 'disabled',
           mfDemo: ''
         },
         {
@@ -51,9 +50,8 @@ export default {
             'zh-CN': 'switch 关闭时的值',
             'en-US': 'Value when switch is disabled'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'custom-true-false-value',
-          mobileDemo: 'base',
           mfDemo: ''
         },
         {
@@ -64,9 +62,8 @@ export default {
             'zh-CN': '设置是否显示为 mini 模式，mini 模式下不会显示 slot 的内容',
             'en-US': 'Sets whether to display in mini mode. In mini mode, the content of the slot is not displayed'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'mini-mode',
-          mobileDemo: 'mini',
           mfDemo: ''
         },
         {
@@ -93,7 +90,7 @@ export default {
         },
         {
           name: 'size',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '定义开关尺寸',
@@ -110,14 +107,13 @@ export default {
             'zh-CN': 'switch 打开时的值',
             'en-US': 'Value when switch is enabled'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'custom-true-false-value',
-          mobileDemo: 'base',
           mfDemo: ''
         },
         {
           name: 'types',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '展示开关不同的状态',
@@ -134,8 +130,7 @@ export default {
             'zh-CN': '<p>绑定值</p>',
             'en-US': 'display different button'
           },
-          mode: ['mobile', 'mobile-first'],
-          mobileDemo: 'base',
+          mode: ['mobile-first'],
           mfDemo: ''
         }
       ],
@@ -148,9 +143,8 @@ export default {
             'zh-CN': 'switch 状态发生变化时的回调函数',
             'en-US': 'Callback function for switch changes'
           },
-          mode: ['pc', 'mobile'],
-          pcDemo: 'event-change',
-          mobileDemo: 'event'
+          mode: ['pc'],
+          pcDemo: 'event-change'
         },
         {
           name: 'enent',
diff --git a/examples/sites/demos/apis/tabbar.js b/examples/sites/demos/apis/tabbar.js
index af013b0a57..a9d382e01b 100644
--- a/examples/sites/demos/apis/tabbar.js
+++ b/examples/sites/demos/apis/tabbar.js
@@ -1,5 +1,5 @@
 export default {
-  mode: ['mobile', 'mobile-first'],
+  mode: ['mobile-first'],
   apis: [
     {
       name: 'Tabbar',
@@ -7,49 +7,35 @@ export default {
       props: [
         {
           name: 'active-color',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '<p>选中标签的颜色</p>',
             'en-US': 'display different button'
           },
-          mode: ['mobile', 'mobile-first'],
-          mobileDemo: 'active-inactive-color',
+          mode: ['mobile-first'],
           mfDemo: 'active-inactive-color'
         },
         {
           name: 'border',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '<p>是否显示外边框，该属性默认为true</p>',
             'en-US': 'display different button'
           },
-          mode: ['mobile', 'mobile-first'],
-          mobileDemo: 'border',
+          mode: ['mobile-first'],
           mfDemo: 'custom-close'
         },
-        {
-          name: 'fixed',
-          type: 'Boolen',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>是否固定在底部，该属性默认为true</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'border'
-        },
         {
           name: 'inactive-color',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '<p>未选中标签的颜色</p>',
             'en-US': 'display different button'
           },
-          mode: ['mobile', 'mobile-first'],
-          mobileDemo: 'active-inactive-color',
+          mode: ['mobile-first'],
           mfDemo: 'active-inactive-color'
         },
         {
@@ -63,20 +49,9 @@ export default {
           mode: ['mobile-first'],
           mfDemo: 'options'
         },
-        {
-          name: 'route',
-          type: 'Boolean',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>是否开启路由模式，该属性默认为false</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'route'
-        },
         {
           name: 'show-number',
-          type: 'Number',
+          type: 'number',
           defaultValue: '5',
           desc: {
             'zh-CN': '设置底部导航需要展示的项数',
@@ -95,17 +70,6 @@ export default {
           },
           mode: ['mobile-first'],
           mfDemo: 'base'
-        },
-        {
-          name: 'z-index',
-          type: 'Number | String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>元素 z-index</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'border'
         }
       ],
       events: [
@@ -117,8 +81,7 @@ export default {
             'zh-CN': '<p>切换标签时触发,value: 当前选中标签的名称或索引值</p>',
             'en-US': 'Click'
           },
-          mode: ['mobile', 'mobile-first'],
-          mobileDemo: 'event-change',
+          mode: ['mobile-first'],
           mfDemo: 'event-change'
         }
       ],
@@ -134,16 +97,6 @@ export default {
           },
           mode: ['mobile-first'],
           mfDemo: 'base'
-        },
-        {
-          name: 'icon',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>自定义图标</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slot-icon'
         }
       ]
     },
@@ -164,7 +117,7 @@ export default {
         },
         {
           name: 'custom-icon',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '设置底部导航个性化图标',
@@ -174,7 +127,7 @@ export default {
         },
         {
           name: 'dot',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '设置底部导航选项点',
@@ -207,7 +160,7 @@ export default {
         },
         {
           name: 'text',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '设置底部导航循环时设定的标题',
diff --git a/examples/sites/demos/apis/table.js b/examples/sites/demos/apis/table.js
deleted file mode 100644
index 1cd0356a25..0000000000
--- a/examples/sites/demos/apis/table.js
+++ /dev/null
@@ -1,69 +0,0 @@
-export default {
-  mode: ['mobile'],
-  apis: [
-    {
-      name: 'Table',
-      type: 'component',
-      props: [
-        {
-          name: 'columns',
-          type: '[]',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>列数据</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'base'
-        },
-        {
-          name: 'data',
-          type: '[]',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>表格数据</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'base'
-        },
-        {
-          name: 'defaultChecked',
-          type: '[]',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>默认选中项</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'base'
-        },
-        {
-          name: 'keys',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>数据标识</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'base'
-        },
-        {
-          name: 'width',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>表格宽度</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'base'
-        }
-      ],
-      events: [],
-      methods: [],
-      slots: []
-    }
-  ]
-}
diff --git a/examples/sites/demos/apis/tabs.js b/examples/sites/demos/apis/tabs.js
index b12370d640..9f556b946e 100644
--- a/examples/sites/demos/apis/tabs.js
+++ b/examples/sites/demos/apis/tabs.js
@@ -1,21 +1,10 @@
 export default {
-  mode: ['pc', 'mobile', 'mobile-first'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'tabs',
       type: 'component',
       props: [
-        {
-          name: 'active-color',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '当前页签的字体颜色',
-            'en-US': 'active tab color'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'active-color'
-        },
         {
           name: 'active-name',
           type: 'string',
@@ -24,9 +13,8 @@ export default {
             'zh-CN': '设置初始选中的页签项',
             'en-US': 'Set initially selected label items'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'tab-style-card',
-          mobileDemo: 'active-name',
           mfDemo: ''
         },
         {
@@ -39,9 +27,8 @@ export default {
             'en-US':
               'The hook before the tag is switched. If false is returned or Promise is returned and rejected, the switch is blocked; ActiveName: The name of the label item that is about to be switched, oldActiveName: The name of the current label item'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'before-leave',
-          mobileDemo: 'before-leave',
           mfDemo: ''
         },
         {
@@ -68,29 +55,6 @@ export default {
           mode: ['pc'],
           pcDemo: 'tabs-events-edit'
         },
-        {
-          name: 'expand-tabs-mode',
-          type: 'string',
-          defaultValue: 'columns',
-          desc: {
-            'zh-CN': '展开内容的排列方式，可选值 column：为单列，columns：为多列',
-            'en-US':
-              "The arrangement of content can be displayed in either a single column format, which is referred to as 'column', or in multiple columns, which is referred to as 'columns'."
-          },
-          mode: ['mobile'],
-          mobileDemo: 'expend'
-        },
-        {
-          name: 'expand-tabs-title',
-          type: 'string',
-          defaultValue: '请选择',
-          desc: {
-            'zh-CN': '展开内容的标题',
-            'en-US': 'Expand Content Title'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'expend'
-        },
         {
           name: 'modelValue / v-model',
           type: 'string',
@@ -104,7 +68,7 @@ export default {
         },
         {
           name: 'optimized',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '是否开启优化渲染，默认值为true，表示开启优化渲染，此时只会渲染当前标签项',
@@ -149,17 +113,6 @@ export default {
           pcDemo: 'tabs-separator',
           mfDemo: ''
         },
-        {
-          name: 'show-expand-tabs',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '页签可展开',
-            'en-US': 'tabs expandable'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'expend'
-        },
         {
           name: 'show-more-tabs',
           type: 'boolean',
@@ -196,17 +149,6 @@ export default {
           mode: ['pc'],
           pcDemo: 'stretch-wh'
         },
-        {
-          name: 'swipeable',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '滑动页签内容切换页签',
-            'en-US': 'slide tab content to switch tab'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'swipe'
-        },
         {
           name: 'tab-style',
           typeAnchorName: 'ITabStyle',
@@ -244,17 +186,6 @@ export default {
           mode: ['mobile-first'],
           mfDemo: ''
         },
-        {
-          name: 'v-model / modelValue',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '选中选项卡的 name',
-            'en-US': 'the name of the selected item'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'basic-usage'
-        },
         {
           name: 'with-add',
           type: 'boolean',
@@ -263,9 +194,8 @@ export default {
             'zh-CN': '是否显示添加按钮，用来添加页签项',
             'en-US': 'Do you want to display the add button to add tab item'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'with-add',
-          mobileDemo: 'add-delete-tab',
           mfDemo: ''
         },
         {
@@ -276,9 +206,8 @@ export default {
             'zh-CN': '是否显示页签项的关闭按钮，用来删除页签项',
             'en-US': 'Do you want to display the close button for label items to delete them'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'tabs-events-close',
-          mobileDemo: 'add-delete-tab',
           mfDemo: ''
         },
         {
@@ -299,7 +228,7 @@ export default {
           type: 'boolean',
           defaultValue: 'false',
           desc: {
-            'zh-CN': `'更多'按钮触发的下拉面板是否展示全部页签项，适用于超大数据量的情况`,
+            'zh-CN': "'更多'按钮触发的下拉面板是否展示全部页签项，适用于超大数据量的情况",
             'en-US':
               'Indicates whether to display all tab items in the drop-down panel triggered by the More button. This parameter applies to the scenario where the data volume is large.'
           },
@@ -365,9 +294,8 @@ export default {
             'zh-CN': '点击"添加"按钮后触发，用于编写增加页签项的逻辑',
             'en-US': 'Triggered after clicking the "Add" button, used to write logic for adding tab items'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'with-add',
-          mobileDemo: 'tabs-events',
           mfDemo: ''
         },
         {
@@ -379,9 +307,8 @@ export default {
             'en-US':
               'Trigger an event when clicking on a tab item, Triggered when tab is selected; TabItem: Click on the Component object information of the tab item in the middle'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'tabs-events-click',
-          mobileDemo: 'tabs-events',
           mfDemo: ''
         },
         {
@@ -393,9 +320,8 @@ export default {
             'en-US':
               'Triggered after clicking the tab item close button, used to write logic for deleting tab items; name: The name value of the tab item to be deleted'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'tabs-events-close',
-          mobileDemo: 'tabs-events',
           mfDemo: ''
         },
         {
@@ -455,8 +381,7 @@ export default {
             'zh-CN': '默认插槽',
             'en-US': 'default slot'
           },
-          mode: ['mobile', 'mobile-first'],
-          mobileDemo: 'basic-usage',
+          mode: ['mobile-first'],
           mfDemo: ''
         },
         {
diff --git a/examples/sites/demos/apis/tag.js b/examples/sites/demos/apis/tag.js
index a066f2d0d4..f88a5df7ba 100644
--- a/examples/sites/demos/apis/tag.js
+++ b/examples/sites/demos/apis/tag.js
@@ -1,5 +1,5 @@
 export default {
-  mode: ['pc', 'mobile', 'mobile-first'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'tag',
@@ -39,14 +39,13 @@ export default {
             'en-US':
               'Control the text color and background color of the label. You can use the preset value in the IColor type or customize the value. If the customized value is a character string, you can only set the background color of the label. If it is an array, the first value sets the background color and the second sets the text color. [Note: The array type is supported in 3.15.0]'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'color-border',
-          mobileDemo: 'different-color',
           mfDemo: 'color3'
         },
         {
           name: 'custom-class',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '标签class',
@@ -91,31 +90,9 @@ export default {
           pcDemo: 'color3',
           mfDemo: ''
         },
-        {
-          name: 'max-width',
-          type: 'string | number',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '最大宽度',
-            'en-US': 'max width'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'max-width'
-        },
-        {
-          name: 'mini',
-          type: 'boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '小尺寸',
-            'en-US': 'mini'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'mini'
-        },
         {
           name: 'operable',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '是否可操作',
@@ -126,7 +103,7 @@ export default {
         },
         {
           name: 'selectable',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '是否可选择',
@@ -148,28 +125,6 @@ export default {
           pcDemo: 'size',
           mfDemo: ''
         },
-        {
-          name: 'text',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '文字',
-            'en-US': 'Text'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'basic-usage'
-        },
-        {
-          name: 'theme',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '彩色标签，该属性的可选值为 pink、purple、cyan',
-            'en-US': 'Color label. The value can be pink, purple, or cyan.'
-          },
-          mode: ['mobile'],
-          mfDemo: 'different-color'
-        },
         {
           name: 'type',
           typeAnchorName: 'IType',
@@ -244,9 +199,8 @@ export default {
             'zh-CN': '标签内容',
             'en-US': 'Label Content'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'slot-default',
-          mobileDemo: 'slot-default',
           mfDemo: ''
         }
       ]
diff --git a/examples/sites/demos/apis/timeline.js b/examples/sites/demos/apis/timeline.js
deleted file mode 100644
index a46541e80f..0000000000
--- a/examples/sites/demos/apis/timeline.js
+++ /dev/null
@@ -1,208 +0,0 @@
-export default {
-  mode: ['mobile'],
-  apis: [
-    {
-      name: 'TimeLine',
-      type: 'component',
-      props: [
-        {
-          name: 'active',
-          type: 'Number',
-          defaultValue: '1',
-          desc: {
-            'zh-CN': '<p>设置步骤条的选中步骤</p>',
-            'en-US': 'Is show right text'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'different-data'
-        },
-        {
-          name: 'data',
-          type: 'Array',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置时间线步骤条数据',
-            'en-US': 'data'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'different-data'
-        },
-        {
-          name: 'horizontal',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否为横向步骤条</p>',
-            'en-US': 'Is show right text'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
-        },
-        {
-          name: 'name-field',
-          type: 'String',
-          defaultValue: 'name',
-          desc: {
-            'zh-CN': '<p>设置节点信息中名称对应的字段名</p>',
-            'en-US': 'Is show left arrow'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'different-data'
-        },
-        {
-          name: 'reverse',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>设置竖向步骤条的方向</p>',
-            'en-US': 'Is show right text'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'mobileTimeLine'
-        },
-        {
-          name: 'show-number',
-          type: 'Boolean',
-          defaultValue: 'true',
-          desc: {
-            'zh-CN': '<p>设置未完成的状态是否显示序号',
-            'en-US': 'data'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'different-data'
-        },
-        {
-          name: 'showStatus',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否展示状态文字</p>',
-            'en-US': 'Is show right text'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
-        },
-        {
-          name: 'space',
-          type: 'Number',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置步骤条的宽度</p>',
-            'en-US': 'Is show right arrow'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'space'
-        },
-        {
-          name: 'start',
-          type: 'start',
-          defaultValue: '1',
-          desc: {
-            'zh-CN': '<p>设置步骤条序号起始值</p>',
-            'en-US': 'Is show left arrow'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
-        },
-        {
-          name: 'time-field',
-          type: 'String',
-          defaultValue: 'time',
-          desc: {
-            'zh-CN': '<p>设置节点时间信息对应的字段名</p>',
-            'en-US': 'Is show right text'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'different-data'
-        },
-        {
-          name: 'vertical',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>竖式步骤条</p>',
-            'en-US': 'Is show right text'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'steps'
-        }
-      ],
-      events: [
-        {
-          name: 'click',
-          type: 'Function(arg1,arg2)',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>节点的点击事件;arguments: arg1:点击节点的下标, arg2:{ name: 节点名称, time: 时间 }</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'mobileTimeLine'
-        }
-      ],
-      methods: [],
-      slots: [
-        {
-          name: 'bottom',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>定义横向步骤条底部</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
-        },
-        {
-          name: 'conternt',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>定义竖向步骤条内容</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
-        },
-        {
-          name: 'header',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>定义竖向步骤条头部内容</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
-        },
-        {
-          name: 'left',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>定义步骤条左侧内容</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slot'
-        },
-        {
-          name: 'right',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>定义步骤条右侧内容</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slot'
-        },
-        {
-          name: 'top',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>定义横向步骤条顶部</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: ''
-        }
-      ]
-    }
-  ]
-}
diff --git a/examples/sites/demos/apis/toast.js b/examples/sites/demos/apis/toast.js
deleted file mode 100644
index 75458faf8b..0000000000
--- a/examples/sites/demos/apis/toast.js
+++ /dev/null
@@ -1,70 +0,0 @@
-export default {
-  mode: ['mobile'],
-  apis: [
-    {
-      name: 'Toast',
-      type: 'component',
-      props: [
-        {
-          name: 'text',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>展示的文本</p>',
-            'en-US': 'display text'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'base'
-        },
-        {
-          name: 'time',
-          type: 'Number',
-          defaultValue: '2000',
-          desc: {
-            'zh-CN': '<p>展示持续时间，单位：ms</p>',
-            'en-US': 'display times'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'base'
-        },
-        {
-          name: 'type',
-          type: 'string',
-          defaultValue: 'text',
-          desc: {
-            'zh-CN': '<p>类型， text：纯文本 correct：成功 error：失败</p>',
-            'en-US': 'type'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'base'
-        },
-        {
-          name: 'zIndex',
-          type: 'Number',
-          defaultValue: '100',
-          desc: {
-            'zh-CN': '<p>弹框层级</p>',
-            'en-US': ''
-          },
-          mode: ['mobile'],
-          mobileDemo: 'base'
-        }
-      ],
-      events: [],
-      methods: [
-        {
-          name: 'timeout',
-          type: 'Function',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>消失前的回调</p>',
-            'en-US': ''
-          },
-          mode: ['mobile'],
-          mobileDemo: 'base'
-        }
-      ],
-      slots: []
-    }
-  ]
-}
diff --git a/examples/sites/demos/apis/user-head.js b/examples/sites/demos/apis/user-head.js
index eb87f61cf8..f21265868e 100644
--- a/examples/sites/demos/apis/user-head.js
+++ b/examples/sites/demos/apis/user-head.js
@@ -1,5 +1,5 @@
 export default {
-  mode: ['pc', 'mobile', 'mobile-first'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'user-head',
@@ -17,17 +17,6 @@ export default {
           pcDemo: 'custom-background-color',
           mfDemo: ''
         },
-        {
-          name: 'backgroundColor',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置背景色</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'custom-background-color'
-        },
         {
           name: 'color',
           type: 'string',
@@ -36,9 +25,8 @@ export default {
             'zh-CN': '文字颜色',
             'en-US': 'Text color'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'color',
-          mobileDemo: 'color',
           mfDemo: ''
         },
         {
@@ -77,39 +65,6 @@ export default {
           pcDemo: 'message-count-limit',
           mfDemo: ''
         },
-        {
-          name: 'messageTotal',
-          type: 'number',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>右上角消息计数</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'message-count-limit'
-        },
-        {
-          name: 'messageType',
-          type: 'string',
-          defaultValue: 'details',
-          desc: {
-            'zh-CN': '<p>右上角消息提醒类型，basic显示小圆点不显示消息数量</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'message-count-type'
-        },
-        {
-          name: 'messageUpperLimit',
-          type: 'number',
-          defaultValue: '0',
-          desc: {
-            'zh-CN': '<p>右上角消息显示上限</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'message-count-limit'
-        },
         {
           name: 'min',
           type: 'boolean',
@@ -118,9 +73,8 @@ export default {
             'zh-CN': '小尺寸模式',
             'en-US': 'Small size mode'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'min-user-head',
-          mobileDemo: 'min-user-head',
           mfDemo: ''
         },
         {
@@ -142,9 +96,8 @@ export default {
             'zh-CN': '圆形模式',
             'en-US': 'Circular mode'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'round-user-head',
-          mobileDemo: 'round-user-head',
           mfDemo: ''
         },
         {
@@ -155,8 +108,7 @@ export default {
             'zh-CN': '<p>设置头像尺寸</p>',
             'en-US': 'display different button'
           },
-          mode: ['mobile', 'mobile-first'],
-          mobileDemo: 'basic-usage',
+          mode: ['mobile-first'],
           mfDemo: ''
         },
         {
@@ -168,9 +120,8 @@ export default {
             'en-US':
               'Avatar type. The options are icon, image, and label. ;The value of this attribute can be icon / image / label'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'image-user-head',
-          mobileDemo: 'basic-usage',
           mfDemo: ''
         },
         {
@@ -186,20 +137,9 @@ export default {
           pcDemo: 'icon-user-head',
           mfDemo: ''
         },
-        {
-          name: 'v-model/modelValue',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设type=icon 时为图标类名，type=label时为字体串，type=image时为资源路径</p>',
-            'en-US': 'display different button'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'basic-usage'
-        },
         {
           name: 'value',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': 'type=icon 时为图标类名，type=label时为字体串，type=image时为资源路径',
@@ -220,9 +160,8 @@ export default {
             'zh-CN': '自定义图像内容',
             'en-US': 'Customized image content'
           },
-          mode: ['pc', 'mobile', 'mobile-first'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'custom-user-head-content',
-          mobileDemo: 'round-user-head',
           mfDemo: ''
         }
       ]
diff --git a/examples/sites/demos/mobile/app/actionsheet/webdoc/actionsheet.js b/examples/sites/demos/mobile/app/actionsheet/webdoc/actionsheet.js
index ac38f76574..3d22c67d88 100644
--- a/examples/sites/demos/mobile/app/actionsheet/webdoc/actionsheet.js
+++ b/examples/sites/demos/mobile/app/actionsheet/webdoc/actionsheet.js
@@ -1,6 +1,98 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'actionsheet',
+      type: 'component',
+      props: [
+        {
+          name: 'ellipsis',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>是否省略显示，该属性默认为false</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'ellipsis'
+        },
+        {
+          name: 'menus',
+          type: 'Array',
+          defaultValue: '50',
+          desc: {
+            'zh-CN': '<p>列表数组</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'ellipsis'
+        },
+        {
+          name: 'visible',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>上划列表显示隐藏,该属性默认为false</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'ellipsis'
+        },
+        {
+          name: 'content-position',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否显示action插槽',
+            'en-US': 'Whether to display action slots '
+          },
+          mobileDemo: 'slot-action'
+        }
+      ],
+      events: [
+        {
+          name: 'click',
+          type: 'Function()',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置组件点击列表项时触发的回调函数</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'clickfn'
+        }
+      ],
+      methods: [
+        {
+          name: 'visibleHandle',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>菜单列表隐藏方法</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'slot-item'
+        }
+      ],
+      slots: [
+        {
+          name: 'action',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>action插槽</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'slot-action'
+        },
+        {
+          name: 'item',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>item插槽</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'slot-item'
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'clickfn',
diff --git a/examples/sites/demos/mobile/app/alert/webdoc/alert.js b/examples/sites/demos/mobile/app/alert/webdoc/alert.js
index 3de5858f5c..2c3f12f87b 100644
--- a/examples/sites/demos/mobile/app/alert/webdoc/alert.js
+++ b/examples/sites/demos/mobile/app/alert/webdoc/alert.js
@@ -1,6 +1,122 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'alert',
+      type: 'component',
+      props: [
+        {
+          name: 'center',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '文字是否居中',
+            'en-US': 'Whether the text is centered'
+          },
+          mobileDemo: 'center'
+        },
+        {
+          name: 'closable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '警告是否可以关闭',
+            'en-US': 'Set whether alarms can be disabled.'
+          },
+          mobileDemo: 'custom-close'
+        },
+        {
+          name: 'close-text',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '关闭按钮自定义文本',
+            'en-US': 'Customized text of the close button'
+          },
+          mobileDemo: 'custom-close'
+        },
+        {
+          name: 'description',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '警告的提示内容',
+            'en-US': 'Set the warning prompt content'
+          },
+          mobileDemo: 'custom-close'
+        },
+        {
+          name: 'icon',
+          type: 'Component',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '传入图标组件自定义警告的图标，默认会根据 type 值自动使用对应图标',
+            'en-US':
+              'The icon for the custom warning of the incoming icon component will be automatically used based on the type value by default'
+          },
+          mobileDemo: 'icon'
+        },
+        {
+          name: 'size',
+          type: "'normal' | 'large'",
+          defaultValue: "'normal'",
+          desc: {
+            'zh-CN': '警告的尺寸大小',
+            'en-US': 'Set the size of the warning'
+          },
+          mobileDemo: 'size'
+        },
+        {
+          name: 'target',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '挂载容器的ref值，通过该属性可以让组件展示在对应容器的顶部',
+            'en-US':
+              'Mounted container reference, this property allows the component to be displayed at the top of the corresponding container.'
+          },
+          mobileDemo: 'target'
+        },
+        {
+          name: 'type',
+          typeAnchorName: 'IType',
+          type: 'IType',
+          defaultValue: "'info'",
+          desc: {
+            'zh-CN': '警告的类型',
+            'en-US': 'Set the alarm type'
+          },
+          mobileDemo: 'size'
+        }
+      ],
+      events: [
+        {
+          name: 'close',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '关闭 alert 时触发的事件',
+            'en-US': 'Event triggered when the alert function is disabled'
+          },
+          mobileDemo: 'custom-close'
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽，当 size 设置为 large 时有效，显示在 <code>description</code>下方 ',
+            'en-US': 'The default slot for the component is valid when size is set to large'
+          },
+          mobileDemo: 'slot-default'
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'base',
@@ -88,5 +204,14 @@ export default {
       },
       codeFiles: ['slot-default.vue']
     }
+  ],
+  types: [
+    {
+      name: 'IType',
+      type: 'type',
+      code: `
+type IType = 'success' | 'warning' | 'info' | 'error' | 'simple'
+`
+    }
   ]
 }
diff --git a/examples/sites/demos/mobile/app/avatar/webdoc/avatar.js b/examples/sites/demos/mobile/app/avatar/webdoc/avatar.js
index d337018f89..96882760f5 100644
--- a/examples/sites/demos/mobile/app/avatar/webdoc/avatar.js
+++ b/examples/sites/demos/mobile/app/avatar/webdoc/avatar.js
@@ -1,6 +1,107 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'avatar',
+      type: 'component',
+      props: [
+        {
+          name: 'alt',
+          type: 'Function',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置图片的备用文字描述</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'avatar-src-set'
+        },
+        {
+          name: 'error',
+          type: 'Function()',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置img 标签的 onerror 函数</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'avatar-src-set'
+        },
+        {
+          name: 'fit',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置图片的 object-fit</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'avatar-src-set'
+        },
+        {
+          name: 'icon',
+          type: 'Object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置显示内容为icon</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'avatar-src-set'
+        },
+        {
+          name: 'shape',
+          type: 'string',
+          defaultValue: 'circle',
+          desc: {
+            'zh-CN': '<p>该属性的可选值为 circle | square</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'avatar-src-set'
+        },
+        {
+          name: 'size',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>该属性的可选值为 large|medium|small</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'avatar-size'
+        },
+        {
+          name: 'src',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置图片链接地址</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'avatar-src-set'
+        },
+        {
+          name: 'src-set',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置源图容器</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'avatar-src-set'
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>组件默认插槽</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'avatar-src-set'
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'avatar-size',
diff --git a/examples/sites/demos/mobile/app/badge/webdoc/badge.js b/examples/sites/demos/mobile/app/badge/webdoc/badge.js
index b6cfc8fd09..c86809d50c 100644
--- a/examples/sites/demos/mobile/app/badge/webdoc/badge.js
+++ b/examples/sites/demos/mobile/app/badge/webdoc/badge.js
@@ -1,6 +1,111 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'badge',
+      type: 'component',
+      props: [
+        {
+          name: 'hidden',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否隐藏标记',
+            'en-US': 'Whether to hide badge'
+          },
+          mobileDemo: 'hidden'
+        },
+        {
+          name: 'href',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '指定跳转的目标页面地址',
+            'en-US': 'Specify the URL of the target page.'
+          },
+          mobileDemo: 'href-target'
+        },
+        {
+          name: 'is-dot',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否以小圆点的形式来显示标记',
+            'en-US': 'Set whether to display the badge in the form of small dots'
+          },
+          mobileDemo: 'is-dot'
+        },
+        {
+          name: 'is-mini',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>设置小尺寸，该属性默认为false</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'is-mini'
+        },
+        {
+          name: 'max',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN':
+              "指定徽章显示的最大值，如果实际获取的徽章值超过该最大值，则以最大值后接一个 '+' 的形式显示徽章数，要求 value 是 number 类型",
+            'en-US':
+              'Specifies the maximum number of badges to be displayed. If the actual badge value exceeds the maximum value, the number of badges is displayed in the format of "+". The value must be of the number type.'
+          },
+          mobileDemo: 'is-mini'
+        },
+        {
+          name: 'target',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '点击标记时链接到目标页面的跳转方式，仅在 href 属性存在时使用',
+            'en-US':
+              'Set the jump method for linking to the target page when clicking on the tag, only used when the href attribute exists'
+          },
+          mobileDemo: 'href-target'
+        },
+        {
+          name: 'value',
+          type: 'number | string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '相关数据条目数',
+            'en-US': 'Set the number of related data entries'
+          },
+          mobileDemo: 'content'
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: [
+        {
+          name: 'content',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '消息提示内容',
+            'en-US': 'Message Content'
+          },
+          mobileDemo: 'content'
+        },
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '默认插槽，有data属性时，默认插槽不生效',
+            'en-US': 'Default slot. When there is a data attribute, the default slot is not valid'
+          },
+          mobileDemo: 'content'
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'content',
@@ -74,5 +179,6 @@ export default {
       },
       codeFiles: ['type.vue']
     }
-  ]
+  ],
+  types: []
 }
diff --git a/examples/sites/demos/mobile/app/button/webdoc/button.js b/examples/sites/demos/mobile/app/button/webdoc/button.js
index 55feb0c1bd..b49ff3a981 100644
--- a/examples/sites/demos/mobile/app/button/webdoc/button.js
+++ b/examples/sites/demos/mobile/app/button/webdoc/button.js
@@ -1,6 +1,110 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'button',
+      type: 'component',
+      props: [
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否被禁用按钮',
+            'en-US': 'Sets whether the button is disabled'
+          },
+          mobileDemo: 'disabled'
+        },
+        {
+          name: 'icon',
+          type: 'Component',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '按钮左侧展示的图标，接收为<code>Icon</code>组件',
+            'en-US': 'The icon displayed by the button is received as an <code>Icon</code> component'
+          },
+          mobileDemo: 'icon'
+        },
+        {
+          name: 'loading',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否加载中状态',
+            'en-US': 'Loading status'
+          },
+          mobileDemo: 'loading'
+        },
+        {
+          name: 'reset-time',
+          type: 'number',
+          defaultValue: '1000',
+          desc: {
+            'zh-CN': '设置按钮禁用时间，防止重复提交，单位毫秒',
+            'en-US': 'Set the button disable time, in milliseconds, to prevent repeated submission'
+          },
+          mobileDemo: 'reset-time'
+        },
+        {
+          name: 'size',
+          type: "'large' | 'medium' | 'small' | 'mini'",
+          defaultValue: '',
+          desc: {
+            'zh-CN': '定义按钮尺寸',
+            'en-US': 'Define the button size'
+          },
+          mobileDemo: 'size'
+        },
+        {
+          name: 'text',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '按钮显示的文本',
+            'en-US': 'Set the text displayed by the button'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'type',
+          typeAnchorName: 'IButtonType',
+          type: 'IButtonType',
+          defaultValue: "'default'",
+          desc: {
+            'zh-CN': '展示按钮不同的状态，设置为<code>text</code>则展示为文本按钮',
+            'en-US': 'Display different states of buttons, set to <code>text</code> to display as text buttons'
+          },
+          mobileDemo: 'base'
+        }
+      ],
+      events: [
+        {
+          name: 'click',
+          type: '(event: PointEvent) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '当按钮被点击时触发的回调函数',
+            'en-US': 'Sets the callback function triggered when a button is clicked'
+          },
+          mobileDemo: 'event'
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '默认插槽，自定义按钮展示内容',
+            'en-US': 'Default slot'
+          },
+          mobileDemo: ''
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'base',
@@ -86,5 +190,12 @@ export default {
       },
       codeFiles: ['event.vue']
     }
+  ],
+  types: [
+    {
+      name: 'IButtonType',
+      type: 'interface',
+      code: `type IButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'`
+    }
   ]
 }
diff --git a/examples/sites/demos/mobile/app/checkbox/webdoc/checkbox.js b/examples/sites/demos/mobile/app/checkbox/webdoc/checkbox.js
index 8546a5422f..4808ec2915 100644
--- a/examples/sites/demos/mobile/app/checkbox/webdoc/checkbox.js
+++ b/examples/sites/demos/mobile/app/checkbox/webdoc/checkbox.js
@@ -1,6 +1,146 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'checkbox',
+      type: 'component',
+      props: [
+        {
+          name: 'checked',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否默认勾选',
+            'en-US': 'Currently selected'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用',
+            'en-US': 'Disable'
+          },
+          mobileDemo: 'disabled'
+        },
+        {
+          name: 'false-label',
+          type: 'string | number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '没有选中时的值',
+            'en-US': 'Value when no option is selected'
+          },
+          mobileDemo: 'custom-value'
+        },
+        {
+          name: 'icon-position',
+          type: 'string',
+          defaultValue: 'center',
+          desc: {
+            'zh-CN': "<p>图标与文本的对齐方式，可选值：'center' | 'top'</p>",
+            'en-US': "<p>Alignment of icon and text, optional value: 'center' | 'top'</p>"
+          },
+          mobileDemo: 'icon-position'
+        },
+        {
+          name: 'indeterminate',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '设置 indeterminate 状态，只负责样式控制',
+            'en-US': 'Sets the indeterminate state and controls only the style.'
+          },
+          mobileDemo: 'indeterminate'
+        },
+        {
+          name: 'label',
+          type: 'string | number | boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '选中状态的值（只有在 checkbox-group 中或者绑定对象类型为 array 时有效）',
+            'en-US':
+              'Selected value (This parameter is valid only when checkbox-group or the bound object type is array)'
+          },
+          mobileDemo: 'basic-usage'
+        },
+        {
+          name: 'name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '原生 name 属性',
+            'en-US': 'Native name attribute'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'true-label',
+          type: 'string | number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '选中时的值',
+            'en-US': 'Value when selected'
+          },
+          mobileDemo: 'custom-value'
+        },
+        {
+          name: 'v-model / modelValue',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>绑定值</p>',
+            'en-US': '<p>value</p>'
+          },
+          mobileDemo: 'basic-usage'
+        }
+      ],
+      events: [
+        {
+          name: 'change',
+          type: '(value: string | number | boolean) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '当绑定值变化时触发的事件',
+            'en-US': 'This event is triggered when the binding value changes'
+          },
+          mobileDemo: 'event-change'
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'checkbox的内容',
+            'en-US': 'Checkbox content'
+          },
+          mobileDemo: ''
+        }
+      ]
+    },
+    {
+      name: 'checkbox-group',
+      type: 'component',
+      props: [],
+      events: [],
+      methods: [],
+      slots: []
+    },
+    {
+      name: 'checkbox-button',
+      type: 'component',
+      props: [],
+      events: [],
+      methods: [],
+      slots: []
+    }
+  ],
   demos: [
     {
       demoId: 'basic-usage',
diff --git a/examples/sites/demos/mobile/app/checkboxgroup/webdoc/checkboxgroup.js b/examples/sites/demos/mobile/app/checkboxgroup/webdoc/checkboxgroup.js
index 8fdbd79b84..bdb410fb81 100644
--- a/examples/sites/demos/mobile/app/checkboxgroup/webdoc/checkboxgroup.js
+++ b/examples/sites/demos/mobile/app/checkboxgroup/webdoc/checkboxgroup.js
@@ -1,6 +1,77 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'CheckboxGroup',
+      type: 'component',
+      props: [
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>是否禁用，该属性默认为false</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'disabled'
+        },
+        {
+          name: 'max',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>可被勾选的 checkbox 的最大数量</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'min-max'
+        },
+        {
+          name: 'min',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>可被勾选的 checkbox 的最小数量</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'min-max'
+        },
+        {
+          name: 'value / v-model',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>绑定值</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'dedisabled'
+        },
+        {
+          name: 'vertical',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>是否竖向模式</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'vertical'
+        }
+      ],
+      events: [
+        {
+          name: 'change',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>当绑定值变化时触发的事件,该事件可获取更新后的值</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'event-change'
+        }
+      ],
+      methods: [],
+      slots: []
+    }
+  ],
   demos: [
     {
       demoId: 'disabled',
diff --git a/examples/sites/demos/mobile/app/container/webdoc/container.js b/examples/sites/demos/mobile/app/container/webdoc/container.js
index 3617dd09a1..79968b316e 100644
--- a/examples/sites/demos/mobile/app/container/webdoc/container.js
+++ b/examples/sites/demos/mobile/app/container/webdoc/container.js
@@ -1,6 +1,76 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'container',
+      type: 'component',
+      props: [
+        {
+          name: 'left-width',
+          type: 'number | string',
+          defaultValue: '60',
+          desc: {
+            'zh-CN': '左侧宽度',
+            'en-US': 'Left width'
+          },
+          mobileDemo: 'custom-width'
+        },
+        {
+          name: 'pattern',
+          typeAnchorName: 'IContainerPattern',
+          type: 'IContainerPattern',
+          defaultValue: '"default"',
+          desc: {
+            'zh-CN': '版型类型',
+            'en-US': 'Measurement type'
+          },
+          mobileDemo: 'basic-usaage'
+        },
+        {
+          name: 'right-width',
+          type: 'number | string',
+          defaultValue: '44',
+          desc: {
+            'zh-CN': '右侧宽度',
+            'en-US': 'right width'
+          },
+          mobileDemo: 'custom-width'
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: [
+        {
+          name: 'center',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '中部内容插槽',
+            'en-US': 'Renter Slot'
+          },
+          mobileDemo: 'basic-usage'
+        },
+        {
+          name: 'left',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '左侧内容插槽',
+            'en-US': 'Title Slot'
+          },
+          mobileDemo: 'basic-usage'
+        },
+        {
+          name: 'right',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '右侧内容插槽',
+            'en-US': 'Right Slot'
+          },
+          mobileDemo: 'basic-usage'
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'basic-usage',
@@ -26,5 +96,12 @@ export default {
       },
       codeFiles: ['custom-width.vue']
     }
+  ],
+  types: [
+    {
+      name: 'IContainerPattern',
+      type: 'interface',
+      code: `type IContainerPattern = 'default' | 'simple' | 'legend' | 'classic' | 'fashion'`
+    }
   ]
 }
diff --git a/examples/sites/demos/mobile/app/dialog-box/webdoc/dialog-box.js b/examples/sites/demos/mobile/app/dialog-box/webdoc/dialog-box.js
index c96d464930..9953cc31c8 100644
--- a/examples/sites/demos/mobile/app/dialog-box/webdoc/dialog-box.js
+++ b/examples/sites/demos/mobile/app/dialog-box/webdoc/dialog-box.js
@@ -1,6 +1,16 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'dialog-box',
+      type: 'component',
+      props: [],
+      events: [],
+      methods: [],
+      slots: []
+    }
+  ],
   demos: [
     {
       demoId: 'append-to-body',
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/webdoc/dropdownmenu.js b/examples/sites/demos/mobile/app/dropdownmenu/webdoc/dropdownmenu.js
index eb9759e386..b510beb30c 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/webdoc/dropdownmenu.js
+++ b/examples/sites/demos/mobile/app/dropdownmenu/webdoc/dropdownmenu.js
@@ -1,6 +1,222 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'DropdownMenu',
+      type: 'component',
+      props: [
+        {
+          name: 'active-color',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>标题和选项的选中态颜色</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'activeColor'
+        },
+        {
+          name: 'close-on-click-outside',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '<p>设置点击外部元素后关闭菜单,默认问true</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'closeOnClickOutside'
+        },
+        {
+          name: 'close-on-click-overlay',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '<p>设置点击遮罩层后关闭菜单，默认为true设置点击遮罩层后关闭菜单，默认为true</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'closeOnClickOverlay'
+        },
+        {
+          name: 'direction',
+          type: 'string',
+          defaultValue: 'down',
+          desc: {
+            'zh-CN': '<p>设置弹出框弹出框展开方向，默认为down</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'direction'
+        },
+        {
+          name: 'duration',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置弹出框的动画时长</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'duration'
+        },
+        {
+          name: 'overlay',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '<p>设置是否显示遮罩层，默认为true</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'overlay'
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>定义菜单内容</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'slot'
+        }
+      ]
+    },
+    {
+      name: 'DropdownItem',
+      type: 'component',
+      props: [
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>设置是否禁用，默认为false</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'disabled'
+        },
+        {
+          name: 'icon',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置菜单选项项左侧icon</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'icon'
+        },
+        {
+          name: 'options',
+          type: 'Array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置选项数据</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'screen-funnel'
+        },
+        {
+          name: 'title',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>菜单项标题</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'screen-funnel'
+        },
+        {
+          name: 'title-class',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>标题类名</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'title-class'
+        },
+        {
+          name: 'type',
+          type: 'string',
+          defaultValue: 'selection',
+          desc: {
+            'zh-CN': '<p>设置菜单项类型，可选值为 filter | sort | selection,默认值为 selection</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'title-class'
+        },
+        {
+          name: 'value',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>当前选中项对应的 value，可以通过v-model双向绑定</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'activeColor'
+        }
+      ],
+      events: [
+        {
+          name: 'change',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>点击选项时触发，type为 selection 时启用</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'event'
+        },
+        {
+          name: 'close',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>关闭菜单时触发</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'event'
+        },
+        {
+          name: 'open',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>打开菜单时触发</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'event'
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>定义菜单内容</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'slot'
+        },
+        {
+          name: 'icon',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>当type为selection时选项左侧内容</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'slot'
+        },
+        {
+          name: 'title',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>当type为selection时选项内容</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'slot'
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'activeColor',
diff --git a/examples/sites/demos/mobile/app/exception/webdoc/exception.js b/examples/sites/demos/mobile/app/exception/webdoc/exception.js
index 796152ae2a..ca39bae95e 100644
--- a/examples/sites/demos/mobile/app/exception/webdoc/exception.js
+++ b/examples/sites/demos/mobile/app/exception/webdoc/exception.js
@@ -1,6 +1,109 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'Exception',
+      type: 'component',
+      props: [
+        {
+          name: 'buttonText',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>按钮文字/p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'buttonText'
+        },
+        {
+          name: 'exceptionClass',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>自定义缺省页类名</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'exceptionClass'
+        },
+        {
+          name: 'imageUrl',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>自定义图片</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'buttonText'
+        },
+        {
+          name: 'message',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>主图片文字，在图片下方</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'message'
+        },
+        {
+          name: 'subMessage',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>副文本内容,在描述文字的下方</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'subMessage'
+        },
+        {
+          name: 'type',
+          type: 'string',
+          defaultValue: 'nodata',
+          desc: {
+            'zh-CN':
+              '<p>设置缺省页类型，默认为nodata,可选值有 weaknet || noperm || busy || build || weaknet || pcview</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'type'
+        }
+      ],
+      events: [
+        {
+          name: 'click',
+          type: 'Function()',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>点击按钮时触发，type 为 nodata 时启用</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'message'
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'content',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置内容</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'mobileexception'
+        },
+        {
+          name: 'footer',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置底部内容</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'mobileexception'
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'mobileexception',
diff --git a/examples/sites/demos/mobile/app/file-upload/webdoc/file-upload.js b/examples/sites/demos/mobile/app/file-upload/webdoc/file-upload.js
index 525a15aec8..d12e56efd3 100644
--- a/examples/sites/demos/mobile/app/file-upload/webdoc/file-upload.js
+++ b/examples/sites/demos/mobile/app/file-upload/webdoc/file-upload.js
@@ -1,6 +1,424 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'file-upload',
+      type: 'component',
+      props: [
+        {
+          name: 'accept',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '限制文件类型（thumbnail-mode 模式下此参数无效）',
+            'en-US': 'Restrict the types of files. This parameter is invalid in thumbnail-mode mode'
+          },
+          mobileDemo: 'accept-file'
+        },
+        {
+          name: 'action',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '上传的地址，必填参数',
+            'en-US': 'The address for uploading files, required parameter'
+          },
+          mobileDemo: 'accept-file'
+        },
+        {
+          name: 'auto-upload',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否在选取文件后立即进行上传',
+            'en-US': 'Whether to upload a file immediately after it is selected'
+          },
+          mobileDemo: 'manual-upload'
+        },
+        {
+          name: 'before-remove',
+          typeAnchorName: 'IFile',
+          type: '(file: IFile, fileList: IFile[]) => boolean | Promise',
+          defaultValue: '',
+          desc: {
+            'zh-CN':
+              '删除文件前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除',
+            'en-US':
+              'Hook before deleting files. The parameters are the uploaded files and file list. If false is returned or Promise is returned and rejected, the deletion stops'
+          },
+          mobileDemo: 'prevent-delete-file'
+        },
+        {
+          name: 'before-upload',
+          typeAnchorName: 'IFile',
+          type: '(file: IFile) => boolean | Promise',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传',
+            'en-US':
+              'Hook before uploading a file. The parameter is the file to be uploaded. If false is returned or Promise is returned and rejected, the upload stops'
+          },
+          mobileDemo: 'upload-request'
+        },
+        {
+          name: 'buttons',
+          type: 'boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置组件基本按钮禁用或启用。</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'data',
+          typeAnchorName: 'IData',
+          type: 'IData',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '上传时附带的额外参数，参数自定义',
+            'en-US': 'Extra parameters attached during upload, parameter customization'
+          },
+          mobileDemo: 'data'
+        },
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用',
+            'en-US': 'Is it disabled'
+          },
+          mobileDemo: 'dynamic-disable'
+        },
+        {
+          name: 'display',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '<p>显示删除文件功能，该属性默认为true</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'file-icon-list',
+          type: 'Array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>配置文件上传显示的图标路径，未配置会默认显示组件内部配置图标</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'file-icon-list'
+        },
+        {
+          name: 'file-list',
+          typeAnchorName: 'IFileListItem',
+          type: 'IFileListItem[]',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '上传的文件列表',
+            'en-US': 'List of uploaded files'
+          },
+          mobileDemo: 'upload-file-list'
+        },
+        {
+          name: 'file-title',
+          type: 'string',
+          defaultValue: '附件',
+          desc: {
+            'zh-CN': '<p>头部标题，该属性默认为‘附件’</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'header-show'
+        },
+        {
+          name: 'header-show',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '<p>是否显示头部，该属性默认为true</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'header-show'
+        },
+        {
+          name: 'headers',
+          typeAnchorName: 'IHeaders',
+          type: 'IHeaders',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置上传的请求头部;通过设置 headers 为头部请求信息',
+            'en-US': 'Set the upload request header. You can set headers to the header request information'
+          },
+          mobileDemo: 'upload-request'
+        },
+        {
+          name: 'http-request',
+          type: '(file: ICustomParam) => Promise<any>',
+          typeAnchorName: 'ICustomParam',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '覆盖默认的上传行为，可以自定义上传的实现; 由于 TinyVue 官网为 Mock 上传不能执行上传',
+            'en-US':
+              'Overwrite the default upload behavior. You can customize the upload implementation. The upload cannot be performed because the TinyVue official website uses Mock upload'
+          },
+          mobileDemo: 'upload-http-request'
+        },
+        {
+          name: 'limit',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '最大允许上传个数',
+            'en-US': 'Maximum number of files that can be uploaded'
+          },
+          mobileDemo: 'max-file-count'
+        },
+        {
+          name: 'list-type',
+          typeAnchorName: 'IListType',
+          type: 'IListType',
+          defaultValue: "'text'",
+          desc: {
+            'zh-CN': '文件列表的类型',
+            'en-US': 'File list type'
+          },
+          mobileDemo: 'picture-card'
+        },
+        {
+          name: 'mini-mode',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>设置 mini 模式。</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'mini-mode'
+        },
+        {
+          name: 'multiple',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否支持多选文件',
+            'en-US': 'Specifies whether multiple files can be selected'
+          },
+          mobileDemo: 'multiple-file'
+        },
+        {
+          name: 'name',
+          type: 'string',
+          defaultValue: "'file'",
+          desc: {
+            'zh-CN': '上传的文件字段名',
+            'en-US': 'Field name of the uploaded file'
+          },
+          mobileDemo: 'data'
+        },
+        {
+          name: 'show-file-list',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示已上传文件列表',
+            'en-US': 'Whether to display the list of uploaded files'
+          },
+          mobileDemo: 'upload-file-list'
+        },
+        {
+          name: 'size',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>为单个按钮且按钮为TinyVue的Button组件时生效，值可设置为：medium，small，mini</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'size'
+        },
+        {
+          name: 'success-statistics',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '<p>文件上传成功数量展示，该属性默认为true</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'prevent-delete-file'
+        },
+        {
+          name: 'type',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>文本，该属性默认为select</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'upload-icon',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '<p>是否显示头部文件上传按钮，该属性默认为true</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'data'
+        },
+        {
+          name: 'with-credentials',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '支持发送 cookie 凭证信息',
+            'en-US': 'Cookie credential information can be sent'
+          },
+          mobileDemo: 'with-credentials'
+        }
+      ],
+      events: [
+        {
+          name: 'change',
+          typeAnchorName: 'IFile',
+          type: '(file: IFile, fileList: IFile[]) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '文件状态改变时触发的事件，添加文件、上传成功和上传失败时都会被触发',
+            'en-US':
+              'The event triggered when the file status changes, including adding a file, successfully uploading, and failing to upload, will be triggered'
+          },
+          mobileDemo: 'upload-events'
+        },
+        {
+          name: 'error',
+          typeAnchorName: 'IFile',
+          type: '(message: ProgressEvent, file: IFile, fileList: IFile[]) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN':
+              '文件上传失败时触发的事件； message 为错误信息事件对象，file 为当前上传失败文件信息，fileList 为上传成功 file 数组',
+            'en-US':
+              'Event triggered when file upload fails; Message is the error message event object, file is the current upload failure file information, and fileList is the upload success file array'
+          },
+          mobileDemo: 'upload-events'
+        },
+        {
+          name: 'exceed',
+          typeAnchorName: 'IFile',
+          type: '(files: File | File[], fileList: IFile[]) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '文件超出个数限制时触发的事件； files 为上传的文件',
+            'en-US': 'Event triggered when the number of files exceeds the limit; Files are uploaded files'
+          },
+          mobileDemo: 'upload-events'
+        },
+        {
+          name: 'preview',
+          typeAnchorName: 'IFile',
+          type: '(file: IFile) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '点击文件列表中已上传的文件时触发的事件',
+            'en-US': 'Event triggered when clicking on an uploaded file in the file list'
+          },
+          mobileDemo: 'upload-events'
+        },
+        {
+          name: 'progress',
+          typeAnchorName: 'IFile',
+          type: '(message: ProgressEvent, file: IFile) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '文件上传时触发的事件； message 为进度条事件对象',
+            'en-US': 'Event triggered during file upload; Message is the progress bar event object'
+          },
+          mobileDemo: 'upload-events'
+        },
+        {
+          name: 'remove',
+          typeAnchorName: 'IFile',
+          type: '(file: IFile) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '从文件列表移除文件时触发的事件； file 为当前移除的文件信息',
+            'en-US':
+              'Event triggered when removing a file from the file list; File is the information of the currently removed file'
+          },
+          mobileDemo: 'upload-events'
+        },
+        {
+          name: 'success',
+          typeAnchorName: 'IFile',
+          type: '(res: ProgressEvent, file: IFile, fileList: IFile[]) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN':
+              '文件上传成功时触发的事件； res 为上传成功后的响应信息事件对象，file 为当前上传的文件，fileList 为所有上传文件数组',
+            'en-US':
+              'Event triggered when the file is successfully uploaded; Res is the response information event object after successful upload, file is the current uploaded file, and fileList is an array of all uploaded files'
+          },
+          mobileDemo: 'upload-events'
+        }
+      ],
+      methods: [
+        {
+          name: 'abort',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '取消上传请求',
+            'en-US': 'Cancel the upload request'
+          },
+          mobileDemo: 'abort-quest'
+        },
+        {
+          name: 'clearFiles',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '清空已上传的文件列表（该方法不支持在 before-upload 中调用）',
+            'en-US': 'Clear the list of uploaded files. (This method cannot be invoked in before-upload)'
+          },
+          mobileDemo: 'clear-files'
+        },
+        {
+          name: 'submit',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '手动上传文件列表',
+            'en-US': 'List of manually uploaded files'
+          },
+          mobileDemo: 'manual-upload'
+        }
+      ],
+      slots: [
+        {
+          name: 'tip',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '提示说明文字',
+            'en-US': 'Prompt Description'
+          },
+          mobileDemo: 'custom-upload-tip'
+        },
+        {
+          name: 'trigger',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '触发文件选择框的内容',
+            'en-US': 'Content of the triggering file selection box'
+          },
+          mobileDemo: 'custom-upload-tip'
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'multiple-file',
@@ -279,5 +697,74 @@ export default {
       },
       codeFiles: ['upload-events.vue']
     }
+  ],
+  types: [
+    {
+      name: 'IData',
+      type: 'interface',
+      code: `
+interface IData {
+  [propsName?: any]: any // 上传参数可自定义
+}
+      `
+    },
+    {
+      name: 'IFile',
+      type: 'interface',
+      code: `
+interface IFile {
+  name: string // 上传文件名
+  percentage: string // 上传进度百分比
+  raw: File // 原始文件信息
+  size: number // 文件大小
+  status: string // 上传状态
+  uid: string // uid 
+}
+      `
+    },
+    {
+      name: 'ICustomParam',
+      type: 'interface',
+      code: `
+interface ICustomParam {
+  action: string
+  data: IData // 上传时附带的额外参数
+  file: IFile
+  filename: string
+  headers: object // 头部请求信息
+  onError: (error: any) => void // 上传失败回调函数，自定义入参
+  onProgress: (event: any) => void // 上传中回调函数
+  onSuccess: (res: any) => void // 上传成功回调函数
+  withCredentials: boolean // 是否支持发送 cookie 凭证信息
+}`
+    },
+    {
+      name: 'IFileListItem',
+      type: 'interface',
+      code: `
+interface IFileListItem {
+  name: string // 文件名
+  url: string // 文件url 例如：'https://xxx.cdn.com/xxx.jpg'
+}
+      `
+    },
+    {
+      name: 'IHeaders',
+      type: 'interface',
+      code: `
+interface IHeaders {
+  'Accept-Language'?: string // 比如等于：'en,zh'
+  Authorization?: string // 比如等于：'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ=='
+  [props: string]: any // headers的属性和属性值自定义
+}
+      `
+    },
+    {
+      name: 'IListType',
+      type: 'type',
+      code: `
+type IListType = 'text' | 'picture' | 'picture-card' | 'thumb' | 'saas' // saas为3.14.0版本新增
+      `
+    }
   ]
 }
diff --git a/examples/sites/demos/mobile/app/form/webdoc/form.js b/examples/sites/demos/mobile/app/form/webdoc/form.js
index 2a530d58b8..52a7daf8ab 100644
--- a/examples/sites/demos/mobile/app/form/webdoc/form.js
+++ b/examples/sites/demos/mobile/app/form/webdoc/form.js
@@ -1,6 +1,188 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'form',
+      type: 'component',
+      props: [
+        {
+          name: 'inline',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '行内布局模式',
+            'en-US': 'In-line layout mode'
+          },
+          mobileDemo: 'hide-required-asterisk'
+        },
+        {
+          name: 'inline-message',
+          type: 'boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '当 validate-type 设置为 text 时，是否以行内形式展示校验信息(推荐使用 message-type 设置)',
+            'en-US':
+              ' Whether to display the verification information inline form when validate-type is set to text,(It is recommended to use message-type setting)'
+          },
+          mobileDemo: 'validate'
+        },
+        {
+          name: 'label-position',
+          type: "'right' | 'left' | 'top'",
+          defaultValue: "'right'",
+          desc: {
+            'zh-CN': '表单中标签的布局位置',
+            'en-US': 'Layout position of the label in the form'
+          },
+          mobileDemo: 'label-width'
+        },
+        {
+          name: 'label-suffix',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '表单中标签后缀',
+            'en-US': 'Label suffix in the form'
+          },
+          mobileDemo: 'form-label-suffix'
+        },
+        {
+          name: 'label-width',
+          type: 'string',
+          defaultValue: "'84px'",
+          desc: {
+            'zh-CN': '表单中标签占位宽度',
+            'en-US': 'Label placeholder width in the form'
+          },
+          mobileDemo: 'label-width'
+        },
+        {
+          name: 'model',
+          type: '{ [prop: string]: any }',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '表单数据对象',
+            'en-US': 'Form data object'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'rules',
+          typeAnchorName: 'IFormRules',
+          type: '{ [prop: string]: IFormRules | IFormRules[]  }',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '表单验证规则',
+            'en-US': 'Form validation rule'
+          },
+          mobileDemo: 'validate'
+        },
+        {
+          name: 'show-message',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示校验错误信息',
+            'en-US': 'Display verification error information.'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'validate-on-rule-change',
+          type: 'boolean | "deep"',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否在 rules 属性改变后立即触发一次验证（"deep"选项新增于3.21.0）',
+            'en-US': 'Whether to trigger a verification immediately after the rules attribute is changed'
+          },
+          mobileDemo: ''
+        }
+      ],
+      events: [
+        {
+          name: 'validate',
+          type: '(prop: string, isValid: boolean, message: string) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '任一表单项被校验后触发',
+            'en-US': 'Triggered after any form item is verified'
+          },
+          mobileDemo: ''
+        }
+      ],
+      methods: [
+        {
+          name: 'clearValidate',
+          type: '(prop: string | string[]) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN':
+              '移除表单项的校验结果，可传入待移除的表单项的 prop ，或者 prop 组成的数组，如不传则移除整个表单的校验结果',
+            'en-US':
+              'The verification result of removing a form item is transferred to the prop attribute of the form item to be removed or an array consisting of prop. If this parameter is not transferred, the verification result of the entire form is removed.'
+          },
+          mobileDemo: 'validate'
+        },
+        {
+          name: 'resetFields',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对整个表单进行重置，将所有字段值重置为初始值并移除校验结果',
+            'en-US': 'Reset all field values to the initial values and remove the verification result.'
+          },
+          mobileDemo: 'validate'
+        },
+        {
+          name: 'validate',
+          typeAnchorName: 'IFormValidateMethod',
+          type: 'IFormValidateMethod',
+          defaultValue: '',
+          desc: {
+            'zh-CN':
+              '对整个表单进行校验的方法，参数为一个回调函数（该回调函数会在校验结束后被调用，并传入两个参数：1、是否校验成功 2、未通过校验的字段）返回一个 promise',
+            'en-US':
+              'Method for verifying the entire form. The parameter is a callback function. The callback function will be invoked after the verification is complete and two parameters are transferred: whether the verification is successful and whether the verification fails. If the callback function is not transferred, a promise is returned.'
+          },
+          mobileDemo: 'validate'
+        },
+        {
+          name: 'validateField',
+          typeAnchorName: 'IFormValidateFieldMethod',
+          type: 'IFormValidateFieldMethod',
+          defaultValue: '',
+          desc: {
+            'zh-CN':
+              '对部分表单字段进行校验的方法, 第一个参数为单个 prop 或者 prop 数组，第二个参数是回调函数，每个表单项检验完后会依次调用该回调',
+            'en-US':
+              'A method for verifying some form fields. The first parameter is a single prop or a prop array, and the second parameter is a callback function. After each form item is verified, the callback will be called in sequence'
+          },
+          mobileDemo: ''
+        }
+      ],
+      slots: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '默认插槽，自定义表单内容',
+            'en-US': 'Default slot'
+          },
+          mobileDemo: ''
+        }
+      ]
+    },
+    {
+      name: 'form-item',
+      type: 'component',
+      props: [],
+      events: [],
+      methods: [],
+      slots: []
+    }
+  ],
   demos: [
     {
       demoId: 'auto-wordwrap',
@@ -134,5 +316,63 @@ export default {
       },
       codeFiles: ['validate.vue']
     }
+  ],
+  types: [
+    {
+      name: 'IFormRules',
+      type: 'interface',
+      code: `
+// 表单项检验触发时机
+type IFormTrigger = 'change' | 'blur'
+
+interface IFormRules {
+  required?: boolean // 是否必填
+  message?: string // 校验错误的提示
+  // 内置的类型校验
+  type?: 'date' | 'dateTime' | 'float' | 'array' | 'string' | 'number' | 'url' | 'time' | 'email' | 'object' | 'boolean' | 'enum'
+  // 校验触发时机， 默认为 ['change', 'blur'] 两种场景都触发，如果仅在主动调用校验方式时触发，可设置为空数组 []。
+  trigger?: IFormTrigger | IFormTrigger[] 
+  // 同步检验函数，调用回调传递错误信息。
+  validator?: (
+    rule: IFormInnerRule, // form内部处理后的rule
+    value: any, // 表单model对应的值，根据表单项prop获取
+    callback: (e: Error) => void
+    data: object, // prop和value构造的对象
+    options: object // 检验配置，一般不需要用到
+  ) => void
+  // 异步校验函数，resolve则表示校验成功，reject表示校验失败。
+  asyncValidator?: (
+    rule: IFormInnerRule,
+    value: any,
+    callback: (e: Error) => void
+    data: object,
+    options: object
+  ) => Promise<any>
+}
+
+interface IFormInnerRule {
+  field: string // 表单项prop
+  fullField: string // 表单项完整prop（嵌套检验时有用）
+  type: string // 内部使用
+}
+`
+    },
+    {
+      name: 'IFormValidateMethod',
+      type: 'function',
+      code: `
+function IFormValidateMethod(callback: (isValid: boolean, fields: IFormError) => void ): Promise<boolean>
+`
+    },
+    {
+      name: 'IFormValidateFieldMethod',
+      type: 'function',
+      code: `
+function IFormValidateFieldMethod(
+  prop: string | string[],
+  callback: (msg: string, field: IFormError) => void
+): void
+`
+    }
   ]
 }
diff --git a/examples/sites/demos/mobile/app/icon/webdoc/icon.js b/examples/sites/demos/mobile/app/icon/webdoc/icon.js
index 17f4ccf41a..e458aa09bb 100644
--- a/examples/sites/demos/mobile/app/icon/webdoc/icon.js
+++ b/examples/sites/demos/mobile/app/icon/webdoc/icon.js
@@ -1,6 +1,7 @@
 export default {
   column: '2',
   owner: '',
+  apis: [],
   demos: [
     {
       demoId: 'icon-set',
diff --git a/examples/sites/demos/mobile/app/imageviewer/webdoc/imageviewer.js b/examples/sites/demos/mobile/app/imageviewer/webdoc/imageviewer.js
index 295eb29f26..14ed51c250 100644
--- a/examples/sites/demos/mobile/app/imageviewer/webdoc/imageviewer.js
+++ b/examples/sites/demos/mobile/app/imageviewer/webdoc/imageviewer.js
@@ -1,6 +1,146 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'ImageViewer',
+      type: 'component',
+      props: [
+        {
+          name: 'arrow-show',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>是否显示图片切换按钮,该属性默认为false</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'image-full-current'
+        },
+        {
+          name: 'async-close',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>是否开启异步关闭，该属性默认为false</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'close-show',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>是否显示关闭按钮，该属性默认为false</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'image-full-current'
+        },
+        {
+          name: 'image-full-current',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>是否全屏显示，该属性默认为false</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'image-full-current'
+        },
+        {
+          name: 'preview-visible',
+          type: 'boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置图片预览显示隐藏</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'image-full-current'
+        },
+        {
+          name: 'show-index',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>是否显示当前图片下标，该属性默认为false</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'slot-index'
+        },
+        {
+          name: 'start-position',
+          type: 'number',
+          defaultValue: '0',
+          desc: {
+            'zh-CN': '<p>图片预览起始位置索引,该属性默认为0</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'start-position'
+        },
+        {
+          name: 'tool-show',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>是否显示工具栏钮，该属性默认为false</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'url-list',
+          type: 'Array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>配置图片路径</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'image-full-current'
+        },
+        {
+          name: 'z-index',
+          type: 'number',
+          defaultValue: '2000',
+          desc: {
+            'zh-CN': '<p>设置图片预览的 z-index，该属性默认为2000</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'slot-index'
+        }
+      ],
+      events: [
+        {
+          name: 'change',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>切换当前图片时触发，{ index:切换时图片索引, url: 切换时图片链接 }</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'events-change-close'
+        },
+        {
+          name: 'close',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>close，{ index: 关闭时图片索引, url: 关闭时图片链接 }</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'events-change-close'
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'index',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>自定义页码内容</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'slot-index'
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'events-change-close',
diff --git a/examples/sites/demos/mobile/app/index-bar/webdoc/index-bar.js b/examples/sites/demos/mobile/app/index-bar/webdoc/index-bar.js
index 1d2c418ec3..b0f1e7b959 100644
--- a/examples/sites/demos/mobile/app/index-bar/webdoc/index-bar.js
+++ b/examples/sites/demos/mobile/app/index-bar/webdoc/index-bar.js
@@ -1,6 +1,77 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'IndexBar',
+      type: 'component',
+      props: [
+        {
+          name: 'indexList',
+          type: '[]',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>索引文字列表</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'base'
+        }
+      ],
+      events: [
+        {
+          name: 'change',
+          type: 'Function(arg1)',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>\t当前索引改变触发</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'event'
+        },
+        {
+          name: 'select',
+          type: 'Function(arg1)',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>选中新的索引触发</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'event'
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>\t自定义内容</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'event'
+        }
+      ]
+    },
+    {
+      name: 'IndexBarAnchor',
+      type: 'component',
+      props: [
+        {
+          name: 'index',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>索引文字</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'base'
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: []
+    }
+  ],
   demos: [
     {
       demoId: 'base',
diff --git a/examples/sites/demos/mobile/app/input/webdoc/input.js b/examples/sites/demos/mobile/app/input/webdoc/input.js
index f9cb87be7b..d7daa7e245 100644
--- a/examples/sites/demos/mobile/app/input/webdoc/input.js
+++ b/examples/sites/demos/mobile/app/input/webdoc/input.js
@@ -1,6 +1,454 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'input',
+      type: 'component',
+      props: [
+        {
+          name: 'autocomplete',
+          type: 'string',
+          defaultValue: "'off'",
+          desc: {
+            'zh-CN': '原生 autocomplete 属性',
+            'en-US': 'Native autocomplete attribute'
+          },
+          mobileDemo: 'native-attributes'
+        },
+        {
+          name: 'autofocus',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '原生属性，页面加载时，自动获取焦点',
+            'en-US': 'Native attribute. The focus is automatically obtained during page loading.'
+          },
+          mobileDemo: 'native-attributes'
+        },
+        {
+          name: 'autosize',
+          type: 'boolean | { minRows: number, maxRows: number }',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN':
+              '自适应内容高度，只对 <code>type="textarea"</code> 有效。可传入对象，如，{ minRows: 2, maxRows: 6 }',
+            'en-US':
+              'Adaptive content height. This parameter is valid only for <code>type="textarea"</code>. Objects can be transferred, for example, {minRows: 2, maxRows: 6}'
+          },
+          mobileDemo: 'textarea-scalable'
+        },
+        {
+          name: 'clearable',
+          type: 'boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '是否显示清除按钮，该属性不适用于 <code>type="textarea"</code>',
+            'en-US':
+              'Whether to display the clear button. This attribute is not applicable to <code>type="textarea"</code>.'
+          },
+          mobileDemo: 'clearable'
+        },
+        {
+          name: 'cols',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '原生属性，设置宽度，在 type ="textarea" 时有效',
+            'en-US':
+              'Native attribute, which is used to set the width. This parameter is valid only when type is "textarea"'
+          },
+          mobileDemo: 'textarea-rows-cols'
+        },
+        {
+          name: 'counter',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否显示字数统计，只在 type = "text" 或 type = "textarea" 时有效',
+            'en-US':
+              'Whether to display the word count statistics. This parameter is valid only when type is "text" or type is "textarea"'
+          },
+          mobileDemo: 'counter'
+        },
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用',
+            'en-US': 'Disable'
+          },
+          mobileDemo: 'disabled'
+        },
+        {
+          name: 'is-select',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否可下拉选择',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'type-select'
+        },
+        {
+          name: 'label',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '等价于原生 input aria-label 属性',
+            'en-US': 'Equiphorus input aria-label attribute'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'max',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '原生属性，设置最大值',
+            'en-US': 'Native attribute, set the maximum value'
+          },
+          mobileDemo: 'native-attributes'
+        },
+        {
+          name: 'maxlength',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '原生属性，最大输入长度',
+            'en-US': 'Native attribute, maximum input length'
+          },
+          mobileDemo: 'counter'
+        },
+        {
+          name: 'min',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '原生属性，设置最小值',
+            'en-US': 'Native attribute, which sets the minimum value'
+          },
+          mobileDemo: 'native-attributes'
+        },
+        {
+          name: 'minlength',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '原生属性，最小输入长度',
+            'en-US': 'Native attribute, minimum input length'
+          },
+          mobileDemo: 'counter'
+        },
+        {
+          name: 'name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '原生 input name 属性',
+            'en-US': 'Native input name attribute'
+          },
+          mobileDemo: 'native-attributes'
+        },
+        {
+          name: 'placeholder',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '输入框占位文本',
+            'en-US': 'Enter the place-holder text in the text box'
+          },
+          mobileDemo: 'basic-usage'
+        },
+        {
+          name: 'prefix-icon',
+          type: 'Component',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '输入框头部图标',
+            'en-US': 'Icon at the head of the input box'
+          },
+          mobileDemo: 'prefix-suffix-icon'
+        },
+        {
+          name: 'readonly',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '原生属性，是否只读',
+            'en-US': 'Native attribute, read-only'
+          },
+          mobileDemo: 'native-attributes'
+        },
+        {
+          name: 'rows',
+          type: 'number',
+          defaultValue: '2',
+          desc: {
+            'zh-CN': '输入框行数，只对 type="textarea" 有效',
+            'en-US': 'Number of lines in the input box. This parameter is valid only for type="textarea"'
+          },
+          mobileDemo: 'textarea-rows-cols'
+        },
+        {
+          name: 'select-menu',
+          type: 'Array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '下拉选择的选项',
+            'en-US': 'options of select'
+          },
+          mobileDemo: 'type-select'
+        },
+        {
+          name: 'show-password',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否显示切换密码图标',
+            'en-US': 'Whether to display the switchover password icon'
+          },
+          mobileDemo: 'show-password'
+        },
+        {
+          name: 'show-word-limit',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效',
+            'en-US':
+              'Whether to display the number of input words. This parameter is valid only when type is "text" or type is "textarea"'
+          },
+          mobileDemo: 'counter'
+        },
+        {
+          name: 'step',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '原生属性，设置输入字段的合法数字间隔',
+            'en-US': 'Native attribute, which is used to set the valid digit interval of the input field.'
+          },
+          mobileDemo: 'native-attributes'
+        },
+        {
+          name: 'suffix-icon',
+          type: 'Component',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '输入框尾部图标',
+            'en-US': 'Input box end icon'
+          },
+          mobileDemo: 'prefix-suffix-icon'
+        },
+        {
+          name: 'tips',
+          type: 'String | Slot',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '提示信息',
+            'en-US': 'tips under input'
+          },
+          mobileDemo: 'slots'
+        },
+        {
+          name: 'title',
+          type: 'String | Slot',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义标题',
+            'en-US': 'custom title'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'type',
+          type: "'text' | 'textarea' | 'password' | InputHTMLAttributes.type",
+          defaultValue: "'text'",
+          desc: {
+            'zh-CN': '设置 input 框的 type 属性，默认为 "text",可选值 "text"，"textarea" 和其他 原生 input 的 type 值',
+            'en-US':
+              'Set the type attribute of the input box. The default value is "text". The options are "text", "textarea", and type values of other native inputs.'
+          },
+          mobileDemo: 'type'
+        },
+        {
+          name: 'v-model / modelValue',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '绑定值',
+            'en-US': 'input value'
+          },
+          mobileDemo: 'basic-usage'
+        },
+        {
+          name: 'validate-event',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '输入时是否触发表单的校验',
+            'en-US': 'Trigger form verification upon input'
+          },
+          mobileDemo: 'validate-event'
+        },
+        {
+          name: 'width',
+          type: 'Number | String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '宽度，取值为数字或元素 width 属性有效值，如果是数字则以 px 为单位',
+            'en-US':
+              'width, accepts a numerical value or a valid value for the width property, and if it is a number, it is measured in pixels.'
+          },
+          mobileDemo: ''
+        }
+      ],
+      events: [
+        {
+          name: 'blur',
+          type: '(event: FocusEvent) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '在 Input 失去焦点时触发',
+            'en-US': 'Trigger when Input loses focus'
+          },
+          mobileDemo: 'events'
+        },
+        {
+          name: 'change',
+          type: '(value: string | number) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '在 Input 值改变时触发',
+            'en-US': 'triggered when the input value changes.'
+          },
+          mobileDemo: 'events'
+        },
+        {
+          name: 'clear',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '在点击由 clearable 属性生成的清空按钮时触发',
+            'en-US': 'Trigger when the clear button generated by the clearable property is clicked'
+          },
+          mobileDemo: 'events'
+        },
+        {
+          name: 'focus',
+          type: '(event: FocusEvent) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '在 Input 获得焦点时触发',
+            'en-US': 'Trigger when Input obtains focus'
+          },
+          mobileDemo: 'events'
+        },
+        {
+          name: 'input',
+          type: '(event: InputEvent) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '输入值时触发事件',
+            'en-US': 'An event is triggered when a value is entered.'
+          },
+          mobileDemo: 'events'
+        }
+      ],
+      methods: [
+        {
+          name: 'blur',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '使 input 失去焦点',
+            'en-US': 'The input loses focus.'
+          },
+          mobileDemo: 'methods'
+        },
+        {
+          name: 'focus',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '使 input 获取焦点',
+            'en-US': 'To enable the input to obtain the focus'
+          },
+          mobileDemo: 'methods'
+        },
+        {
+          name: 'select',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '选中 input 中的文字',
+            'en-US': 'Select the text in input.'
+          },
+          mobileDemo: 'methods'
+        }
+      ],
+      slots: [
+        {
+          name: 'append',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '输入框后置内容，只对 type="text" 有效',
+            'en-US': 'Content at the end of the text box. This field is valid only for type="text"'
+          },
+          mobileDemo: 'slots'
+        },
+        {
+          name: 'prefix',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '输入框头部内容，只对 type="text" 有效',
+            'en-US': 'Content in the header of the text box, which is valid only for type="text"'
+          },
+          mobileDemo: 'slots'
+        },
+        {
+          name: 'prepend',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '输入框前置内容，只对 type="text" 有效',
+            'en-US': 'Content before the text box, which is valid only for type="text"'
+          },
+          mobileDemo: 'slots'
+        },
+        {
+          name: 'suffix',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '输入框尾部内容，只对 type="text" 有效',
+            'en-US': 'The content at the end of the text box is valid only for type="text"'
+          },
+          mobileDemo: 'slots'
+        },
+        {
+          name: 'tips',
+          desc: {
+            'zh-CN': '提示信息插槽',
+            'en-US': 'tips slot'
+          },
+          mobileDemo: 'slots'
+        },
+        {
+          name: 'title',
+          desc: {
+            'zh-CN': '标题插槽',
+            'en-US': 'title slot'
+          },
+          mobileDemo: 'slots'
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'basic-usage',
diff --git a/examples/sites/demos/mobile/app/label/webdoc/label.js b/examples/sites/demos/mobile/app/label/webdoc/label.js
index 1d568d42b3..a413b997d6 100644
--- a/examples/sites/demos/mobile/app/label/webdoc/label.js
+++ b/examples/sites/demos/mobile/app/label/webdoc/label.js
@@ -1,6 +1,107 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'Label',
+      type: 'component',
+      props: [
+        {
+          name: 'decimal',
+          type: 'number',
+          defaultValue: '2',
+          desc: {
+            'zh-CN': '<p>小数点的位数</p>',
+            'en-US': 'decimal'
+          },
+          mobileDemo: 'decimal'
+        },
+        {
+          name: 'ellipsis',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>支持超出省略号显示的行数</p>',
+            'en-US': 'ellipsis'
+          },
+          mobileDemo: 'ellipsis'
+        },
+        {
+          name: 'is-required',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>是否添加*号</p>',
+            'en-US': 'is required'
+          },
+          mobileDemo: 'required'
+        },
+        {
+          name: 'label',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>文本</p>',
+            'en-US': 'text'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'limit',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>限制文本的字数</p>',
+            'en-US': 'text limit'
+          },
+          mobileDemo: 'limit'
+        },
+        {
+          name: 'position',
+          type: 'string',
+          defaultValue: 'left',
+          desc: {
+            'zh-CN': '<p>整行显示时的位置:left,center,right</p>',
+            'en-US': 'position of whole line dispaly'
+          },
+          mobileDemo: 'position'
+        },
+        {
+          name: 'size',
+          type: 'string',
+          defaultValue: 'normal',
+          desc: {
+            'zh-CN': '<p>文本大小:large,normal,small,mini</p>',
+            'en-US': 'text size'
+          },
+          mobileDemo: 'size'
+        },
+        {
+          name: 'type',
+          type: 'string',
+          defaultValue: 'base',
+          desc: {
+            'zh-CN': '<p>类型 \n base, number</p>',
+            'en-US': 'type'
+          },
+          mobileDemo: 'type'
+        },
+        {
+          name: 'wholeline',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>是否整行显示</p>',
+            'en-US': 'whole line display'
+          },
+          mobileDemo: 'wholeline'
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: []
+    }
+  ],
   demos: [
     {
       demoId: 'base',
diff --git a/examples/sites/demos/mobile/app/list/webdoc/list.js b/examples/sites/demos/mobile/app/list/webdoc/list.js
index 5fb95a06d3..96996e72bc 100644
--- a/examples/sites/demos/mobile/app/list/webdoc/list.js
+++ b/examples/sites/demos/mobile/app/list/webdoc/list.js
@@ -1,6 +1,74 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'List',
+      type: 'component',
+      props: [
+        {
+          name: 'content',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置主文本</p>',
+            'en-US': 'Is fixed top'
+          },
+          mobileDemo: 'double-line'
+        },
+        {
+          name: 'sub-text',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置次文本</p>',
+            'en-US': 'Is show right arrow'
+          },
+          mobileDemo: 'single-line'
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>自定义主文本内容</p>',
+            'en-US': 'Is show right arrow'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'description',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>自定义描述内容</p>',
+            'en-US': 'Is show right arrow'
+          },
+          mobileDemo: 'slots'
+        },
+        {
+          name: 'prefix',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>自定义头部内容</p>',
+            'en-US': 'Is show right arrow'
+          },
+          mobileDemo: 'slots'
+        },
+        {
+          name: 'suffix',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>自定义尾部内容</p>',
+            'en-US': 'Is show right arrow'
+          },
+          mobileDemo: 'slots'
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'double-line',
diff --git a/examples/sites/demos/mobile/app/loading/webdoc/loading.js b/examples/sites/demos/mobile/app/loading/webdoc/loading.js
index 7992d515cf..442453d452 100644
--- a/examples/sites/demos/mobile/app/loading/webdoc/loading.js
+++ b/examples/sites/demos/mobile/app/loading/webdoc/loading.js
@@ -1,6 +1,60 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'loading',
+      type: 'component',
+      props: [
+        {
+          name: 'target',
+          type: 'HTMLElement | string',
+          defaultValue: 'document.body',
+          desc: {
+            'zh-CN':
+              'Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 document.querySelector 以获取到对应 DOM 节点',
+            'en-US':
+              'Loading the DOM node to be overwritten. A DOM object or character string can be transferred. If a character string is transferred, it is transferred to document.querySelector as a parameter to obtain the corresponding DOM node.'
+          },
+          mobileDemo: 'type'
+        },
+        {
+          name: 'tiny_mode',
+          type: 'string',
+          defaultValue: 'pc',
+          desc: {
+            'zh-CN': '<p>通配置项pc,mobile表示不同设备</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'type'
+        },
+        {
+          name: 'type',
+          type: 'string',
+          defaultValue: 'primary',
+          desc: {
+            'zh-CN': '<p>通过type设置不同的加载样式</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'type'
+        }
+      ],
+      events: [],
+      methods: [
+        {
+          name: 'closeLoading',
+          type: 'Function',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>关闭Loading</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'type'
+        }
+      ],
+      slots: []
+    }
+  ],
   demos: [
     {
       demoId: 'base',
@@ -84,93 +138,12 @@ export default {
         'en-US': 'Global Registry'
       },
       desc: {
-        'zh-CN': `<p>通过 <code>v-loading.lock.fullscreen</code> 指令方式或者服务方式进行全局加载，如需使用指令方式全局加载需要如下操作：
-          <p>在 Vue 2 版本环境中添加 <code>Vue.use(Loading)</code>；</p><p>在Vue 3 版本环境中添加 <code>app.use(Loading)</code>.<p>`,
-        'en-US': `<p>Global loading can be achieved through the <code>v-loading.lock.fullscreen</code> directive or service. To use the directive for global loading, follow these steps:</p><p>For Vue 2 environment, add <code>Vue.use(Loading)</code>;</p><p>For Vue 3 environment, add <code>app.use(Loading)</code>.</p>`
+        'zh-CN':
+          '<p>通过 <code>v-loading.lock.fullscreen</code> 指令方式或者服务方式进行全局加载，如需使用指令方式全局加载需要如下操作：\n          <p>在 Vue 2 版本环境中添加 <code>Vue.use(Loading)</code>；</p><p>在Vue 3 版本环境中添加 <code>app.use(Loading)</code>.<p>',
+        'en-US':
+          '<p>Global loading can be achieved through the <code>v-loading.lock.fullscreen</code> directive or service. To use the directive for global loading, follow these steps:</p><p>For Vue 2 environment, add <code>Vue.use(Loading)</code>;</p><p>For Vue 3 environment, add <code>app.use(Loading)</code>.</p>'
       },
       codeFiles: ['global-registry.vue']
     }
-  ],
-  apis: [
-    {
-      name: 'Loading', // 组件名称展示使用
-      type: 'loading', // API 类型
-      properties: [
-        {
-          name: 'type',
-          type: 'string',
-          defaultValue: 'primary',
-          desc: {
-            'zh-CN': '<p>通过type设置不同的加载样式</p>',
-            'en-US': 'display different button'
-          },
-          demoId: 'type'
-        },
-        {
-          name: 'background',
-          type: 'string',
-          defaultValue: `'#0000004b'`,
-          desc: {
-            'zh-CN': '遮罩层背景色',
-            'en-US': 'mask background color'
-          },
-          demoId: 'background'
-        },
-        {
-          name: 'custom-class',
-          type: 'string',
-          defaultValue: '--',
-          desc: {
-            'zh-CN': '自定义类名',
-            'en-US': 'Custom class name'
-          },
-          demoId: 'custom-class'
-        },
-        {
-          name: 'spinner',
-          type: 'Component',
-          defaultValue: '--',
-          desc: {
-            'zh-CN': '自定义加载图标',
-            'en-US': 'display different button'
-          },
-          demoId: 'spinner'
-        },
-        {
-          name: 'target',
-          type: 'DOM',
-          defaultValue: 'document.body',
-          desc: {
-            'zh-CN':
-              '需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 document.querySelector 以获取到对应 DOM 节点',
-            'en-US':
-              'The DOM node to be targeted for coverage. It can be a DOM object or a string; if a string is passed, it will be used as a parameter for document.querySelector to obtain the corresponding DOM node'
-          },
-          demoId: 'base'
-        }
-      ],
-      method: [
-        {
-          name: 'close',
-          type: '() => void',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '关闭 Loading',
-            'en-US': 'close loading'
-          },
-          demoId: 'base'
-        },
-        {
-          name: 'service',
-          type: '() => Component',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '创建一个 Loading 组件实例并展示',
-            'en-US': 'Create a Loading component instance and display it'
-          },
-          demoId: 'base'
-        }
-      ]
-    }
   ]
 }
diff --git a/examples/sites/demos/mobile/app/mask/webdoc/mask.js b/examples/sites/demos/mobile/app/mask/webdoc/mask.js
index a473efea93..7e815d1e0e 100644
--- a/examples/sites/demos/mobile/app/mask/webdoc/mask.js
+++ b/examples/sites/demos/mobile/app/mask/webdoc/mask.js
@@ -1,6 +1,65 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'Mask',
+      type: 'component',
+      props: [
+        {
+          name: 'cancelTouch',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用touch事件，设为 <code>true</code> 后点击遮罩层不会关闭',
+            'en-US': "whether to disable touch events, and mask wouldn't close when it was set <code>true</code>"
+          },
+          mobileDemo: 'cancel-touch'
+        },
+        {
+          name: 'visible',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否展示遮罩层',
+            'en-US': 'whether to show mask layer'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'z-index',
+          type: 'number',
+          defaultValue: '99',
+          desc: {
+            'zh-CN': '层叠数值',
+            'en-US': 'z-index property'
+          },
+          mobileDemo: 'z-index'
+        }
+      ],
+      events: [
+        {
+          name: 'click',
+          desc: {
+            'zh-CN': '点击遮罩层触发',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'basic-usage'
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          desc: {
+            'zh-CN': '默认插槽',
+            'en-US': 'Default slot'
+          },
+          mobileDemo: 'slot-default'
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'base',
diff --git a/examples/sites/demos/mobile/app/minipicker/webdoc/minipicker.js b/examples/sites/demos/mobile/app/minipicker/webdoc/minipicker.js
index c9e1178bc4..b64067419b 100644
--- a/examples/sites/demos/mobile/app/minipicker/webdoc/minipicker.js
+++ b/examples/sites/demos/mobile/app/minipicker/webdoc/minipicker.js
@@ -1,6 +1,202 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'MiniPicker',
+      type: 'component',
+      props: [
+        {
+          name: 'cancel-button-text',
+          type: 'string',
+          defaultValue: '取消',
+          desc: {
+            'zh-CN': '<p>取消按钮内容设置，该属性默认为‘取消’</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'cancel-button-text'
+        },
+        {
+          name: 'columns',
+          type: 'Array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>配置每一列显示的数据</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'multicolumn'
+        },
+        {
+          name: 'confirm-button-text',
+          type: 'string',
+          defaultValue: '确定',
+          desc: {
+            'zh-CN': '<p>确定按钮内容设置，该属性默认为‘确定’</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'confirm-button-text'
+        },
+        {
+          name: 'default-index',
+          type: 'number',
+          defaultValue: '0',
+          desc: {
+            'zh-CN': '<p>单列选择时,选择的初始值索引，该属性默认为0</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'defaultindex'
+        },
+        {
+          name: 'item-height',
+          type: 'number',
+          defaultValue: '34',
+          desc: {
+            'zh-CN': '<p>选项高度，该属性默认为34</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'itemheight'
+        },
+        {
+          name: 'swipe-duration',
+          type: 'number',
+          defaultValue: '1000',
+          desc: {
+            'zh-CN': '<p>快速滑动时惯性滚动的时长，单位 ms,该属性默认为1000</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'cancel-button-text'
+        },
+        {
+          name: 'title',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>标题</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'cancel-button-text'
+        },
+        {
+          name: 'value-key',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>选项对象中，选项文字对应的键名，该属性默认为"text"</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'visible',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>选择器组件显示或隐藏，该属性默认为false</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'cancel-button-text'
+        },
+        {
+          name: 'visible-item-count',
+          type: 'number',
+          defaultValue: '5',
+          desc: {
+            'zh-CN': '<p>可见的选项个数，该属性默认为5</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'visibleitemcount'
+        }
+      ],
+      events: [
+        {
+          name: 'cancel',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>点击取消按钮时触发</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'change',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>选项改变时触发。</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'change'
+        },
+        {
+          name: 'confirm',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>点击确定按钮时触发</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'cancel'
+        }
+      ],
+      methods: [
+        {
+          name: 'getColumnIndex',
+          type: '获取对应列选中项的索引，参数columnIndex，返回值optionIndex',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>下拉时触发的事件</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'methods'
+        },
+        {
+          name: 'getColumnValue',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>获取对应列选中的值，参数columnIndex，返回值value</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'methods'
+        },
+        {
+          name: 'getColumnValues',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>获取对应列中所有选项，参数columnIndex，返回值values</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'methods'
+        },
+        {
+          name: 'getIndexes',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>获取所有列选中值对应的索引</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'column'
+        },
+        {
+          name: 'getValues',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>获取所有列选中的值</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'column'
+        }
+      ],
+      slots: [
+        {
+          name: 'toolbar',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>自定义工具栏</p>',
+            'en-US': 'toolbar'
+          },
+          mobileDemo: 'toolbar'
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'multicolumn',
diff --git a/examples/sites/demos/mobile/app/modal/webdoc/modal.js b/examples/sites/demos/mobile/app/modal/webdoc/modal.js
index 30eeccbeff..3ebcdfe6c9 100644
--- a/examples/sites/demos/mobile/app/modal/webdoc/modal.js
+++ b/examples/sites/demos/mobile/app/modal/webdoc/modal.js
@@ -1,6 +1,328 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'modal',
+      type: 'component',
+      props: [
+        {
+          name: 'duration',
+          type: 'number | string',
+          defaultValue: '3000',
+          desc: {
+            'zh-CN': "自动关闭的延时，仅当 type 为 'message' 有效",
+            'en-US': "Delay for automatic shutdown, only valid when type is 'message'"
+          },
+          mobileDemo: 'duration'
+        },
+        {
+          name: 'esc-closable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否允许按 Esc 键关闭窗口',
+            'en-US': 'Whether to allow pressing the Esc key to close a window'
+          },
+          mobileDemo: 'mask-closable'
+        },
+        {
+          name: 'fullscreen',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否最大化显示',
+            'en-US': 'Whether to maximize the display'
+          },
+          mobileDemo: 'fullscreen'
+        },
+        {
+          name: 'height',
+          type: 'number | string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '窗口的高度',
+            'en-US': 'window height'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'id',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': "如果不想窗口重复点击，可以设置唯一的 id 防止重复提示，仅当 type 为 'message' 有效",
+            'en-US':
+              "If you don't want the window to be clicked repeatedly, you can set a unique id to prevent repeated prompts. This is only valid when type is 'message'"
+          },
+          mobileDemo: 'id'
+        },
+        {
+          name: 'is-form-reset',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '关闭弹窗时，是否重置表单数据',
+            'en-US': 'Whether to reset the form data when closing the pop-up window'
+          },
+          mobileDemo: 'is-form-reset'
+        },
+        {
+          name: 'lock-scroll',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否锁住滚动条，不允许页面滚动',
+            'en-US': 'Whether to lock the scroll bar and not allow the page to scroll'
+          },
+          mobileDemo: 'lock-scroll'
+        },
+        {
+          name: 'lock-view',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否锁住页面，不允许窗口之外的任何操作',
+            'en-US': 'Whether to lock the page and not allow any operations outside the window'
+          },
+          mobileDemo: 'lock-view'
+        },
+        {
+          name: 'mask',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示遮罩层',
+            'en-US': 'Whether to display the mask layer'
+          },
+          mobileDemo: 'mask-closable'
+        },
+        {
+          name: 'mask-closable',
+          type: 'boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '是否允许点击遮罩层关闭窗口',
+            'en-US': 'Whether to allow clicking on the mask layer to close the window'
+          },
+          mobileDemo: 'mask-closable'
+        },
+        {
+          name: 'message',
+          type: 'string | VNode | () => string | VNode',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '窗口的内容',
+            'en-US': 'Window contents'
+          },
+          mobileDemo: 'message'
+        },
+        {
+          name: 'min-height',
+          type: 'number | string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '窗口的最小高度',
+            'en-US': 'Minimum height of window'
+          },
+          mobileDemo: 'min-height'
+        },
+        {
+          name: 'min-width',
+          type: 'number | string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '窗口的最小宽度',
+            'en-US': 'The minimum width of the window'
+          },
+          mobileDemo: 'min-width'
+        },
+        {
+          name: 'modelValue / v-model',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示',
+            'en-US': 'Whether to display'
+          },
+          mobileDemo: 'cancel-event'
+        },
+        {
+          name: 'resize',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否允许拖动调整窗口大小',
+            'en-US': 'Whether to allow dragging to resize the window'
+          },
+          mobileDemo: 'resize'
+        },
+        {
+          name: 'show-header',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示头部',
+            'en-US': 'Display Header'
+          },
+          mobileDemo: 'showHeader'
+        },
+        {
+          name: 'status',
+          typeAnchorName: 'IStatus',
+          type: 'IStatus',
+          defaultValue: "'info'",
+          desc: {
+            'zh-CN': "消息状态，当 type 为 'alert'、'message'、'confirm' 时有效",
+            'en-US': "Message status, valid when type is 'alert', 'message', 'confirm'"
+          },
+          mobileDemo: 'status'
+        },
+        {
+          name: 'title',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '窗口的标题',
+            'en-US': 'Window title'
+          },
+          mobileDemo: 'title'
+        },
+        {
+          name: 'top',
+          type: 'number | string',
+          defaultValue: '80',
+          desc: {
+            'zh-CN': "消息距离顶部的位置，仅当 type 为 'message' 时有效",
+            'en-US': "The position of the message from the top, only valid when type is 'message'"
+          },
+          mobileDemo: 'top'
+        },
+        {
+          name: 'type',
+          type: "'alert' | 'confirm' | 'message'",
+          defaultValue: "'alert'",
+          desc: {
+            'zh-CN': '窗口类型',
+            'en-US': 'Window type'
+          },
+          mobileDemo: 'type'
+        },
+        {
+          name: 'width',
+          type: 'number | string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '窗口的宽度（设置宽度像素或者百分比，浏览器窗口大小改变可居中显示)',
+            'en-US':
+              'The width of the window(Set the width in pixels or percentages, and the browser window size can be changed to display in the center)'
+          },
+          mobileDemo: 'grid'
+        },
+        {
+          name: 'z-index',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）',
+            'en-US': 'Customize the stacking order (may be used in some special scenarios, such as when it is blocked)'
+          },
+          mobileDemo: 'zIndex'
+        }
+      ],
+      events: [
+        {
+          name: 'cancel',
+          typeAnchorName: 'IModalEventParam',
+          type: '(params: IModalEventParam, event: Event) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '点击取消按钮时会触发该事件',
+            'en-US': 'This event is triggered when the Cancel button is clicked'
+          },
+          mobileDemo: 'cancel-event'
+        },
+        {
+          name: 'close',
+          typeAnchorName: 'IModalEventParam',
+          type: '(params: IModalEventParam, event: Event) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '点击关闭按钮时会触发该事件',
+            'en-US': 'This event is triggered when the close button is clicked'
+          },
+          mobileDemo: 'close-event'
+        },
+        {
+          name: 'confirm',
+          typeAnchorName: 'IModalEventParam',
+          type: '(params: IModalEventParam, event: Event) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '点击确定按钮时会触发该事件',
+            'en-US': 'This event is triggered when the OK button is clicked'
+          },
+          mobileDemo: 'confirm-event'
+        },
+        {
+          name: 'hide',
+          typeAnchorName: 'IModalEventParam',
+          type: '(params: IModalEventParam) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '在窗口关闭时会触发该事件',
+            'en-US': 'This event is triggered when the window is closed'
+          },
+          mobileDemo: 'hide-event'
+        },
+        {
+          name: 'show',
+          typeAnchorName: 'IModalEventParam',
+          type: '(params: IModalEventParam) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '在窗口显示时会触发该事件',
+            'en-US': 'This event is triggered when the window is displayed'
+          },
+          mobileDemo: 'show-event'
+        },
+        {
+          name: 'zoom',
+          typeAnchorName: 'IModalEventParam',
+          type: '(params: IModalEventParam, event: Event) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '窗口缩放时会触发该事件',
+            'en-US': 'This event is triggered when a window is zoomed in or out'
+          },
+          mobileDemo: 'zoom-event'
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '默认插槽',
+            'en-US': 'Default slot'
+          },
+          mobileDemo: 'cancel-event'
+        },
+        {
+          name: 'footer',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '窗口底部的模板',
+            'en-US': 'Template at the bottom of the window'
+          },
+          mobileDemo: 'footer-slot'
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'base',
@@ -338,5 +660,24 @@ export default {
       },
       codeFiles: ['zoom-event.vue']
     }
+  ],
+  types: [
+    {
+      name: 'IModalEventParam',
+      type: 'interface',
+      code: `
+interface IModalEventParam {
+  type: 'alert' | 'message' | 'confirm' // 弹窗类型
+  $modal: ComponentPublicInstance // Modal组件实例
+}
+`
+    },
+    {
+      name: 'IStatus',
+      type: 'type',
+      code: `
+          type IStatus = 'info' | 'success' | 'warning' | 'error' | 'loading'
+      `
+    }
   ]
 }
diff --git a/examples/sites/demos/mobile/app/multi-select/webdoc/multi-select.js b/examples/sites/demos/mobile/app/multi-select/webdoc/multi-select.js
index 894ea57208..1f61005e14 100644
--- a/examples/sites/demos/mobile/app/multi-select/webdoc/multi-select.js
+++ b/examples/sites/demos/mobile/app/multi-select/webdoc/multi-select.js
@@ -1,6 +1,149 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'multiSelect',
+      type: 'component',
+      props: [
+        {
+          name: 'data-source',
+          type: 'IMultiSelectMenu[]',
+          typeAnchorName: 'IMultiSelectMenu',
+          defaultValue: '[]',
+          desc: {
+            'zh-CN': '数据源',
+            'en-US': 'data source'
+          },
+          mobileDemo: 'basic-usage'
+        },
+        {
+          name: 'default-selected-array',
+          type: 'number[]',
+          defaultValue: '',
+          desc: {
+            'zh-CN': "默认值，当 type='wheel' 时适用",
+            'en-US': "default selected value, used when type='wheel'"
+          },
+          mobileDemo: 'type-wheel'
+        },
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '禁用',
+            'en-US': 'disabled'
+          },
+          mobileDemo: 'disabled'
+        },
+        {
+          name: 'filterable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '可筛选',
+            'en-US': 'filterable'
+          },
+          mobileDemo: 'filter'
+        },
+        {
+          name: 'mask',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否显示遮罩层',
+            'en-US': 'to show mask'
+          },
+          mobileDemo: 'mask'
+        },
+        {
+          name: 'mask-options',
+          type: 'IMaskOptions',
+          typeAnchorName: 'IMaskOptions',
+          defaultValue: '{}',
+          desc: {
+            'zh-CN':
+              '遮罩层配置：<ul><li>zIndex: 遮罩层的层叠数值</li><li>cancelTouch: 是否禁用 touch 事件，禁用后点击遮罩层不能关闭下拉框</li></ul>',
+            'en-US':
+              'Mask layer settings, including the following properties: <p>zIndex: the stacking order value of the mask layer;</p><p>cancelTouch: whether to disable touch events.</p>'
+          },
+          mobileDemo: 'mask-options'
+        },
+        {
+          name: 'search-placeholder',
+          type: 'string',
+          defaultValue: '搜索',
+          desc: {
+            'zh-CN': '搜索框默认提示',
+            'en-US': 'search input placeholder'
+          },
+          mobileDemo: 'filter'
+        },
+        {
+          name: 'type',
+          type: "'list' | 'wheel'",
+          defaultValue: '',
+          desc: {
+            'zh-CN': '选项外观，其中 list：列表形式；wheel：滑轮模式',
+            'en-US': 'option appearance'
+          },
+          mobileDemo: 'wheel'
+        },
+        {
+          name: 'v-model/modelValue',
+          type: '(string | string[])[]',
+          defaultValue: '[]',
+          desc: {
+            'zh-CN': '<p>选中值</p>',
+            'en-US': '<p>selected value</p>'
+          },
+          mobileDemo: 'basic-usage'
+        }
+      ],
+      events: [
+        {
+          name: 'item-click',
+          type: '(option, headerIndex) => void',
+          desc: {
+            'zh-CN': '点击选项事件，当 type="list" 时适用',
+            'en-us': 'click option event, applicable when type = "list"'
+          },
+          mobileDemo: 'event-click-item'
+        },
+        {
+          name: 'confirm',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': "确认事件，当 type='wheel' 时适用",
+            'en-US': "confirm selection event, applicable when the type = 'wheel'"
+          },
+          mobileDemo: 'type-wheel'
+        },
+        {
+          name: 'reset',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': "重置事件，当 type='wheel' 时适用",
+            'en-US': "reset selection event, applicable when the type = 'wheel'"
+          },
+          mobileDemo: 'type-wheel'
+        }
+      ],
+      slots: [
+        {
+          name: 'footer',
+          desc: {
+            'zh-CN': '选项底部插槽',
+            'en-US': 'slot under options'
+          },
+          mobileDemo: 'slots'
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'basic-usage',
@@ -101,5 +244,20 @@ export default {
       },
       codeFiles: ['event-click-item.vue']
     }
+  ],
+  types: [
+    {
+      name: 'IMultiSelectMenu',
+      type: 'interface',
+      code: `
+interface IMultiSelectMenu {
+  title: string, // 菜单项标题
+  options: IMultiSelectOption[], // 选项数据
+  multiple?: boolean, // 是否多选
+  disabled?: boolean, // 菜单项是否禁用
+  hasFooter?: boolean // 是否显示底部
+}
+`
+    }
   ]
 }
diff --git a/examples/sites/demos/mobile/app/navbar/webdoc/navbar.js b/examples/sites/demos/mobile/app/navbar/webdoc/navbar.js
index 4396e2c447..c69c7df469 100644
--- a/examples/sites/demos/mobile/app/navbar/webdoc/navbar.js
+++ b/examples/sites/demos/mobile/app/navbar/webdoc/navbar.js
@@ -1,6 +1,125 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'navBar',
+      type: 'component',
+      props: [
+        {
+          name: 'fixed',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '<p>是否固定在顶部，该属性默认为true</p>',
+            'en-US': 'Is fixed top'
+          },
+          mobileDemo: 'left-right-arrow'
+        },
+        {
+          name: 'left-arrow',
+          type: 'boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>是否显示左侧箭头，该属性默认为false</p>',
+            'en-US': 'Is show left arrow'
+          },
+          mobileDemo: 'left-right-arrow'
+        },
+        {
+          name: 'left-text',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置左侧文本</p>',
+            'en-US': 'Is show left text'
+          },
+          mobileDemo: 'left-right-text'
+        },
+        {
+          name: 'right-arrow',
+          type: 'boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>是否显示右侧箭头</p>',
+            'en-US': 'Is show right arrow'
+          },
+          mobileDemo: 'left-right-arrow'
+        },
+        {
+          name: 'right-text',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置右侧文本</p>',
+            'en-US': 'Is show right text'
+          },
+          mobileDemo: 'left-right-text'
+        },
+        {
+          name: 'sub-title',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置副标题</p>',
+            'en-US': 'set sub-title'
+          },
+          mobileDemo: 'left-right-text'
+        },
+        {
+          name: 'title',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置主标题</p>',
+            'en-US': 'set main-title'
+          },
+          mobileDemo: 'z-index'
+        },
+        {
+          name: 'z-index',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置z-index</p>',
+            'en-US': 'set z-index'
+          },
+          mobileDemo: 'z-index'
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>自定义标题</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'left-right-arrow'
+        },
+        {
+          name: 'left',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>自定义左侧内容</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'left-right-text'
+        },
+        {
+          name: 'right',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>自定义右侧内容</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'left-right-text'
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'left-right-arrow',
diff --git a/examples/sites/demos/mobile/app/numeric/webdoc/numeric.js b/examples/sites/demos/mobile/app/numeric/webdoc/numeric.js
index 2f64f45b8b..b02b9c8dfb 100644
--- a/examples/sites/demos/mobile/app/numeric/webdoc/numeric.js
+++ b/examples/sites/demos/mobile/app/numeric/webdoc/numeric.js
@@ -1,6 +1,193 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'numeric',
+      type: 'component',
+      props: [
+        {
+          name: 'circulate',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '向上到达最大值后，是否从最小值开始，或反过来',
+            'en-US': 'When the maximum value is reached, start from the minimum value, or vice versa'
+          },
+          mobileDemo: 'circulate'
+        },
+        {
+          name: 'controls',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否使用加减按钮',
+            'en-US': 'Whether to use the control button'
+          },
+          mobileDemo: 'controls'
+        },
+        {
+          name: 'controls-position',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '加减按钮位置，可选值为 right，表示加减按钮均位于最右侧',
+            'en-US': 'Control button position; The optional value of this attribute is right'
+          },
+          mobileDemo: 'controls-position'
+        },
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '禁用',
+            'en-US': 'Whether to disable the counter'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'label',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件 arial-label 属性取值',
+            'en-US': 'The value of arial-label attribute'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'max',
+          type: 'number',
+          defaultValue: 'Infinity',
+          desc: {
+            'zh-CN': '规定组件可输入的最大数值，指定合法值的范围，支持整数和小数',
+            'en-US':
+              'Maximum value that can be entered in a component to create a valid value range. Integers and decimals are supported'
+          },
+          mobileDemo: 'max'
+        },
+        {
+          name: 'min',
+          type: 'number',
+          defaultValue: '-Infinity',
+          desc: {
+            'zh-CN': '规定组件可输入的最小数值，指定合法值的范围，支持整数和小数',
+            'en-US':
+              'Specify the minimum value that can be entered for a component to create a valid value range. Integers and decimals are supported'
+          },
+          mobileDemo: 'max'
+        },
+        {
+          name: 'placeholder',
+          type: 'string',
+          defaultValue: "''",
+          desc: {
+            'zh-CN': '输入框内的提示占位文本',
+            'en-US': 'Set the placeholder text in the text box'
+          },
+          mobileDemo: 'placeholder'
+        },
+        {
+          name: 'precision',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数值精度',
+            'en-US': 'Numeric precision'
+          },
+          mobileDemo: 'precision'
+        },
+        {
+          name: 'step',
+          type: 'number | string | IStepStrategy',
+          typeAnchorName: 'IStepStrategy',
+          defaultValue: '1',
+          meta: {
+            stable: '3.20.0'
+          },
+          desc: {
+            'zh-CN': '步长',
+            'en-US': 'Increment or decrement value each time'
+          },
+          mobileDemo: 'step'
+        },
+        {
+          name: 'step-strictly',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否只能输入 step 的倍数',
+            'en-US': 'Whether to enter only multiples of step'
+          },
+          mobileDemo: 'step'
+        },
+        {
+          name: 'change-compat',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '设置除加减按钮及直接输入数值之外，值改变后是否触发change事件',
+            'en-US':
+              'Set whether to trigger the change event after the value is changed, except for the plus and minus buttons and direct input of values.'
+          }
+        },
+        {
+          name: 'string-mode',
+          type: 'boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '使用字符串模式，精度超过JS限制时使用',
+            'en-US': ''
+          }
+        },
+        {
+          name: 'value',
+          type: 'number',
+          defaultValue: '0',
+          desc: {
+            'zh-CN': '<p>设置输入组件的默认值，该属性默认为 0。</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: ''
+        }
+      ],
+      events: [
+        {
+          name: 'blur',
+          type: '(event: FocusEvent) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件失去焦点时触发的回调函数',
+            'en-US': 'The callback function triggered when a component loses focus'
+          },
+          mobileDemo: 'event'
+        },
+        {
+          name: 'change',
+          type: '(newVal: number | undefined, oldVal: number | undefined) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件的值变化时触发的回调函数',
+            'en-US': 'The callback function triggered when the value of a component changes'
+          },
+          mobileDemo: 'event'
+        },
+        {
+          name: 'focus',
+          type: '(event: FocusEvent) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件获得焦点时触发的回调函数',
+            'en-US': 'The callback function triggered when a component obtains the focus'
+          },
+          mobileDemo: 'event'
+        }
+      ],
+      methods: [],
+      slots: []
+    }
+  ],
   demos: [
     {
       demoId: 'automatic-price',
@@ -110,5 +297,17 @@ export default {
       },
       codeFiles: ['step.vue']
     }
+  ],
+  types: [
+    {
+      name: 'IStepStrategy',
+      type: 'interface',
+      code: `
+interface IStepStrategy {
+  value: number | string, // 5 或者 '5'
+  mode: 'strictly' | 'restore'
+}
+      `
+    }
   ]
 }
diff --git a/examples/sites/demos/mobile/app/popover/webdoc/popover.js b/examples/sites/demos/mobile/app/popover/webdoc/popover.js
index 3359fbac9e..c076db8d4c 100644
--- a/examples/sites/demos/mobile/app/popover/webdoc/popover.js
+++ b/examples/sites/demos/mobile/app/popover/webdoc/popover.js
@@ -1,6 +1,271 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'popover',
+      type: 'component',
+      props: [
+        {
+          name: 'append-to-body',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否添加到body上',
+            'en-US': 'Whether to add it to the body'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'arrow-offset',
+          type: 'number',
+          defaultValue: '0',
+          desc: {
+            'zh-CN': '弹出层的箭头偏移位置',
+            'en-US': "the layer's arrow offset "
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'close-delay',
+          type: 'number',
+          defaultValue: '200',
+          desc: {
+            'zh-CN': '触发方式为 hover 时的隐藏延迟，单位为毫秒',
+            'en-US': 'The close delay when the trigger mode is hover, in milliseconds'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'content',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '弹出层的内容',
+            'en-US': 'Layer Content.'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用',
+            'en-US': 'Whether the status is visible'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'listData',
+          type: 'Array | Object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>内容对象列表，对象字段包含：icon图片地址、label标题、subLabel子标题</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'maxHeight',
+          type: 'Number  | String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>最大高度</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'modelValue / v-model',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>状态是否可见</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'offset',
+          type: 'number',
+          defaultValue: '0',
+          desc: {
+            'zh-CN': '弹出层的偏移量',
+            'en-US': 'Layer offset'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'open-delay',
+          type: 'number',
+          defaultValue: '0',
+          desc: {
+            'zh-CN': '触发方式为 hover 时的显示延迟，单位为毫秒',
+            'en-US': 'The display delay when the trigger mode is hover, in milliseconds'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'placement',
+          typeAnchorName: 'IPopperPlacement',
+          type: 'IPopperPlacement',
+          defaultValue: "'bottom'",
+          desc: {
+            'zh-CN': '弹出层出现的位置',
+            'en-US': 'Layer Placement'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'popper-class',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '为弹出层添加类名',
+            'en-US': 'Add a class name for the pop-up layer.'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'popper-options',
+          type: 'IPopperOption',
+          typeAnchorName: 'IPopperOption',
+          defaultValue: '{}',
+          desc: {
+            'zh-CN': '弹出层参数',
+            'en-US': 'layer parameters; Refer to the description of IPopperOption'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'title',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '弹出层的标题',
+            'en-US': 'Layer Title'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'transform-origin',
+          type: 'Boolean | String',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '<p>组件的旋转中心点</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'transition',
+          type: 'string',
+          defaultValue: "'fade-in-linear'",
+          desc: {
+            'zh-CN': '定义渐变动画',
+            'en-US': 'Define gradient animation'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'trigger',
+          type: "'click' | 'focus' | 'hover' | 'manual'",
+          defaultValue: "'click'",
+          desc: {
+            'zh-CN': '触发方式',
+            'en-US': 'Trigger mode'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'visible-arrow',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示弹出层的箭头',
+            'en-US': "whether to show layer's arrow"
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'width',
+          type: "'auto' | number",
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '弹出层宽度',
+            'en-US': 'Layer width'
+          },
+          mobileDemo: 'base'
+        }
+      ],
+      events: [
+        {
+          name: 'after-enter',
+          type: '() =>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '进入的动画播放完毕后触发',
+            'en-US': 'This event is triggered after the animation is played.'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'after-leave',
+          type: '() =>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '离开的动画播放完毕后触发',
+            'en-US': 'Triggered after the hidden animation is played.'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'hide',
+          type: '() =>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '隐藏时触发',
+            'en-US': 'Triggered when hidden'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'show',
+          type: '() =>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '显示时触发',
+            'en-US': 'Triggered when display'
+          },
+          mobileDemo: 'base'
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '弹出层元素插槽',
+            'en-US': 'The layer element slot'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'reference',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '触发源元素插槽，该插槽是必传插槽。',
+            'en-US': "The layer's reference element slot"
+          },
+          mobileDemo: 'base'
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'base',
@@ -26,5 +291,29 @@ export default {
       },
       codeFiles: ['direction.vue']
     }
+  ],
+  types: [
+    {
+      name: 'IPopperOption',
+      type: 'interface',
+      code: `
+interface IPopperOption {
+  bubbling: boolean // 是否监听元素所有上级有滚动元素的scroll事件，监听到则更新popper的位置。用于解决某些弹出层位置在页面滚动时，位置不正确的场景，默认false
+  followReferenceHide: boolean // 当触发源隐藏时，自动隐藏弹出层，默认true
+  removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
+  updateHiddenPopperOnScroll: boolean  // 滚动过程中是否更新隐藏的弹出层位置
+  boundariesElement: 'viewport' | 'body' | HTMLElement // 滚动过程中,弹出层的碰撞边界。 默认值为： 'viewport'
+  ignoreBoundaries: boolean  // 忽略边界判断，弹出的位置始终是设置的 placement 值
+  scrollParent:  HTMLElement  // 指定滚动的父节点，优化级最高。 默认为null
+}
+      `
+    },
+    {
+      name: 'IPopperPlacement',
+      type: 'type',
+      code: `
+type IPopperPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
+      `
+    }
   ]
 }
diff --git a/examples/sites/demos/mobile/app/progress/webdoc/progress.js b/examples/sites/demos/mobile/app/progress/webdoc/progress.js
index 30ef4f2751..a16b7fab29 100644
--- a/examples/sites/demos/mobile/app/progress/webdoc/progress.js
+++ b/examples/sites/demos/mobile/app/progress/webdoc/progress.js
@@ -1,6 +1,99 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'progress',
+      type: 'component',
+      props: [
+        {
+          name: 'color',
+          typeAnchorName: 'IColorItem',
+          type: 'string | IColorItem[] | (percentage: string) => string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '进度条背景色（会覆盖 status 状态颜色）',
+            'en-US': 'Background color of the progress bar (overwrites the status color)'
+          },
+          mobileDemo: 'custom-color'
+        },
+        {
+          name: 'percentage',
+          type: 'number',
+          defaultValue: '0',
+          desc: {
+            'zh-CN': '百分比（必填）；该属性的可选值为 0-100',
+            'en-US': 'Percentage (mandatory) The optional values for this property are 0 - 100'
+          },
+          mobileDemo: 'dynamic-progress'
+        },
+        {
+          name: 'show-text',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示进度条文字内容',
+            'en-US': 'Display progress bar text'
+          },
+          mobileDemo: 'text-inside-or-no-text'
+        },
+        {
+          name: 'status',
+          type: "'success' | 'exception' | 'warning'",
+          defaultValue: '',
+          desc: {
+            'zh-CN': '进度条当前状态',
+            'en-US': 'Current status of the progress bar'
+          },
+          mobileDemo: 'progress-status'
+        },
+        {
+          name: 'stroke-width',
+          type: 'number',
+          defaultValue: '6',
+          desc: {
+            'zh-CN': 'line 类型进度条的宽度，单位 px',
+            'en-US': 'The width of the progress bar of type line, in px'
+          },
+          mobileDemo: 'progress-width'
+        },
+        {
+          name: 'text-inside',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '进度条显示文字内置在进度条内（只在 type=line 时可用）',
+            'en-US':
+              'The text displayed on the progress bar is embedded in the progress bar. This parameter is available only when type is set to line'
+          },
+          mobileDemo: 'format-text'
+        },
+        {
+          name: 'type',
+          type: "'line' | 'circle' | 'dashboard'",
+          defaultValue: "'line'",
+          desc: {
+            'zh-CN': '进度条类型',
+            'en-US': 'Progress bar type'
+          },
+          mobileDemo: 'progress-type'
+        },
+        {
+          name: 'width',
+          type: 'number',
+          defaultValue: '126',
+          desc: {
+            'zh-CN': '环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用）',
+            'en-US': 'Circular progress bar canvas width (available only when type is circle or dashboard)'
+          },
+          mobileDemo: 'width'
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: []
+    }
+  ],
   demos: [
     {
       demoId: 'progress-type',
@@ -147,5 +240,17 @@ export default {
       },
       codeFiles: ['width.vue']
     }
+  ],
+  types: [
+    {
+      name: 'IColorItem',
+      type: 'type',
+      code: `
+interface IColorItem {
+  color: string
+  percentage: number
+}
+`
+    }
   ]
 }
diff --git a/examples/sites/demos/mobile/app/pull-refresh/webdoc/pull-refresh.js b/examples/sites/demos/mobile/app/pull-refresh/webdoc/pull-refresh.js
index 24ca6c603f..1af7778e28 100644
--- a/examples/sites/demos/mobile/app/pull-refresh/webdoc/pull-refresh.js
+++ b/examples/sites/demos/mobile/app/pull-refresh/webdoc/pull-refresh.js
@@ -1,6 +1,145 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'pull-refresh ',
+      type: 'component',
+      props: [
+        {
+          name: 'disabled-pull-down',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>是否禁用下拉刷新</p>',
+            'en-US': 'disablde pull down'
+          },
+          mobileDemo: 'disabled-pull-down'
+        },
+        {
+          name: 'disabled-pull-up',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>是否禁用上拉</p>',
+            'en-US': 'disablded pull up'
+          },
+          mobileDemo: 'disabled-pull-up'
+        },
+        {
+          name: 'has-more',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '<p>是否有更多数据</p>',
+            'en-US': 'has more'
+          },
+          mobileDemo: 'has-more'
+        },
+        {
+          name: 'loosing-text',
+          type: 'string',
+          defaultValue: '释放即可刷新',
+          desc: {
+            'zh-CN': '<p>下拉高度大于等于head-height时的提示文字，默认为：释放即可刷新</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'loosing-text'
+        },
+        {
+          name: 'pull-down-loading-text',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>下拉加载文字</p>',
+            'en-US': 'pull down loading text'
+          },
+          mobileDemo: 'pulling-text'
+        },
+        {
+          name: 'pull-up-distance',
+          type: 'number',
+          defaultValue: '18',
+          desc: {
+            'zh-CN': '<p>触发上拉刷新的距离</p>',
+            'en-US': 'pull up distance'
+          },
+          mobileDemo: 'pull-up-distance'
+        },
+        {
+          name: 'pull-up-loading-text',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>上拉加载文字</p>',
+            'en-US': 'pull up loading text'
+          },
+          mobileDemo: 'pulling-text'
+        },
+        {
+          name: 'v-model',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>是否刷新状态，可以手动设置false来关闭刷新</p>',
+            'en-US': 'is refreshing'
+          },
+          mobileDemo: 'base'
+        }
+      ],
+      events: [
+        {
+          name: 'pull-down',
+          type: '(event: PullEvent) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>下拉时触发的事件</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'event'
+        },
+        {
+          name: 'pull-up',
+          type: '(event: PullEvent) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>上拉时触发的事件</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'event'
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'footer',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>上拉加载更多插槽</p>',
+            'en-US': 'pull up slot'
+          },
+          mobileDemo: 'pull-refresh-slot'
+        },
+        {
+          name: 'header',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>下拉刷新插槽</p>',
+            'en-US': 'pull down slot'
+          },
+          mobileDemo: ''
+        }
+      ]
+    },
+    {
+      name: 'pull-refresh',
+      type: 'component',
+      props: [],
+      events: [],
+      methods: [],
+      slots: []
+    }
+  ],
   demos: [
     {
       demoId: 'base',
diff --git a/examples/sites/demos/mobile/app/radio/webdoc/radio.js b/examples/sites/demos/mobile/app/radio/webdoc/radio.js
index 2999bfe977..b8e1c56517 100644
--- a/examples/sites/demos/mobile/app/radio/webdoc/radio.js
+++ b/examples/sites/demos/mobile/app/radio/webdoc/radio.js
@@ -1,6 +1,105 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'radio',
+      type: 'component',
+      props: [
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用',
+            'en-US': 'Disable'
+          },
+          mobileDemo: 'disabled'
+        },
+        {
+          name: 'label',
+          type: 'boolean | number | string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'radio 选中时的值',
+            'en-US': 'Value when radio is selected'
+          },
+          mobileDemo: 'label'
+        },
+        {
+          name: 'name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '原生 name 属性',
+            'en-US': 'Native name attribute'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'text',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '单选框文本内容',
+            'en-US': 'Radio Box Text Content'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'value',
+          type: 'object | string',
+          defaultValue: '{}',
+          desc: {
+            'zh-CN': '<p>绑定值，该属性默认为{}</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'base'
+        }
+      ],
+      events: [
+        {
+          name: 'change',
+          type: '(value: boolean | number | string) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '绑定值变化时触发的事件',
+            'en-US': 'Event triggered when the binding value changes'
+          },
+          mobileDemo: 'event'
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'radio 的默认插槽',
+            'en-US': 'Radio default slot'
+          },
+          mobileDemo: ''
+        }
+      ]
+    },
+    {
+      name: 'radio-group',
+      type: 'component',
+      props: [],
+      events: [],
+      methods: [],
+      slots: []
+    },
+    {
+      name: 'radio-button',
+      type: 'component',
+      props: [],
+      events: [],
+      methods: [],
+      slots: []
+    }
+  ],
   demos: [
     {
       demoId: 'base',
diff --git a/examples/sites/demos/mobile/app/search/webdoc/search.js b/examples/sites/demos/mobile/app/search/webdoc/search.js
index e2e8102d5b..6bf9d69405 100644
--- a/examples/sites/demos/mobile/app/search/webdoc/search.js
+++ b/examples/sites/demos/mobile/app/search/webdoc/search.js
@@ -1,6 +1,124 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'search',
+      type: 'component',
+      props: [
+        {
+          name: 'button-text',
+          type: 'string',
+          defaultValue: '搜索',
+          desc: {
+            'zh-CN': '<p>自定义搜索框按钮的文本内容，默认是‘搜索’</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'button-text'
+        },
+        {
+          name: 'placeholder',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '搜索输入框内的提示占位文本',
+            'en-US': 'Search for prompt placeholder text in the input box'
+          },
+          mobileDemo: 'button-text'
+        },
+        {
+          name: 'search-types',
+          typeAnchorName: 'ITypeValue',
+          type: 'ITypeValue[]',
+          defaultValue: '[]',
+          desc: {
+            'zh-CN': '搜索类型的选项列表',
+            'en-US': 'List of options for search types'
+          },
+          mobileDemo: 'default-value'
+        },
+        {
+          name: 'themeType',
+          type: 'string',
+          defaultValue: 'primary',
+          desc: {
+            'zh-CN': '<p>配置主题色，primary:蓝 gray:灰</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'v-model/value',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置搜索输入框内的默认搜索值</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'default-value'
+        }
+      ],
+      events: [
+        {
+          name: 'change',
+          typeAnchorName: 'ITypeValue',
+          type: '(value: ITypeValue, input: string) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '输入完成时触发的回调函数； value 为搜索类型，input 为当前输入值',
+            'en-US':
+              'The callback function triggered upon input completion; value is the search type, input is the current input value'
+          },
+          mobileDemo: 'events'
+        },
+        {
+          name: 'clear',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '清空值触发的回调函数',
+            'en-US': 'Callback function triggered by clearing values'
+          },
+          mobileDemo: 'clear'
+        },
+        {
+          name: 'search',
+          typeAnchorName: 'ITypeValue',
+          type: '(value: ITypeValue, input: string) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '展开模式下，点击搜索按钮时触发的回调函数； value 为搜索类型，input 为当前输入值',
+            'en-US':
+              'The callback function triggered when clicking the search button in expansion mode; value is the search type, input is the current input value'
+          },
+          mobileDemo: 'events'
+        },
+        {
+          name: 'select',
+          typeAnchorName: 'ITypeValue',
+          type: '(value: ITypeValue) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '切换类型时触发的回调函数； value 为搜索类型',
+            'en-US': 'The callback function triggered when switching types; value is a search type'
+          },
+          mobileDemo: 'clear'
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>自定义搜索框右侧内容</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: ''
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'base',
@@ -62,5 +180,16 @@ export default {
       },
       codeFiles: ['events.vue']
     }
+  ],
+  types: [
+    {
+      name: 'ITypeValue',
+      type: 'interface',
+      code: `
+interface ITypeValue {
+  text: string
+  value: number
+}`
+    }
   ]
 }
diff --git a/examples/sites/demos/mobile/app/slider/webdoc/slider.js b/examples/sites/demos/mobile/app/slider/webdoc/slider.js
index 9516dfb4f8..b42bffb248 100644
--- a/examples/sites/demos/mobile/app/slider/webdoc/slider.js
+++ b/examples/sites/demos/mobile/app/slider/webdoc/slider.js
@@ -1,6 +1,174 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'slider',
+      type: 'component',
+      props: [
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用',
+            'en-US': 'Disable'
+          },
+          mobileDemo: 'dynamic-disable'
+        },
+        {
+          name: 'format-tooltip',
+          type: '(currentValue: number) => string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '格式化 tooltip 提示',
+            'en-US': 'Format tooltip message'
+          },
+          mobileDemo: 'format-tooltip'
+        },
+        {
+          name: 'max',
+          type: 'number',
+          defaultValue: '100',
+          desc: {
+            'zh-CN': '设置最大值，必需是整数，可以负数，必需大于所设置的最小值',
+            'en-US':
+              'Set the maximum value. The value must be an integer and can be a negative number. The value must be greater than the minimum value set'
+          },
+          mobileDemo: 'max-min'
+        },
+        {
+          name: 'min',
+          type: 'number',
+          defaultValue: '0',
+          desc: {
+            'zh-CN': '设置最小值',
+            'en-US': 'Set the minimum value'
+          },
+          mobileDemo: 'max-min'
+        },
+        {
+          name: 'num-pages',
+          type: 'number',
+          defaultValue: '1',
+          desc: {
+            'zh-CN': '设置总步数，即按快捷键 PageDown/PageUp 时，每次移动的距离是 "⌈(max-min)/num-pages⌉"',
+            'en-US':
+              'Set the total number of steps. That is, when you press PageDown or PageUp, the moving distance is "⌈(max-min)/num-pages⌉".'
+          },
+          mobileDemo: 'shortcut-operation'
+        },
+        {
+          name: 'range',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>是否为范围选择</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'show-input',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否显示输入框',
+            'en-US': 'Indicates whether to display the text box.'
+          },
+          mobileDemo: 'show-input'
+        },
+        {
+          name: 'show-tip',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示 tooltip',
+            'en-US': 'Whether to display tooltip'
+          },
+          mobileDemo: 'show-tip'
+        },
+        {
+          name: 'step',
+          type: 'number',
+          defaultValue: '1',
+          desc: {
+            'zh-CN': '设置滑块移动时，每步位移距离，必需是大于0的正整数',
+            'en-US':
+              'Displacement distance of each step when the slider moves. The value must be a positive integer greater than 0'
+          },
+          mobileDemo: 'about-step'
+        },
+        {
+          name: 'value',
+          type: 'Number | Array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置单滑块的当前值，必需是整数或数组。</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'vertical',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否竖向模式',
+            'en-US': 'Whether the vertical mode is used'
+          },
+          mobileDemo: 'vertical-mode'
+        }
+      ],
+      events: [
+        {
+          name: 'change',
+          type: '(value: number | [number, number]) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）',
+            'en-US':
+              'Triggered when the value changes (When you drag the mouse, it is triggered only after you release the mouse).'
+          },
+          mobileDemo: 'slider-event-change'
+        },
+        {
+          name: 'start',
+          type: '(event: Event, value: number | [number, number]) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置滑块滑动开始时，触发该事件',
+            'en-US': 'This event is triggered when the slider starts to slide.'
+          },
+          mobileDemo: 'slider-event-start'
+        },
+        {
+          name: 'stop',
+          type: '(value: number | [number, number]) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置滑块滑动结束时，触发该事件',
+            'en-US': 'This event is triggered when the slider sliding ends. '
+          },
+          mobileDemo: 'slider-event-stop'
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '显示滑块值的插槽，仅仅 v-model 是单数值时才有效，插槽参数为：slotArg: { slotScope: number }',
+            'en-US':
+              'Slot for displaying slider values, valid only if v-model is a single value. Slot parameters are: slotArg: {slotScope: number}'
+          },
+          mobileDemo: ''
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'about-step',
diff --git a/examples/sites/demos/mobile/app/switch/webdoc/switch.js b/examples/sites/demos/mobile/app/switch/webdoc/switch.js
index 8b92dd12da..2f1df74296 100644
--- a/examples/sites/demos/mobile/app/switch/webdoc/switch.js
+++ b/examples/sites/demos/mobile/app/switch/webdoc/switch.js
@@ -1,6 +1,78 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'switch',
+      type: 'component',
+      props: [
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用',
+            'en-US': 'Disable'
+          },
+          mobileDemo: 'disabled'
+        },
+        {
+          name: 'false-value',
+          type: 'boolean | string | number',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': 'switch 关闭时的值',
+            'en-US': 'Value when switch is disabled'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'mini',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '设置是否显示为 mini 模式，mini 模式下不会显示 slot 的内容',
+            'en-US': 'Sets whether to display in mini mode. In mini mode, the content of the slot is not displayed'
+          },
+          mobileDemo: 'mini'
+        },
+        {
+          name: 'true-value',
+          type: 'boolean | string | number',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'switch 打开时的值',
+            'en-US': 'Value when switch is enabled'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'v-model',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>绑定值</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'base'
+        }
+      ],
+      events: [
+        {
+          name: 'change',
+          type: '(value: boolean | string | number) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'switch 状态发生变化时的回调函数',
+            'en-US': 'Callback function for switch changes'
+          },
+          mobileDemo: 'event'
+        }
+      ],
+      methods: [],
+      slots: []
+    }
+  ],
   demos: [
     {
       demoId: 'base',
diff --git a/examples/sites/demos/mobile/app/tabbar/webdoc/tabbar.js b/examples/sites/demos/mobile/app/tabbar/webdoc/tabbar.js
index b295ca87cd..734f675621 100644
--- a/examples/sites/demos/mobile/app/tabbar/webdoc/tabbar.js
+++ b/examples/sites/demos/mobile/app/tabbar/webdoc/tabbar.js
@@ -1,6 +1,106 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'Tabbar',
+      type: 'component',
+      props: [
+        {
+          name: 'active-color',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>选中标签的颜色</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'active-inactive-color'
+        },
+        {
+          name: 'border',
+          type: 'boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>是否显示外边框，该属性默认为true</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'border'
+        },
+        {
+          name: 'fixed',
+          type: 'Boolen',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>是否固定在底部，该属性默认为true</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'border'
+        },
+        {
+          name: 'inactive-color',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>未选中标签的颜色</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'active-inactive-color'
+        },
+        {
+          name: 'route',
+          type: 'boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>是否开启路由模式，该属性默认为false</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'route'
+        },
+        {
+          name: 'z-index',
+          type: 'Number | String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>元素 z-index</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'border'
+        }
+      ],
+      events: [
+        {
+          name: 'change',
+          type: 'Function()',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>切换标签时触发,value: 当前选中标签的名称或索引值</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'event-change'
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'icon',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>自定义图标</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'slot-icon'
+        }
+      ]
+    },
+    {
+      name: 'TabbarItem',
+      type: 'component',
+      props: [],
+      events: [],
+      methods: [],
+      slots: []
+    }
+  ],
   demos: [
     {
       demoId: 'onlytext',
diff --git a/examples/sites/demos/mobile/app/table/webdoc/table.js b/examples/sites/demos/mobile/app/table/webdoc/table.js
index 9e60187408..e284232c71 100644
--- a/examples/sites/demos/mobile/app/table/webdoc/table.js
+++ b/examples/sites/demos/mobile/app/table/webdoc/table.js
@@ -1,6 +1,67 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'Table',
+      type: 'component',
+      props: [
+        {
+          name: 'columns',
+          type: '[]',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>列数据</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'data',
+          type: '[]',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>表格数据</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'defaultChecked',
+          type: '[]',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>默认选中项</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'keys',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>数据标识</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>表格宽度</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'base'
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: []
+    }
+  ],
   demos: [
     {
       demoId: 'base',
diff --git a/examples/sites/demos/mobile/app/tabs/webdoc/tabs.js b/examples/sites/demos/mobile/app/tabs/webdoc/tabs.js
index 0b4ffabb94..a6d9f808fb 100644
--- a/examples/sites/demos/mobile/app/tabs/webdoc/tabs.js
+++ b/examples/sites/demos/mobile/app/tabs/webdoc/tabs.js
@@ -1,6 +1,172 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'tabs',
+      type: 'component',
+      props: [
+        {
+          name: 'active-color',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '当前页签的字体颜色',
+            'en-US': 'active tab color'
+          },
+          mobileDemo: 'active-color'
+        },
+        {
+          name: 'active-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置初始选中的页签项',
+            'en-US': 'Set initially selected label items'
+          },
+          mobileDemo: 'active-name'
+        },
+        {
+          name: 'before-leave',
+          type: '(activeName: string, oldActiveName: string) => boolean | Promise',
+          defaultValue: '',
+          desc: {
+            'zh-CN':
+              '切换页签项之前的钩子，若返回 false 或返回 Promise 且被 reject，则阻止切换； activeName: 即将切换的页签项名称, oldActiveName: 当前页签项名称',
+            'en-US':
+              'The hook before the tag is switched. If false is returned or Promise is returned and rejected, the switch is blocked; ActiveName: The name of the label item that is about to be switched, oldActiveName: The name of the current label item'
+          },
+          mobileDemo: 'before-leave'
+        },
+        {
+          name: 'expand-tabs-mode',
+          type: 'string',
+          defaultValue: 'columns',
+          desc: {
+            'zh-CN': '展开内容的排列方式，可选值 column：为单列，columns：为多列',
+            'en-US':
+              "The arrangement of content can be displayed in either a single column format, which is referred to as 'column', or in multiple columns, which is referred to as 'columns'."
+          },
+          mobileDemo: 'expend'
+        },
+        {
+          name: 'expand-tabs-title',
+          type: 'string',
+          defaultValue: '请选择',
+          desc: {
+            'zh-CN': '展开内容的标题',
+            'en-US': 'Expand Content Title'
+          },
+          mobileDemo: 'expend'
+        },
+        {
+          name: 'show-expand-tabs',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '页签可展开',
+            'en-US': 'tabs expandable'
+          },
+          mobileDemo: 'expend'
+        },
+        {
+          name: 'swipeable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '滑动页签内容切换页签',
+            'en-US': 'slide tab content to switch tab'
+          },
+          mobileDemo: 'swipe'
+        },
+        {
+          name: 'v-model / modelValue',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '选中选项卡的 name',
+            'en-US': 'the name of the selected item'
+          },
+          mobileDemo: 'basic-usage'
+        },
+        {
+          name: 'with-add',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否显示添加按钮，用来添加页签项',
+            'en-US': 'Do you want to display the add button to add tab item'
+          },
+          mobileDemo: 'add-delete-tab'
+        },
+        {
+          name: 'with-close',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否显示页签项的关闭按钮，用来删除页签项',
+            'en-US': 'Do you want to display the close button for label items to delete them'
+          },
+          mobileDemo: 'add-delete-tab'
+        }
+      ],
+      events: [
+        {
+          name: 'add',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '点击"添加"按钮后触发，用于编写增加页签项的逻辑',
+            'en-US': 'Triggered after clicking the "Add" button, used to write logic for adding tab items'
+          },
+          mobileDemo: 'tabs-events'
+        },
+        {
+          name: 'click',
+          type: '(TabItem: Component, event: Event) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '点击页签项时触发，tab 被选中时触发； TabItem: 点中页签项的vueComponent对象信息',
+            'en-US':
+              'Trigger an event when clicking on a tab item, Triggered when tab is selected; TabItem: Click on the Component object information of the tab item in the middle'
+          },
+          mobileDemo: 'tabs-events'
+        },
+        {
+          name: 'close',
+          type: '(name: string) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '点击页签项关闭按钮后触发，用于编写删除页签项的逻辑； name: 要删除的页签项name值',
+            'en-US':
+              'Triggered after clicking the tab item close button, used to write logic for deleting tab items; name: The name value of the tab item to be deleted'
+          },
+          mobileDemo: 'tabs-events'
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '默认插槽',
+            'en-US': 'default slot'
+          },
+          mobileDemo: 'basic-usage'
+        }
+      ]
+    },
+    {
+      name: 'tab-item',
+      type: 'component',
+      props: [],
+      events: [],
+      methods: [],
+      slots: []
+    }
+  ],
   demos: [
     {
       demoId: 'basic-usage',
diff --git a/examples/sites/demos/mobile/app/tag/webdoc/tag.js b/examples/sites/demos/mobile/app/tag/webdoc/tag.js
index 248b692a88..0893538c02 100644
--- a/examples/sites/demos/mobile/app/tag/webdoc/tag.js
+++ b/examples/sites/demos/mobile/app/tag/webdoc/tag.js
@@ -1,6 +1,80 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'tag',
+      type: 'component',
+      props: [
+        {
+          name: 'color',
+          type: 'IColor | string[]',
+          typeAnchorName: 'IColor',
+          defaultValue: '',
+          desc: {
+            'zh-CN':
+              '控制标签文本色和背景色，可使用 IColor 类型中的预设值，也可自定义值，若自定义值为字符串则只能设置标签的背景色；若为数组则第一个值设置背景色，第二个设置文本色；【注：3.15.0新增支持数组类型】',
+            'en-US':
+              'Control the text color and background color of the label. You can use the preset value in the IColor type or customize the value. If the customized value is a character string, you can only set the background color of the label. If it is an array, the first value sets the background color and the second sets the text color. [Note: The array type is supported in 3.15.0]'
+          },
+          mobileDemo: 'different-color'
+        },
+        {
+          name: 'max-width',
+          type: 'string | number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '最大宽度',
+            'en-US': 'max width'
+          },
+          mobileDemo: 'max-width'
+        },
+        {
+          name: 'mini',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '小尺寸',
+            'en-US': 'mini'
+          },
+          mobileDemo: 'mini'
+        },
+        {
+          name: 'text',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '文字',
+            'en-US': 'Text'
+          },
+          mobileDemo: 'basic-usage'
+        },
+        {
+          name: 'theme',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '彩色标签，该属性的可选值为 pink、purple、cyan',
+            'en-US': 'Color label. The value can be pink, purple, or cyan.'
+          }
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '标签内容',
+            'en-US': 'Label Content'
+          },
+          mobileDemo: 'slot-default'
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'basic-usage',
@@ -50,5 +124,14 @@ export default {
       },
       codeFiles: ['mini.vue']
     }
+  ],
+  types: [
+    {
+      name: 'IColor',
+      type: 'type',
+      code: `
+type IColor = 'red' | 'orange' | 'green' | 'blue' | 'purple' | 'brown' | 'grey' | string // 除了预设值，也可以是其他任意自定义颜色值
+`
+    }
   ]
 }
diff --git a/examples/sites/demos/mobile/app/timeline/webdoc/timeline.js b/examples/sites/demos/mobile/app/timeline/webdoc/timeline.js
index dbde4016a5..6c7488af05 100644
--- a/examples/sites/demos/mobile/app/timeline/webdoc/timeline.js
+++ b/examples/sites/demos/mobile/app/timeline/webdoc/timeline.js
@@ -1,6 +1,193 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'TimeLine',
+      type: 'component',
+      props: [
+        {
+          name: 'active',
+          type: 'number',
+          defaultValue: '1',
+          desc: {
+            'zh-CN': '<p>设置步骤条的选中步骤</p>',
+            'en-US': 'Is show right text'
+          },
+          mobileDemo: 'different-data'
+        },
+        {
+          name: 'data',
+          type: 'Array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置时间线步骤条数据',
+            'en-US': 'data'
+          },
+          mobileDemo: 'different-data'
+        },
+        {
+          name: 'horizontal',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>是否为横向步骤条</p>',
+            'en-US': 'Is show right text'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'name-field',
+          type: 'string',
+          defaultValue: 'name',
+          desc: {
+            'zh-CN': '<p>设置节点信息中名称对应的字段名</p>',
+            'en-US': 'Is show left arrow'
+          },
+          mobileDemo: 'different-data'
+        },
+        {
+          name: 'reverse',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>设置竖向步骤条的方向</p>',
+            'en-US': 'Is show right text'
+          },
+          mobileDemo: 'mobileTimeLine'
+        },
+        {
+          name: 'show-number',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '<p>设置未完成的状态是否显示序号',
+            'en-US': 'data'
+          },
+          mobileDemo: 'different-data'
+        },
+        {
+          name: 'showStatus',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>是否展示状态文字</p>',
+            'en-US': 'Is show right text'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'space',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置步骤条的宽度</p>',
+            'en-US': 'Is show right arrow'
+          },
+          mobileDemo: 'space'
+        },
+        {
+          name: 'start',
+          type: 'start',
+          defaultValue: '1',
+          desc: {
+            'zh-CN': '<p>设置步骤条序号起始值</p>',
+            'en-US': 'Is show left arrow'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'time-field',
+          type: 'string',
+          defaultValue: 'time',
+          desc: {
+            'zh-CN': '<p>设置节点时间信息对应的字段名</p>',
+            'en-US': 'Is show right text'
+          },
+          mobileDemo: 'different-data'
+        },
+        {
+          name: 'vertical',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>竖式步骤条</p>',
+            'en-US': 'Is show right text'
+          },
+          mobileDemo: 'steps'
+        }
+      ],
+      events: [
+        {
+          name: 'click',
+          type: 'Function(arg1,arg2)',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>节点的点击事件;arguments: arg1:点击节点的下标, arg2:{ name: 节点名称, time: 时间 }</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'mobileTimeLine'
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'bottom',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>定义横向步骤条底部</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'conternt',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>定义竖向步骤条内容</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'header',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>定义竖向步骤条头部内容</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: ''
+        },
+        {
+          name: 'left',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>定义步骤条左侧内容</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'slot'
+        },
+        {
+          name: 'right',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>定义步骤条右侧内容</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: 'slot'
+        },
+        {
+          name: 'top',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>定义横向步骤条顶部</p>',
+            'en-US': 'Click'
+          },
+          mobileDemo: ''
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'different-data',
diff --git a/examples/sites/demos/mobile/app/toast/webdoc/toast.js b/examples/sites/demos/mobile/app/toast/webdoc/toast.js
index 14fcbef18a..29744e1267 100644
--- a/examples/sites/demos/mobile/app/toast/webdoc/toast.js
+++ b/examples/sites/demos/mobile/app/toast/webdoc/toast.js
@@ -1,6 +1,68 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'Toast',
+      type: 'component',
+      props: [
+        {
+          name: 'text',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>展示的文本</p>',
+            'en-US': 'display text'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'time',
+          type: 'number',
+          defaultValue: '2000',
+          desc: {
+            'zh-CN': '<p>展示持续时间，单位：ms</p>',
+            'en-US': 'display times'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'type',
+          type: 'string',
+          defaultValue: 'text',
+          desc: {
+            'zh-CN': '<p>类型， text：纯文本 correct：成功 error：失败</p>',
+            'en-US': 'type'
+          },
+          mobileDemo: 'base'
+        },
+        {
+          name: 'zIndex',
+          type: 'number',
+          defaultValue: '100',
+          desc: {
+            'zh-CN': '<p>弹框层级</p>',
+            'en-US': ''
+          },
+          mobileDemo: 'base'
+        }
+      ],
+      events: [],
+      methods: [
+        {
+          name: 'timeout',
+          type: 'Function',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>消失前的回调</p>',
+            'en-US': ''
+          },
+          mobileDemo: 'base'
+        }
+      ],
+      slots: []
+    }
+  ],
   demos: [
     {
       demoId: 'base',
diff --git a/examples/sites/demos/mobile/app/user-head/webdoc/user-head.js b/examples/sites/demos/mobile/app/user-head/webdoc/user-head.js
index c868ef1bc8..430bd578e5 100644
--- a/examples/sites/demos/mobile/app/user-head/webdoc/user-head.js
+++ b/examples/sites/demos/mobile/app/user-head/webdoc/user-head.js
@@ -1,6 +1,129 @@
 export default {
   column: '2',
   owner: '',
+  apis: [
+    {
+      name: 'user-head',
+      type: 'component',
+      props: [
+        {
+          name: 'backgroundColor',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置背景色</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'custom-background-color'
+        },
+        {
+          name: 'color',
+          type: 'string',
+          defaultValue: "'#ffffff'",
+          desc: {
+            'zh-CN': '文字颜色',
+            'en-US': 'Text color'
+          },
+          mobileDemo: 'color'
+        },
+        {
+          name: 'messageTotal',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>右上角消息计数</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'message-count-limit'
+        },
+        {
+          name: 'messageType',
+          type: 'string',
+          defaultValue: 'details',
+          desc: {
+            'zh-CN': '<p>右上角消息提醒类型，basic显示小圆点不显示消息数量</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'message-count-type'
+        },
+        {
+          name: 'messageUpperLimit',
+          type: 'number',
+          defaultValue: '0',
+          desc: {
+            'zh-CN': '<p>右上角消息显示上限</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'message-count-limit'
+        },
+        {
+          name: 'min',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '小尺寸模式',
+            'en-US': 'Small size mode'
+          },
+          mobileDemo: 'min-user-head'
+        },
+        {
+          name: 'round',
+          type: 'boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '圆形模式',
+            'en-US': 'Circular mode'
+          },
+          mobileDemo: 'round-user-head'
+        },
+        {
+          name: 'size',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置头像尺寸</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'basic-usage'
+        },
+        {
+          name: 'type',
+          type: 'string',
+          defaultValue: "'label'",
+          desc: {
+            'zh-CN': '头像类型，icon|image|label 可选',
+            'en-US':
+              'Avatar type. The options are icon, image, and label. ;The value of this attribute can be icon / image / label'
+          },
+          mobileDemo: 'basic-usage'
+        },
+        {
+          name: 'v-model/modelValue',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设type=icon 时为图标类名，type=label时为字体串，type=image时为资源路径</p>',
+            'en-US': 'display different button'
+          },
+          mobileDemo: 'basic-usage'
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义图像内容',
+            'en-US': 'Customized image content'
+          },
+          mobileDemo: 'round-user-head'
+        }
+      ]
+    }
+  ],
   demos: [
     {
       demoId: 'basic-usage',

From 1f42566d319d5370a43f3074b0382f642f589d46 Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Sun, 26 Jan 2025 16:02:44 +0800
Subject: [PATCH 15/15] fix: delete faq logic

---
 .../sites/src/views/components/cmp-config.js  |  8 +--
 .../sites/src/views/components/components.vue | 52 ++++++-------------
 2 files changed, 18 insertions(+), 42 deletions(-)

diff --git a/examples/sites/src/views/components/cmp-config.js b/examples/sites/src/views/components/cmp-config.js
index 8bd62cf5be..7df82ee025 100644
--- a/examples/sites/src/views/components/cmp-config.js
+++ b/examples/sites/src/views/components/cmp-config.js
@@ -23,12 +23,6 @@ const languageMap = {
   sass: 'css'
 }
 
-// 只有select组件需要select.faq.cn.md
-const faqMdConfig = {
-  // TODO: 找不到select的问答md,先关闭
-  // select: true
-}
-
 const getWebdocPath = (path) => {
   if (path?.startsWith('grid-') && path !== 'grid-select') {
     return 'grid'
@@ -43,4 +37,4 @@ const getWebdocPath = (path) => {
 
 const staticDemoPath = '@demos/app'
 
-export { languageMap, faqMdConfig, vueComponents, getWebdocPath, staticDemoPath }
+export { languageMap, vueComponents, getWebdocPath, staticDemoPath }
diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index f543c13382..1366981d47 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -2,7 +2,7 @@
   <!-- 一个组件的文档:  描述md + demos + apis -->
   <header class="flex-horizontal docs-header">
     <div class="docs-title-wrap">
-      <div class="markdown-body markdown-top-body" size="medium" v-html="state.cmpTopMd"></div>
+      <div class="markdown-body markdown-top-body" v-html="state.cmpTopMd"></div>
       <version-tip
         v-if="state.currJson.meta || state.currJson.versionTipOption"
         :meta="state.currJson.meta"
@@ -194,8 +194,6 @@
         </div>
       </div>
 
-      <h2 id="FAQ" v-if="state.cmpFAQMd" class="ti-f30 ti-fw-normal ti-mt28 ti-mb20">FAQ</h2>
-      <div class="markdown-body" v-html="state.cmpFAQMd"></div>
       <div v-if="state.currJson.owner" class="ti-abs ti-right24 ti-top24" @click="copyText(state.currJson.owner)">
         {{ i18nByKey('doc-owner') }} : {{ state.currJson.owner }}
       </div>
@@ -210,13 +208,13 @@ import { useRoute } from 'vue-router'
 import { marked } from 'marked'
 import hljs from 'highlight.js'
 import {
-  Anchor as TinyAnchor,
-  ButtonGroup as TinyButtonGroup,
-  Grid as TinyGrid,
-  GridColumn as TinyGridColumn,
-  Tabs as TinyTabs,
-  TabItem as TinyTabItem,
-  Tooltip as TinyTooltip
+  TinyAnchor,
+  TinyButtonGroup,
+  TinyGrid,
+  TinyGridColumn,
+  TinyTabs,
+  TinyTabItem,
+  TinyTooltip
 } from '@opentiny/vue'
 import { iconOuterLink } from '@opentiny/vue-icon'
 import debounce from '@opentiny/vue-renderless/common/deps/debounce'
@@ -224,7 +222,7 @@ import { i18nByKey, getWord, $clone, fetchDemosFile, useApiMode, useTemplateMode
 import DemoBox from '@/views/components/demo'
 import demoConfig from '@demos/config.js'
 import { router } from '@/router.js'
-import { faqMdConfig, getWebdocPath } from './cmp-config'
+import { getWebdocPath } from './cmp-config'
 import AsyncHighlight from './async-highlight.vue'
 import VersionTip from './VersionTip.vue'
 
@@ -247,7 +245,6 @@ const state = reactive({
   observer: null,
   currJson: { column: 1, demos: [], apis: [], types: {} },
   cmpTopMd: null,
-  cmpFAQMd: null,
   currDemoId: '',
   demoAnchorLinks: computed(() => {
     const links =
@@ -256,13 +253,6 @@ const state = reactive({
         title: demo.name[state.langKey],
         link: `#${demo.demoId}`
       })) || []
-    if (state.cmpFAQMd) {
-      links.push({
-        key: 'FAQ',
-        title: 'FAQ',
-        link: '#FAQ'
-      })
-    }
     return links
   }),
   iframeUrl: '',
@@ -349,7 +339,7 @@ const demoMounted = () => {
   }
 }
 
-const getIframeConetent = (demoId, demoName) => {
+const getIframeContent = (demoId, demoName) => {
   const frameWindow = iframeRef.value.contentWindow
   frameWindow.postMessage({ from: 'tiny-vue-site', component: state.cmpId, demo: demoName })
   router.push(`#${demoId}`)
@@ -357,7 +347,7 @@ const getIframeConetent = (demoId, demoName) => {
 
 const getIframeDemo = (demo) => {
   if (demo?.codeFiles.length > 0) {
-    getIframeConetent(demo.demoId, demo.codeFiles[0])
+    getIframeContent(demo.demoId, demo.codeFiles[0])
     jumpToMobileDemoAndHash(demo.demoId)
     state.currDemoId = demo.demoId
   }
@@ -551,14 +541,8 @@ const loadPage = debounce(templateModeState.isSaas ? 100 : 0, false, () => {
     promiseArr[1] = fetchDemosFile(`${staticPath.value}/${getWebdocPath(state.cmpId)}/webdoc/${state.cmpId}.js`)
   }
 
-  if (faqMdConfig[state.cmpId]) {
-    promiseArr.push(
-      fetchDemosFile(`${staticPath.value}/${getWebdocPath(state.cmpId)}/webdoc/${state.cmpId}.faq.${lang}.md`)
-    )
-  }
-
   Promise.all(promiseArr)
-    .then(([mdData, jsData, apiData, faqData]) => {
+    .then(([mdData, jsData, apiData]) => {
       // 1、加载顶部md
       state.cmpTopMd = marked(mdData, {
         gfm: true,
@@ -568,11 +552,6 @@ const loadPage = debounce(templateModeState.isSaas ? 100 : 0, false, () => {
         }
       })
 
-      // 2、加载faq.md
-      if (faqData) {
-        state.cmpFAQMd = marked(faqData)
-      }
-
       // 3、加载cmpId.js 文件
       // eslint-disable-next-line no-eval
       const json = jsData ? eval('(' + jsData.slice(15) + ')') : {}
@@ -590,10 +569,13 @@ const loadPage = debounce(templateModeState.isSaas ? 100 : 0, false, () => {
 
       if (apiData) {
         // eslint-disable-next-line no-eval
-        const apiJson = eval('(' + apiData.slice(15) + ')')
+        let apiJson = eval('(' + apiData.slice(15) + ')')
         // pc、mobile、mobile-first三种模式
         const demoMode = templateModeState.isSaas ? templateModeState.mode : import.meta.env.VITE_APP_MODE
         const demoKey = demoMode === 'mobile-first' ? 'mfDemo' : `${demoMode}Demo`
+        if (demoMode === 'mobile') {
+          apiJson = json
+        }
         state.currJson.apis = apiJson.apis.map((item) => {
           Object.keys(item).forEach((key) => {
             const apiItem = item[key]
@@ -742,7 +724,7 @@ const handleAnchorClick = (e, data) => {
   if (demoConfig.isMobile) {
     // 点击目录列表更新iframe显示
     const hashId = data.link.slice(1)
-    getIframeConetent(state.cmpId, hashId + '.vue')
+    getIframeContent(state.cmpId, hashId + '.vue')
   }
 
   if (apiModeState.demoMode === 'single' && data.link.startsWith('#')) {