From 0e095efd32ab5470afcd7a24386b5e212edaf397 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Sun, 21 May 2023 18:14:40 -0700
Subject: [PATCH] =?UTF-8?q?fix(runtime-build)=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E8=BF=90=E8=A1=8C=E6=89=93=E5=8C=85=E6=9E=84=E5=BB=BA=E4=BA=A7?=
 =?UTF-8?q?=E7=89=A9=E7=BC=BA=E5=B0=91=E7=BB=84=E4=BB=B6=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=20(#250)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cli/src/commands/build/build-entry-app.ts |   4 +-
 .../cli/src/commands/build/build-runtime.ts   |   9 +-
 internals/cli/src/commands/build/build-ui.ts  |   4 +-
 .../cli/src/commands/create/create-mapping.ts |  44 +-
 packages/modules.json                         | 479 ++++++++++++------
 packages/vue/mobile-first.ts                  | 180 +------
 6 files changed, 353 insertions(+), 367 deletions(-)

diff --git a/internals/cli/src/commands/build/build-entry-app.ts b/internals/cli/src/commands/build/build-entry-app.ts
index c05a7f962..251882052 100644
--- a/internals/cli/src/commands/build/build-entry-app.ts
+++ b/internals/cli/src/commands/build/build-entry-app.ts
@@ -20,12 +20,12 @@ const MAIN_TEMPLATE = `{{{include}}}
 
  export default {
   {{{components}}}
-}
+ }
  `
 
 const buildFullRuntime = () => {
   const outputPath = utils.pathFromWorkspaceRoot(outputDir, 'app.ts')
-  const components = moduleUtils.getComponents()
+  const components = moduleUtils.getComponents('pc')
   const includeTemplate: string[] = []
   const componentsTemplate: string[] = []
 
diff --git a/internals/cli/src/commands/build/build-runtime.ts b/internals/cli/src/commands/build/build-runtime.ts
index 58fac689d..977196a96 100644
--- a/internals/cli/src/commands/build/build-runtime.ts
+++ b/internals/cli/src/commands/build/build-runtime.ts
@@ -104,6 +104,7 @@ async function batchBuildAll({ vueVersion, tasks, message, emptyOutDir, npmScope
         },
         lib: {
           entry,
+          formats: ['es'],
           fileName: (format, entryName) => `${entryName}${min ? '.min' : ''}.${format === 'es' ? 'm' : ''}js`,
           name: 'Tiny'
         },
@@ -116,10 +117,6 @@ async function batchBuildAll({ vueVersion, tasks, message, emptyOutDir, npmScope
 function getEntryTasks() {
   // 每次都要构建app和图标2个runtime
   return [
-    {
-      path: 'vue/app.ts',
-      libPath: 'tiny-vue'
-    },
     {
       path: 'vue-icon/index.ts',
       libPath: 'tiny-vue-icon'
@@ -131,6 +128,10 @@ function getEntryTasks() {
     {
       path: 'vue-common/src/index.ts',
       libPath: 'tiny-vue-common'
+    },
+    {
+      path: 'vue/app.ts',
+      libPath: 'tiny-vue'
     }
   ]
 }
diff --git a/internals/cli/src/commands/build/build-ui.ts b/internals/cli/src/commands/build/build-ui.ts
index 4e08dbee7..931d19aab 100644
--- a/internals/cli/src/commands/build/build-ui.ts
+++ b/internals/cli/src/commands/build/build-ui.ts
@@ -91,7 +91,7 @@ export const getBaseConfig = ({ vueVersion, dtsInclude, dts, buildTarget, themeV
           }
         }
       }),
-      inlineChunksPlugin({ deleteInlinedFiles: true }),
+      !isRuntime && inlineChunksPlugin({ deleteInlinedFiles: true }),
       !isRuntime &&
       generatePackageJsonPlugin({
         beforeWriteFile: (filePath, content) => {
@@ -144,7 +144,7 @@ export const getBaseConfig = ({ vueVersion, dtsInclude, dts, buildTarget, themeV
           }
         }
       }),
-      replaceModuleNamePlugin()
+      !isRuntime && replaceModuleNamePlugin()
     ],
     resolve: {
       extensions: ['.js', '.ts', '.tsx', '.vue'],
diff --git a/internals/cli/src/commands/create/create-mapping.ts b/internals/cli/src/commands/create/create-mapping.ts
index fe388b471..25afbc623 100644
--- a/internals/cli/src/commands/create/create-mapping.ts
+++ b/internals/cli/src/commands/create/create-mapping.ts
@@ -1,4 +1,5 @@
 import path from 'node:path'
+import fs from 'fs-extra'
 import * as utils from '../../shared/utils'
 import { writeModuleMap, quickSort } from '../../shared/module-utils'
 import commonMapping from './commonMapping.json'
@@ -32,12 +33,10 @@ const getTemplateName = (currentPaths, entryObj) => {
   return `${currentPaths.split('-').map(utils.capitalize).join('')}${subFix}`
 }
 
-interface BuildEntryType {
-  path: string
-  // type为三种 component：组件入口，template：组件模板（pc|mobile|mobile-first），module:单独的模块（icon|common|local）
-  type: 'component' | 'template' | 'module'
-  exclude: boolean
-  mode?: string[]
+const tempMap = {
+  'pc.vue': 'pc',
+  'mobile.vue': 'mobile',
+  'mobile-first.vue': 'mobile-first',
 }
 
 /**
@@ -58,6 +57,18 @@ const makeModules = () => {
     callback({ file, subPath, dirs }) {
       // 判断是否是需要作为打包入口文件
       const entryObj = getBuildEntryFile(file, dirs, subPath)
+      const mode: string[] = []
+
+      if (entryObj.isMainEntry && dirs.includes('src')) {
+        const srcPath = subPath.replace(file, 'src')
+        const srcFiles = fs.readdirSync(srcPath) || []
+        srcFiles.forEach(item => {
+          if (tempMap[item]) {
+            mode.push(tempMap[item])
+          }
+        })
+      }
+
       if (entryObj.isBuildEntryFile) {
         const modulePath = subPath.slice(subPath.lastIndexOf(`vue${path.sep}src`)).replaceAll(path.sep, '/')
         const matchArr = modulePath.match(/.+\/(.+?)\/(index\.ts|src\/pc\.|src\/mobile\.|src\/mobile-first\.)/)
@@ -68,6 +79,10 @@ const makeModules = () => {
             type: entryObj.isMainEntry ? 'component' : 'template',
             exclude: false
           }
+
+          if (mode.length > 0) {
+            templates[compName].mode = mode
+          }
         }
       }
     }
@@ -75,23 +90,6 @@ const makeModules = () => {
 
   const modulesJson = quickSort({ sortData: templates, returnType: 'object' })
 
-  Object.entries(modulesJson).forEach(([key, value]) => {
-    if ((value as BuildEntryType).type === 'component') {
-      const mode: string[] = []
-      const compTempCol = ['Pc', 'Mobile', 'MobileFirst']
-      compTempCol.forEach(item => {
-        if (modulesJson[key + item]) {
-          // 放入modules.json之前，转为小写
-          const modeName = item === 'MobileFirst' ? 'mobile-first' : item.toLowerCase()
-          mode.push(modeName)
-        }
-      })
-      if (mode.length) {
-        (value as BuildEntryType).mode = mode
-      }
-    }
-  })
-
   writeModuleMap(modulesJson)
 }
 
diff --git a/packages/modules.json b/packages/modules.json
index 18a6b52bd..d3a0bc50d 100644
--- a/packages/modules.json
+++ b/packages/modules.json
@@ -2,15 +2,18 @@
   "ActionMenu": {
     "path": "vue/src/action-menu/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "ActionSheet": {
     "path": "vue/src/action-sheet/index.ts",
     "type": "component",
     "exclude": false,
     "mode": [
-      "mobile",
-      "mobile-first"
+      "mobile-first",
+      "mobile"
     ]
   },
   "ActionSheetMobile": {
@@ -28,9 +31,9 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "AlertMobile": {
@@ -51,17 +54,26 @@
   "Amount": {
     "path": "vue/src/amount/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "Anchor": {
     "path": "vue/src/anchor/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "Area": {
     "path": "vue/src/area/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "Autocomplete": {
     "path": "vue/src/autocomplete/index.ts",
@@ -84,16 +96,19 @@
   "Avatar": {
     "path": "vue/src/avatar/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "mobile"
+    ]
   },
   "Badge": {
     "path": "vue/src/badge/index.ts",
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "BadgeMobile": {
@@ -160,9 +175,9 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "ButtonGroup": {
@@ -222,12 +237,18 @@
   "Card": {
     "path": "vue/src/card/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "mobile-first"
+    ]
   },
   "CardGroup": {
     "path": "vue/src/card-group/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "mobile-first"
+    ]
   },
   "CardTemplate": {
     "path": "vue/src/card-template/index.ts",
@@ -247,8 +268,8 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile-first"
+      "mobile-first",
+      "pc"
     ]
   },
   "CarouselItem": {
@@ -256,8 +277,8 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile-first"
+      "mobile-first",
+      "pc"
     ]
   },
   "CarouselItemMobileFirst": {
@@ -296,12 +317,18 @@
   "CascaderNode": {
     "path": "vue/src/cascader-node/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "CascaderPanel": {
     "path": "vue/src/cascader-panel/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "CascaderPc": {
     "path": "vue/src/cascader/src/pc.vue",
@@ -313,8 +340,8 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "mobile",
-      "mobile-first"
+      "mobile-first",
+      "mobile"
     ]
   },
   "CascaderSelectMobileFirst": {
@@ -330,7 +357,10 @@
   "Cell": {
     "path": "vue/src/cell/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "mobile-first"
+    ]
   },
   "Chart": {
     "path": "vue/src/chart/index.ts",
@@ -447,9 +477,9 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "CheckboxButton": {
@@ -470,9 +500,9 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "CheckboxGroupMobile": {
@@ -523,8 +553,8 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile-first"
+      "mobile-first",
+      "pc"
     ]
   },
   "CollapseItem": {
@@ -532,8 +562,8 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile-first"
+      "mobile-first",
+      "pc"
     ]
   },
   "CollapseItemMobileFirst": {
@@ -559,17 +589,26 @@
   "CollapseTransition": {
     "path": "vue/src/collapse-transition/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "ColumnListGroup": {
     "path": "vue/src/column-list-group/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "mobile-first"
+    ]
   },
   "ColumnListItem": {
     "path": "vue/src/column-list-item/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "mobile-first"
+    ]
   },
   "Common": {
     "path": "vue-common/src/index.ts",
@@ -649,7 +688,10 @@
   "Crop": {
     "path": "vue/src/crop/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "Currency": {
     "path": "vue/src/currency/index.ts",
@@ -667,16 +709,18 @@
   "DatePanel": {
     "path": "vue/src/date-panel/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "DatePicker": {
     "path": "vue/src/date-picker/index.ts",
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "DatePickerMobile": {
@@ -687,7 +731,10 @@
   "DatePickerMobileFirst": {
     "path": "vue/src/date-picker-mobile-first/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "mobile-first"
+    ]
   },
   "DatePickerPc": {
     "path": "vue/src/date-picker/src/pc.vue",
@@ -697,12 +744,18 @@
   "DateRange": {
     "path": "vue/src/date-range/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "DateTable": {
     "path": "vue/src/date-table/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "Dept": {
     "path": "vue/src/dept/index.ts",
@@ -745,8 +798,8 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile"
+      "mobile",
+      "pc"
     ]
   },
   "DialogBoxMobile": {
@@ -816,8 +869,8 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile-first"
+      "mobile-first",
+      "pc"
     ]
   },
   "DropdownItem": {
@@ -825,9 +878,9 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "DropdownItemMobile": {
@@ -850,9 +903,9 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "DropdownMenuMobile": {
@@ -924,8 +977,8 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "mobile",
-      "mobile-first"
+      "mobile-first",
+      "mobile"
     ]
   },
   "ExceptionMobile": {
@@ -956,9 +1009,9 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "FileUploadMobile": {
@@ -1000,7 +1053,10 @@
   "FilterBox": {
     "path": "vue/src/filter-box/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "FilterMobileFirst": {
     "path": "vue/src/filter/src/mobile-first.vue",
@@ -1010,7 +1066,10 @@
   "FilterPanel": {
     "path": "vue/src/filter-panel/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "Floatbar": {
     "path": "vue/src/floatbar/index.ts",
@@ -1030,8 +1089,8 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile-first"
+      "mobile-first",
+      "pc"
     ]
   },
   "FlowchartMobileFirst": {
@@ -1049,9 +1108,9 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "FormItem": {
@@ -1059,8 +1118,8 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile-first"
+      "mobile-first",
+      "pc"
     ]
   },
   "FormItemLabelWrap": {
@@ -1096,7 +1155,10 @@
   "Fullscreen": {
     "path": "vue/src/fullscreen/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "Grid": {
     "path": "vue/src/grid/index.ts",
@@ -1159,8 +1221,8 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile-first"
+      "mobile-first",
+      "pc"
     ]
   },
   "ImageMobileFirst": {
@@ -1178,9 +1240,9 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "ImageViewerMobile": {
@@ -1221,9 +1283,9 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "InputMobile": {
@@ -1301,16 +1363,19 @@
   "List": {
     "path": "vue/src/list/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "mobile"
+    ]
   },
   "Loading": {
     "path": "vue/src/loading/index.ts",
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "LoadingMobile": {
@@ -1336,12 +1401,18 @@
   "Locales": {
     "path": "vue/src/locales/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "LogonUser": {
     "path": "vue/src/logon-user/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "Logout": {
     "path": "vue/src/logout/index.ts",
@@ -1377,16 +1448,19 @@
   "MiniPicker": {
     "path": "vue/src/mini-picker/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "mobile"
+    ]
   },
   "Modal": {
     "path": "vue/src/modal/index.ts",
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "ModalMobile": {
@@ -1407,12 +1481,18 @@
   "MonthRange": {
     "path": "vue/src/month-range/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "MonthTable": {
     "path": "vue/src/month-table/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "MultiSelect": {
     "path": "vue/src/multi-select/index.ts",
@@ -1430,7 +1510,10 @@
   "NavBar": {
     "path": "vue/src/nav-bar/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "mobile"
+    ]
   },
   "NavMenu": {
     "path": "vue/src/nav-menu/index.ts",
@@ -1448,16 +1531,19 @@
   "Notify": {
     "path": "vue/src/notify/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "Numeric": {
     "path": "vue/src/numeric/index.ts",
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "NumericMobile": {
@@ -1478,20 +1564,26 @@
   "Option": {
     "path": "vue/src/option/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "OptionGroup": {
     "path": "vue/src/option-group/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "Pager": {
     "path": "vue/src/pager/index.ts",
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile-first"
+      "mobile-first",
+      "pc"
     ]
   },
   "PagerItem": {
@@ -1499,8 +1591,8 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile-first"
+      "mobile-first",
+      "pc"
     ]
   },
   "PagerItemMobileFirst": {
@@ -1539,12 +1631,18 @@
   "Picker": {
     "path": "vue/src/picker/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "PickerColumn": {
     "path": "vue/src/picker-column/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "mobile"
+    ]
   },
   "PopUpload": {
     "path": "vue/src/pop-upload/index.ts",
@@ -1562,7 +1660,10 @@
   "Popconfirm": {
     "path": "vue/src/popconfirm/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "mobile-first"
+    ]
   },
   "Popeditor": {
     "path": "vue/src/popeditor/index.ts",
@@ -1582,9 +1683,9 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "PopoverMobile": {
@@ -1605,16 +1706,19 @@
   "Popup": {
     "path": "vue/src/popup/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "Progress": {
     "path": "vue/src/progress/index.ts",
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "ProgressMobile": {
@@ -1635,16 +1739,19 @@
   "PullRefresh": {
     "path": "vue/src/pull-refresh/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "mobile"
+    ]
   },
   "Radio": {
     "path": "vue/src/radio/index.ts",
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "RadioButton": {
@@ -1652,8 +1759,8 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile-first"
+      "mobile-first",
+      "pc"
     ]
   },
   "RadioButtonMobileFirst": {
@@ -1671,8 +1778,8 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile-first"
+      "mobile-first",
+      "pc"
     ]
   },
   "RadioGroupMobileFirst": {
@@ -1705,8 +1812,8 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile-first"
+      "mobile-first",
+      "pc"
     ]
   },
   "RateMobileFirst": {
@@ -1800,16 +1907,19 @@
   "Scrollbar": {
     "path": "vue/src/scrollbar/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "Search": {
     "path": "vue/src/search/index.ts",
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "SearchMobile": {
@@ -1832,8 +1942,7 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile"
+      "pc"
     ]
   },
   "SelectDropdown": {
@@ -1852,7 +1961,10 @@
   "SelectMobile": {
     "path": "vue/src/select-mobile/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "mobile-first"
+    ]
   },
   "SelectPc": {
     "path": "vue/src/select/src/pc.vue",
@@ -1862,15 +1974,18 @@
   "SelectView": {
     "path": "vue/src/select-view/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "mobile-first"
+    ]
   },
   "SelectedBox": {
     "path": "vue/src/selected-box/index.ts",
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile-first"
+      "mobile-first",
+      "pc"
     ]
   },
   "SelectedBoxMobileFirst": {
@@ -1901,9 +2016,9 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "SliderMobile": {
@@ -1937,15 +2052,18 @@
   "StandardListItem": {
     "path": "vue/src/standard-list-item/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "mobile-first"
+    ]
   },
   "Steps": {
     "path": "vue/src/steps/index.ts",
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile-first"
+      "mobile-first",
+      "pc"
     ]
   },
   "StepsMobileFirst": {
@@ -1961,16 +2079,19 @@
   "SvgIcon": {
     "path": "vue/src/svg-icon/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "Switch": {
     "path": "vue/src/switch/index.ts",
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "SwitchMobile": {
@@ -1993,8 +2114,8 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile-first"
+      "mobile-first",
+      "pc"
     ]
   },
   "TabItemMobileFirst": {
@@ -2010,20 +2131,26 @@
   "Tabbar": {
     "path": "vue/src/tabbar/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "mobile"
+    ]
   },
   "TabbarItem": {
     "path": "vue/src/tabbar-item/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "mobile"
+    ]
   },
   "Table": {
     "path": "vue/src/table/index.ts",
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile"
+      "mobile",
+      "pc"
     ]
   },
   "TableMobile": {
@@ -2041,9 +2168,9 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "TabsMobile": {
@@ -2066,14 +2193,17 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile-first"
+      "mobile-first",
+      "pc"
     ]
   },
   "TagGroup": {
     "path": "vue/src/tag-group/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "mobile-first"
+    ]
   },
   "TagMobileFirst": {
     "path": "vue/src/tag/src/mobile-first.vue",
@@ -2101,16 +2231,19 @@
   "Time": {
     "path": "vue/src/time/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "TimeLine": {
     "path": "vue/src/time-line/index.ts",
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "TimeLineMobile": {
@@ -2131,35 +2264,50 @@
   "TimePanel": {
     "path": "vue/src/time-panel/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "TimePicker": {
     "path": "vue/src/time-picker/index.ts",
     "type": "component",
     "exclude": false,
     "mode": [
-      "mobile"
+      "pc"
     ]
   },
   "TimePickerMobile": {
     "path": "vue/src/time-picker-mobile/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "mobile-first"
+    ]
   },
   "TimeRange": {
     "path": "vue/src/time-range/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "TimeSelect": {
     "path": "vue/src/time-select/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "TimeSpinner": {
     "path": "vue/src/time-spinner/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "ToggleMenu": {
     "path": "vue/src/toggle-menu/index.ts",
@@ -2179,8 +2327,8 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile-first"
+      "mobile-first",
+      "pc"
     ]
   },
   "TooltipMobileFirst": {
@@ -2217,7 +2365,10 @@
   "TransferPanel": {
     "path": "vue/src/transfer-panel/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "TransferPc": {
     "path": "vue/src/transfer/src/pc.vue",
@@ -2235,7 +2386,10 @@
   "TreeMenu": {
     "path": "vue/src/tree-menu/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "TreePc": {
     "path": "vue/src/tree/src/pc.vue",
@@ -2247,8 +2401,8 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile-first"
+      "mobile-first",
+      "pc"
     ]
   },
   "UploadDragger": {
@@ -2256,8 +2410,8 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile-first"
+      "mobile-first",
+      "pc"
     ]
   },
   "UploadDraggerMobileFirst": {
@@ -2275,8 +2429,8 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
-      "mobile-first"
+      "mobile-first",
+      "pc"
     ]
   },
   "UploadListMobileFirst": {
@@ -2338,9 +2492,9 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "pc",
+      "mobile-first",
       "mobile",
-      "mobile-first"
+      "pc"
     ]
   },
   "UserHeadGroup": {
@@ -2392,7 +2546,10 @@
   "Wheel": {
     "path": "vue/src/wheel/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "mobile"
+    ]
   },
   "Wizard": {
     "path": "vue/src/wizard/index.ts",
@@ -2410,11 +2567,17 @@
   "YearRange": {
     "path": "vue/src/year-range/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   },
   "YearTable": {
     "path": "vue/src/year-table/index.ts",
     "type": "component",
-    "exclude": false
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
   }
 }
diff --git a/packages/vue/mobile-first.ts b/packages/vue/mobile-first.ts
index f03fcdda4..9aebbf638 100644
--- a/packages/vue/mobile-first.ts
+++ b/packages/vue/mobile-first.ts
@@ -1,11 +1,6 @@
-import ActionMenu from '@opentiny/vue-action-menu'
 import ActionSheet from '@opentiny/vue-action-sheet'
 import Alert from '@opentiny/vue-alert'
-import Amount from '@opentiny/vue-amount'
-import Anchor from '@opentiny/vue-anchor'
-import Area from '@opentiny/vue-area'
 import AutonaviMap from '@opentiny/vue-autonavi-map'
-import Avatar from '@opentiny/vue-avatar'
 import Badge from '@opentiny/vue-badge'
 import BaiduMap from '@opentiny/vue-baidu-map'
 import Button from '@opentiny/vue-button'
@@ -15,8 +10,6 @@ import CardGroup from '@opentiny/vue-card-group'
 import Carousel from '@opentiny/vue-carousel'
 import CarouselItem from '@opentiny/vue-carousel-item'
 import CascaderMenu from '@opentiny/vue-cascader-menu'
-import CascaderNode from '@opentiny/vue-cascader-node'
-import CascaderPanel from '@opentiny/vue-cascader-panel'
 import CascaderSelect from '@opentiny/vue-cascader-select'
 import Cell from '@opentiny/vue-cell'
 import Chart from '@opentiny/vue-chart'
@@ -45,16 +38,10 @@ import Checkbox from '@opentiny/vue-checkbox'
 import CheckboxGroup from '@opentiny/vue-checkbox-group'
 import Collapse from '@opentiny/vue-collapse'
 import CollapseItem from '@opentiny/vue-collapse-item'
-import CollapseTransition from '@opentiny/vue-collapse-transition'
 import ColumnListGroup from '@opentiny/vue-column-list-group'
 import ColumnListItem from '@opentiny/vue-column-list-item'
 import ConfigProvider from '@opentiny/vue-config-provider'
-import Crop from '@opentiny/vue-crop'
-import DatePanel from '@opentiny/vue-date-panel'
-import DatePicker from '@opentiny/vue-date-picker'
 import DatePickerMobileFirst from '@opentiny/vue-date-picker-mobile-first'
-import DateRange from '@opentiny/vue-date-range'
-import DateTable from '@opentiny/vue-date-table'
 import Drawer from '@opentiny/vue-drawer'
 import Dropdown from '@opentiny/vue-dropdown'
 import DropdownItem from '@opentiny/vue-dropdown-item'
@@ -63,12 +50,9 @@ import Exception from '@opentiny/vue-exception'
 import FileUpload from '@opentiny/vue-file-upload'
 import Filter from '@opentiny/vue-filter'
 import FilterBar from '@opentiny/vue-filter-bar'
-import FilterBox from '@opentiny/vue-filter-box'
-import FilterPanel from '@opentiny/vue-filter-panel'
 import Flowchart from '@opentiny/vue-flowchart'
 import Form from '@opentiny/vue-form'
 import FormItem from '@opentiny/vue-form-item'
-import Fullscreen from '@opentiny/vue-fullscreen'
 import Grid from '@opentiny/vue-grid'
 import GridColumn from '@opentiny/vue-grid-column'
 import GridManager from '@opentiny/vue-grid-manager'
@@ -77,35 +61,20 @@ import Image from '@opentiny/vue-image'
 import ImageViewer from '@opentiny/vue-image-viewer'
 import IndexBarAnchor from '@opentiny/vue-index-bar-anchor'
 import Input from '@opentiny/vue-input'
-import List from '@opentiny/vue-list'
 import Loading from '@opentiny/vue-loading'
-import Locales from '@opentiny/vue-locales'
-import LogonUser from '@opentiny/vue-logon-user'
 import Message from '@opentiny/vue-message'
-import MiniPicker from '@opentiny/vue-mini-picker'
 import Modal from '@opentiny/vue-modal'
-import MonthRange from '@opentiny/vue-month-range'
-import MonthTable from '@opentiny/vue-month-table'
-import NavBar from '@opentiny/vue-nav-bar'
-import Notify from '@opentiny/vue-notify'
 import Numeric from '@opentiny/vue-numeric'
-import Option from '@opentiny/vue-option'
-import OptionGroup from '@opentiny/vue-option-group'
 import Pager from '@opentiny/vue-pager'
 import PagerItem from '@opentiny/vue-pager-item'
-import Picker from '@opentiny/vue-picker'
-import PickerColumn from '@opentiny/vue-picker-column'
 import Popconfirm from '@opentiny/vue-popconfirm'
 import Popover from '@opentiny/vue-popover'
-import Popup from '@opentiny/vue-popup'
 import Progress from '@opentiny/vue-progress'
-import PullRefresh from '@opentiny/vue-pull-refresh'
 import Radio from '@opentiny/vue-radio'
 import RadioButton from '@opentiny/vue-radio-button'
 import RadioGroup from '@opentiny/vue-radio-group'
 import Rate from '@opentiny/vue-rate'
 import Record from '@opentiny/vue-record'
-import Scrollbar from '@opentiny/vue-scrollbar'
 import Search from '@opentiny/vue-search'
 import SelectMobile from '@opentiny/vue-select-mobile'
 import SelectView from '@opentiny/vue-select-view'
@@ -113,43 +82,25 @@ import SelectedBox from '@opentiny/vue-selected-box'
 import Slider from '@opentiny/vue-slider'
 import StandardListItem from '@opentiny/vue-standard-list-item'
 import Steps from '@opentiny/vue-steps'
-import SvgIcon from '@opentiny/vue-svg-icon'
 import Switch from '@opentiny/vue-switch'
 import TabItem from '@opentiny/vue-tab-item'
-import Tabbar from '@opentiny/vue-tabbar'
-import TabbarItem from '@opentiny/vue-tabbar-item'
 import Tabs from '@opentiny/vue-tabs'
 import Tag from '@opentiny/vue-tag'
 import TagGroup from '@opentiny/vue-tag-group'
-import Time from '@opentiny/vue-time'
 import TimeLine from '@opentiny/vue-time-line'
-import TimePanel from '@opentiny/vue-time-panel'
 import TimePickerMobile from '@opentiny/vue-time-picker-mobile'
-import TimeRange from '@opentiny/vue-time-range'
-import TimeSelect from '@opentiny/vue-time-select'
-import TimeSpinner from '@opentiny/vue-time-spinner'
 import Tooltip from '@opentiny/vue-tooltip'
-import TransferPanel from '@opentiny/vue-transfer-panel'
-import TreeMenu from '@opentiny/vue-tree-menu'
 import Upload from '@opentiny/vue-upload'
 import UploadDragger from '@opentiny/vue-upload-dragger'
 import UploadList from '@opentiny/vue-upload-list'
 import UserHead from '@opentiny/vue-user-head'
 import UserHeadGroup from '@opentiny/vue-user-head-group'
-import Wheel from '@opentiny/vue-wheel'
-import YearRange from '@opentiny/vue-year-range'
-import YearTable from '@opentiny/vue-year-table'
 import { $prefix } from '@opentiny/vue-common'
 
 const components = [
-  ActionMenu,
   ActionSheet,
   Alert,
-  Amount,
-  Anchor,
-  Area,
   AutonaviMap,
-  Avatar,
   Badge,
   BaiduMap,
   Button,
@@ -159,8 +110,6 @@ const components = [
   Carousel,
   CarouselItem,
   CascaderMenu,
-  CascaderNode,
-  CascaderPanel,
   CascaderSelect,
   Cell,
   Chart,
@@ -189,16 +138,10 @@ const components = [
   CheckboxGroup,
   Collapse,
   CollapseItem,
-  CollapseTransition,
   ColumnListGroup,
   ColumnListItem,
   ConfigProvider,
-  Crop,
-  DatePanel,
-  DatePicker,
   DatePickerMobileFirst,
-  DateRange,
-  DateTable,
   Drawer,
   Dropdown,
   DropdownItem,
@@ -207,12 +150,9 @@ const components = [
   FileUpload,
   Filter,
   FilterBar,
-  FilterBox,
-  FilterPanel,
   Flowchart,
   Form,
   FormItem,
-  Fullscreen,
   Grid,
   GridColumn,
   GridManager,
@@ -221,35 +161,20 @@ const components = [
   ImageViewer,
   IndexBarAnchor,
   Input,
-  List,
   Loading,
-  Locales,
-  LogonUser,
   Message,
-  MiniPicker,
   Modal,
-  MonthRange,
-  MonthTable,
-  NavBar,
-  Notify,
   Numeric,
-  Option,
-  OptionGroup,
   Pager,
   PagerItem,
-  Picker,
-  PickerColumn,
   Popconfirm,
   Popover,
-  Popup,
   Progress,
-  PullRefresh,
   Radio,
   RadioButton,
   RadioGroup,
   Rate,
   Record,
-  Scrollbar,
   Search,
   SelectMobile,
   SelectView,
@@ -257,32 +182,19 @@ const components = [
   Slider,
   StandardListItem,
   Steps,
-  SvgIcon,
   Switch,
   TabItem,
-  Tabbar,
-  TabbarItem,
   Tabs,
   Tag,
   TagGroup,
-  Time,
   TimeLine,
-  TimePanel,
   TimePickerMobile,
-  TimeRange,
-  TimeSelect,
-  TimeSpinner,
   Tooltip,
-  TransferPanel,
-  TreeMenu,
   Upload,
   UploadDragger,
   UploadList,
   UserHead,
-  UserHeadGroup,
-  Wheel,
-  YearRange,
-  YearTable
+  UserHeadGroup
 ]
 
 export const install = (app, opts = {}) => {
@@ -308,14 +220,9 @@ export const install = (app, opts = {}) => {
 export const version = '3.8.1'
 
 export {
-  ActionMenu,
   ActionSheet,
   Alert,
-  Amount,
-  Anchor,
-  Area,
   AutonaviMap,
-  Avatar,
   Badge,
   BaiduMap,
   Button,
@@ -325,8 +232,6 @@ export {
   Carousel,
   CarouselItem,
   CascaderMenu,
-  CascaderNode,
-  CascaderPanel,
   CascaderSelect,
   Cell,
   Chart,
@@ -355,16 +260,10 @@ export {
   CheckboxGroup,
   Collapse,
   CollapseItem,
-  CollapseTransition,
   ColumnListGroup,
   ColumnListItem,
   ConfigProvider,
-  Crop,
-  DatePanel,
-  DatePicker,
   DatePickerMobileFirst,
-  DateRange,
-  DateTable,
   Drawer,
   Dropdown,
   DropdownItem,
@@ -373,12 +272,9 @@ export {
   FileUpload,
   Filter,
   FilterBar,
-  FilterBox,
-  FilterPanel,
   Flowchart,
   Form,
   FormItem,
-  Fullscreen,
   Grid,
   GridColumn,
   GridManager,
@@ -387,35 +283,20 @@ export {
   ImageViewer,
   IndexBarAnchor,
   Input,
-  List,
   Loading,
-  Locales,
-  LogonUser,
   Message,
-  MiniPicker,
   Modal,
-  MonthRange,
-  MonthTable,
-  NavBar,
-  Notify,
   Numeric,
-  Option,
-  OptionGroup,
   Pager,
   PagerItem,
-  Picker,
-  PickerColumn,
   Popconfirm,
   Popover,
-  Popup,
   Progress,
-  PullRefresh,
   Radio,
   RadioButton,
   RadioGroup,
   Rate,
   Record,
-  Scrollbar,
   Search,
   SelectMobile,
   SelectView,
@@ -423,43 +304,25 @@ export {
   Slider,
   StandardListItem,
   Steps,
-  SvgIcon,
   Switch,
   TabItem,
-  Tabbar,
-  TabbarItem,
   Tabs,
   Tag,
   TagGroup,
-  Time,
   TimeLine,
-  TimePanel,
   TimePickerMobile,
-  TimeRange,
-  TimeSelect,
-  TimeSpinner,
   Tooltip,
-  TransferPanel,
-  TreeMenu,
   Upload,
   UploadDragger,
   UploadList,
   UserHead,
-  UserHeadGroup,
-  Wheel,
-  YearRange,
-  YearTable
+  UserHeadGroup
 }
 
 export default {
-  ActionMenu,
   ActionSheet,
   Alert,
-  Amount,
-  Anchor,
-  Area,
   AutonaviMap,
-  Avatar,
   Badge,
   BaiduMap,
   Button,
@@ -469,8 +332,6 @@ export default {
   Carousel,
   CarouselItem,
   CascaderMenu,
-  CascaderNode,
-  CascaderPanel,
   CascaderSelect,
   Cell,
   Chart,
@@ -499,16 +360,10 @@ export default {
   CheckboxGroup,
   Collapse,
   CollapseItem,
-  CollapseTransition,
   ColumnListGroup,
   ColumnListItem,
   ConfigProvider,
-  Crop,
-  DatePanel,
-  DatePicker,
   DatePickerMobileFirst,
-  DateRange,
-  DateTable,
   Drawer,
   Dropdown,
   DropdownItem,
@@ -517,12 +372,9 @@ export default {
   FileUpload,
   Filter,
   FilterBar,
-  FilterBox,
-  FilterPanel,
   Flowchart,
   Form,
   FormItem,
-  Fullscreen,
   Grid,
   GridColumn,
   GridManager,
@@ -531,35 +383,20 @@ export default {
   ImageViewer,
   IndexBarAnchor,
   Input,
-  List,
   Loading,
-  Locales,
-  LogonUser,
   Message,
-  MiniPicker,
   Modal,
-  MonthRange,
-  MonthTable,
-  NavBar,
-  Notify,
   Numeric,
-  Option,
-  OptionGroup,
   Pager,
   PagerItem,
-  Picker,
-  PickerColumn,
   Popconfirm,
   Popover,
-  Popup,
   Progress,
-  PullRefresh,
   Radio,
   RadioButton,
   RadioGroup,
   Rate,
   Record,
-  Scrollbar,
   Search,
   SelectMobile,
   SelectView,
@@ -567,31 +404,18 @@ export default {
   Slider,
   StandardListItem,
   Steps,
-  SvgIcon,
   Switch,
   TabItem,
-  Tabbar,
-  TabbarItem,
   Tabs,
   Tag,
   TagGroup,
-  Time,
   TimeLine,
-  TimePanel,
   TimePickerMobile,
-  TimeRange,
-  TimeSelect,
-  TimeSpinner,
   Tooltip,
-  TransferPanel,
-  TreeMenu,
   Upload,
   UploadDragger,
   UploadList,
   UserHead,
   UserHeadGroup,
-  Wheel,
-  YearRange,
-  YearTable,
   install
 }