fix(mobile-first): fix mobile-first components bugs (#1426)

opentiny · Feb 26, 2024 · c761831 · c761831
1 parent f08fb98
commit c761831
Show file tree

Hide file tree

Showing 605 changed files with 11,117 additions and 5,517 deletions.
diff --git a/examples/docs/newsrc/mobile-first.vue b/examples/docs/newsrc/mobile-first.vue
@@ -25,6 +25,7 @@
         <!-- 预览 -->
         <!-- modeState.demoId === 'preview-in-dialog' 修复preview-in-dialog demo弹窗内容被遮罩层遮挡 -->
         <div
+          :id="state.currDemo?.demoId"
           class="rel px20 minh200"
           :style="{ transform: modeState.demoId === 'preview-in-dialog' ? '' : 'translateX(0)' }"
         >
@@ -34,8 +35,7 @@
         </div>
       </div>
       <!-- API表格 -->
-      <div v-if="state.currApi.length" class="mt20 f24 fw-bold">组件API</div>
-
+      <div v-if="state.currApi?.length" class="mt20 f24 fw-bold">组件API</div>
       <div v-for="(oneGroup, idx) in state.currApi" :key="idx">
         <div class="mt20 f-r f-pos-start fw-bold">
           <div :id="oneGroup.name" class="f18">
@@ -53,8 +53,8 @@
             <table class="api-table">
               <thead>
                 <tr>
-                  <th width="15%">名称</th>
-                  <th width="20%">类型</th>
+                  <th width="20%">名称</th>
+                  <th width="15%">类型</th>
                   <th width="20%">默认值</th>
                   <th width="55%">说明</th>
                 </tr>
@@ -102,10 +102,11 @@
 import { hooks } from '@opentiny/vue-common'
 import { Floatbar, TreeMenu, Button, Tooltip, ConfigProvider } from '@opentiny/vue'
 import { iconStarActive, iconSelect } from '@opentiny/vue-icon'
-import { menuData, apis, demoStr, demoVue, mds } from './resourceMobileFirst.js'
-import { useModeCtx } from './uses'
 import designAuroraConfig from '@opentiny/vue-design-aurora'
 import designSaasConfig from '@opentiny/vue-design-saas'
+import { menuData, demos, demoStr, demoVue, mds } from './resourceMobileFirst.js'
+import { useModeCtx } from './uses'
+import { getDemosConfig, getApisConfig } from './utils/componentsDoc'
 
 const isSaasMode = process.env.VITE_TINY_THEME === 'saas'
 
@@ -165,18 +166,12 @@ export default {
 
     // 以下私有方法，无须传递给vue模板的。
     async function _switchPath() {
-      // 查找API
-      const apiModule = apis[`../../sites/demos/mobile-first/app/${modeState.pathName}/webdoc/${modeState.pathName}.js`]
-      if (apiModule) {
-        const module = await apiModule()
-        const apiRoot = module.default
-        state.currApi = apiRoot.apis
-        state.demos = apiRoot.demos || []
-        state.currDemo = state.demos.find((d) => d.demoId === modeState.demoId) || state.demos?.[0]
-      } else {
-        state.currApi = null
-        state.currDemos = []
-      }
+      const demosModule =
+        demos[`../../sites/demos/mobile-first/app/${modeState.pathName}/webdoc/${modeState.pathName}.js`]
+      const demosConfig = await getDemosConfig(demosModule)
+      state.demos = demosConfig.demos
+      state.currDemo = state.demos.find((d) => d.demoId === modeState.demoId) || state.demos?.[0]
+      state.currApi = (await getApisConfig(modeState.pathName, 'mobile-first')).apis
       await _switchDemo()
     }
     async function _switchDemo() {

diff --git a/examples/docs/newsrc/mobile.vue b/examples/docs/newsrc/mobile.vue
@@ -22,7 +22,7 @@
           <div v-html="state.currDemo?.desc['zh-CN']"></div>
         </div>
         <!-- 预览 -->
-        <div class="rel px20">
+        <div class="rel px20" :id="state.currDemo?.demoId">
           <div class="phone-container" @dblclick="fn.openInVscode(state.currDemo)">
             <div class="mobile-view-container">
               <component :is="state.comp"></component>
@@ -31,8 +31,7 @@
         </div>
       </div>
       <!-- API表格 -->
-      <div v-if="state.currApi.length" class="mt20 f24 fw-bold">组件API</div>
-
+      <div v-if="state.currApi?.length" class="mt20 f24 fw-bold">组件API</div>
       <div v-for="(oneGroup, idx) in state.currApi" :key="idx">
         <div class="mt20 f-r f-pos-start fw-bold">
           <div :id="oneGroup.name" class="f18">
@@ -47,12 +46,11 @@
             <div class="f18 py28">
               {{ key }}
             </div>
-
             <table class="api-table">
               <thead>
                 <tr>
-                  <th width="15%">名称</th>
-                  <th width="20%">类型</th>
+                  <th width="20%">名称</th>
+                  <th width="15%">类型</th>
                   <th width="20%">默认值</th>
                   <th width="55%">说明</th>
                 </tr>
@@ -76,7 +74,7 @@
       </div>
     </div>
     <!-- 右边浮动所有的demos -->
-    <tiny-floatbar v-if="state.demos.length > 0" class="!top120 !z1 !right25">
+    <tiny-floatbar v-if="state.demos?.length > 0" class="!top120 !z1 !right25">
       <div class="f12 ofy-auto">
         <div
           v-for="demo in state.demos"
@@ -100,8 +98,9 @@
 import { hooks } from '@opentiny/vue-common'
 import { Floatbar, TreeMenu, Button, Tooltip } from '@opentiny/vue'
 import { iconStarActive, iconSelect } from '@opentiny/vue-icon'
-import { menuData, apis, demoStr, demoVue, mds } from './resourceMobile.js'
+import { menuData, demos, demoStr, demoVue, mds } from './resourceMobile.js'
 import { useModeCtx } from './uses'
+import { getDemosConfig, getApisConfig } from './utils/componentsDoc'
 
 export default {
   props: {
@@ -157,18 +156,11 @@ export default {
 
     // 以下私有方法，无须传递给vue模板的。
     async function _switchPath() {
-      // 查找API
-      const apiModule = apis[`../../sites/demos/mobile/app/${modeState.pathName}/webdoc/${modeState.pathName}.js`]
-      if (apiModule) {
-        const module = await apiModule()
-        const apiRoot = module.default
-        state.currApi = apiRoot.apis
-        state.demos = apiRoot.demos || []
-        state.currDemo = state.demos.find((d) => d.demoId === modeState.demoId) || state.demos?.[0]
-      } else {
-        state.currApi = null
-        state.currDemos = []
-      }
+      const demosModule = demos[`../../sites/demos/mobile/app/${modeState.pathName}/webdoc/${modeState.pathName}.js`]
+      const demosConfig = await getDemosConfig(demosModule)
+      state.demos = demosConfig.demos
+      state.currDemo = state.demos.find((d) => d.demoId === modeState.demoId) || state.demos?.[0]
+      state.currApi = (await getApisConfig(modeState.pathName, 'mobile')).apis
       await _switchDemo()
     }
     async function _switchDemo() {

diff --git a/examples/docs/newsrc/pc.vue b/examples/docs/newsrc/pc.vue
@@ -24,7 +24,7 @@
           <div v-html="state.currDemo?.desc['zh-CN']"></div>
         </div>
         <!-- 预览  -->
-        <div class="rel px20 py60 b-a bs-dotted">
+        <div class="rel px20 py60 b-a bs-dotted" :id="state.currDemo?.demoId">
           <div class="abs top10 right10">
             <span title="点击在vscode中打开">
               <IconOpeninVscode @click="fn.openInVscode(state.currDemo)" class="ml12 cur-hand" />
@@ -154,21 +154,13 @@ import Loading from '@opentiny/vue-loading'
 import designSmbConfig from '@opentiny/vue-design-smb'
 import designAuroraConfig from '@opentiny/vue-design-aurora'
 import designSaasConfig from '@opentiny/vue-design-saas'
-import { menuData, apis, demoStr, demoVue, mds } from './resourcePc.js'
+import { menuData, demoStr, demoVue, mds, demos } from './resourcePc.js'
 import { useTheme, useModeCtx } from './uses'
+import { getDemosConfig, getPath, getApisConfig } from './utils/componentsDoc'
 import SvgTheme from './assets/theme.svg'
 
 const isSaasMode = process.env.VITE_TINY_THEME === 'saas'
 
-const getPath = (path) => {
-  if (path.startsWith('grid-')) {
-    return 'grid'
-  } else if (path.startsWith('chart-')) {
-    return 'chart'
-  }
-  return path
-}
-
 export default {
   props: {
     showFixedMenu: Boolean
@@ -235,20 +227,14 @@ export default {
     // 以下私有方法，无须传递给vue模板的。
     async function _switchPath() {
       state.demoLoading = true
-      // 查找API
-      const apiModule = apis[`../../sites/demos/pc/app/${getPath(modeState.pathName)}/webdoc/${modeState.pathName}.js`]
-
-      if (apiModule) {
-        const module = await apiModule()
-        const apiRoot = module.default
-        state.currApi = apiRoot.apis
-        state.demos = apiRoot.demos || []
-        state.currDemo = state.demos.find((d) => d.demoId === modeState.demoId) || state.demos?.[0]
-      } else {
-        state.currApi = null
-        state.currDemos = []
-      }
+      const componentName = getPath(modeState.pathName)
+      // 查找demos配置
+      const demosModule = demos[`../../sites/demos/pc/app/${componentName}/webdoc/${modeState.pathName}.js`]
 
+      const demosConfig = await getDemosConfig(demosModule)
+      state.demos = demosConfig.demos
+      state.currDemo = state.demos.find((d) => d.demoId === modeState.demoId) || state.demos?.[0]
+      state.currApi = (await getApisConfig(componentName, 'pc')).apis
       await _switchDemo()
     }
     async function _switchDemo() {

diff --git a/examples/docs/newsrc/resourceMobile.js b/examples/docs/newsrc/resourceMobile.js
@@ -8,8 +8,8 @@ import { cmpMenus } from '../../sites/demos/mobile/menus.js'
 export const demoStr = import.meta.glob('../../sites/demos/mobile/app/**/*.vue', { eager: false, as: 'raw' })
 export const demoVue = import.meta.glob('../../sites/demos/mobile/app/**/*.vue', { eager: false })
 
-// api属性
-export const apis = import.meta.glob('../../sites/demos/mobile/app/*/webdoc/*.js', { eager: false })
+// demos配置
+export const demos = import.meta.glob('../../sites/demos/mobile/app/*/webdoc/*.js', { eager: false })
 
 // 组件的md
 const allMD = import.meta.glob('../../sites/demos/mobile/app/*/webdoc/*.cn.md', { eager: true })

diff --git a/examples/docs/newsrc/resourceMobileFirst.js b/examples/docs/newsrc/resourceMobileFirst.js
@@ -3,8 +3,8 @@ import { cmpMenus } from '../../sites/demos/mobile-first/menus.js'
 export const demoStr = import.meta.glob('../../sites/demos/mobile-first/app/**/*.vue', { eager: false, as: 'raw' })
 export const demoVue = import.meta.glob('../../sites/demos/mobile-first/app/**/*.vue', { eager: false })
 
-// api属性
-export const apis = import.meta.glob('../../sites/demos/mobile-first/app/*/webdoc/*.js', { eager: false })
+// demos配置
+export const demos = import.meta.glob('../../sites/demos/mobile-first/app/*/webdoc/*.js', { eager: false })
 
 // 组件的md
 const allMD = import.meta.glob('../../sites/demos/mobile-first/app/*/webdoc/*.cn.md', { eager: true })

diff --git a/examples/docs/newsrc/resourcePc.js b/examples/docs/newsrc/resourcePc.js
@@ -8,8 +8,8 @@ import { cmpMenus } from '../../sites/demos/pc/menus.js'
 export const demoStr = import.meta.glob('../../sites/demos/pc/app/**/*.vue', { eager: false, as: 'raw' })
 export const demoVue = import.meta.glob('../../sites/demos/pc/app/**/*.vue', { eager: false })
 
-// api属性
-export const apis = import.meta.glob('../../sites/demos/pc/app/*/webdoc/*.js', { eager: false })
+// demos配置
+export const demos = import.meta.glob('../../sites/demos/pc/app/*/webdoc/*.js', { eager: false })
 
 // 组件的md
 const allMD = import.meta.glob('../../sites/demos/pc/app/*/webdoc/*.cn.md', { eager: true })

diff --git a/examples/docs/newsrc/utils/componentsDoc.js b/examples/docs/newsrc/utils/componentsDoc.js
@@ -0,0 +1,40 @@
+export const apis = import.meta.glob('../../../sites/demos/apis/*.js', { eager: false })
+
+export const getPath = (path) => {
+  if (path.startsWith('grid-')) {
+    return 'grid'
+  } else if (path.startsWith('chart-')) {
+    return 'chart'
+  }
+  return path
+}
+
+export const getApisConfig = async (component, mode) => {
+  const apisModule = apis[`../../../sites/demos/apis/${component}.js`]
+  if (apisModule) {
+    const apisConfig = (await apisModule()).default
+    const demoKey = mode === 'mobile-first' ? 'mfDemo' : `${mode}Demo`
+    const apis = apisConfig.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(mode))
+            .map((filterItem) => ({ ...filterItem, demoId: filterItem[demoKey] }))
+        }
+      })
+      return item
+    })
+    return { ...apisConfig, apis }
+  }
+  return {}
+}
+
+export const getDemosConfig = async (module) => {
+  if (module) {
+    const demosModule = await module()
+    const demosConfig = demosModule.default
+    return demosConfig
+  }
+  return { demos: [] }
+}
diff --git a/examples/sites/demos/apis/dialog-box.js b/examples/sites/demos/apis/dialog-box.js
@@ -200,8 +200,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '弹出框标题',
-            'en-US':
-              'Height between the pop-up box and the top of the window. The default value is 15% of the screen height'
+            'en-US': 'Pop-up Box Title'
           },
           mode: ['pc'],
           pcDemo: 'custom-dialog-title'
@@ -212,7 +211,7 @@ export default {
           defaultValue: '15vh',
           desc: {
             'zh-CN': '设置弹出框距离窗口顶部的高度',
-            'en-US': 'Display and close pop-up boxes'
+            'en-US': 'Set the height of the popup from the top of the window'
           },
           mode: ['pc'],
           pcDemo: 'dialog-top-height'