fix(cli,ui): 完成组件库 pc文档 mobile文档的i18n设计

affects: @varlet/cli, @varlet/ui

package.json

@@ -13,7 +13,7 @@
   "scripts": {
     "bootstrap": "yarn && node scripts/bootstrap.js",
     "commit": "git-cz",
-    "publish": "lerna publish"
+    "publish": "yarn bootstrap && lerna publish"
   },
   "config": {
     "commitizen": {

packages/varlet-cli/site/mobile/App.vue

@@ -15,6 +15,7 @@ export default defineComponent({
   setup() {
     const componentName: Ref<string> = ref('')
     const route = useRoute()
+
     watch(
       () => route.path,
       (to: string) => {
@@ -23,6 +24,7 @@ export default defineComponent({
         componentName.value = componentNameInner[0]?.toUpperCase() + componentNameInner.slice(1)
       }
     )
+
     return {
       componentName,
     }
@@ -31,7 +33,7 @@ export default defineComponent({
 </script>
 
 <style lang="less">
-@import '../varlet-ui/src/styles/var';
+@import '~@varlet/ui/es/styles/var';
 
 body {
   margin: 0;

packages/varlet-cli/site/mobile/main.ts

@@ -1,10 +1,20 @@
-import { createApp } from 'vue'
-import { createRouter, createWebHashHistory } from 'vue-router'
-import '@varlet/touch-emulator'
+// @ts-ignore
+import routes from '@mobile-routes'
+// @ts-ignore
+import config from '@config'
 import App from './App.vue'
 import AppType from './components/AppType.vue'
+import '@varlet/touch-emulator'
+import { createApp } from 'vue'
+import { createRouter, createWebHashHistory } from 'vue-router'
+import { get } from 'lodash'
 
-import routes from './routes'
+const redirect = get(config, 'mobile.redirect')
+redirect &&
+  routes.push({
+    path: '/:pathMatch(.*)*',
+    redirect: get(config, 'pc.redirect') ?? '/',
+  })
 
 const router = createRouter({
   history: createWebHashHistory(),

packages/varlet-cli/site/pc/App.vue

@@ -46,15 +46,16 @@
             v-else
             class="varlet-site-nav__item--link"
             :class="`${item.doc === componentName ? 'varlet-site-nav__item--active' : ''}`"
-            >{{ item.text[language] }}</span
           >
+            {{ item.text[language] }}
+          </span>
         </var-cell>
       </div>
       <router-view />
       <div class="varlet-site-mobile">
         <div class="varlet-site-empty"></div>
         <div class="varlet-site-mobile-content">
-          <iframe :src="`./mobile.html#/${componentName}`"></iframe>
+          <iframe :src="`./mobile.html#/${componentName}?language=${language}`"></iframe>
         </div>
         <div class="varlet-site-mobile-image">
           <img src="./assets/images/mobile.png" />
@@ -68,8 +69,8 @@
 // @ts-ignore
 import config from '@config'
 import Ripple from '@varlet/ui/es/ripple'
-import '@varlet/ui/es/ripple/style'
 import Cell from '@varlet/ui/es/cell'
+import '@varlet/ui/es/ripple/style'
 import '@varlet/ui/es/cell/style'
 import { defineComponent, ref, Ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -97,15 +98,11 @@ export default defineComponent({
     const header: Ref<Header> = ref({ i18nButton: {}, logo: '', search: {} })
     const componentName = ref('button')
     const title: Ref<string> = ref('')
-    const versionList: Ref<string[]> = ref()[('2.10.14', '1.x', '3.x')]
+    const versionList: Ref<string[]> = ref(['2.10.14', '1.x', '3.x'])
     const isHideVersion: Ref<boolean> = ref(true)
-    const { pc = {}, title: configTitle, language: configLanguage } = config
-    const {
-      header: configHeader = { i18nButton: {}, logo: '', search: {} },
-      menu: configMenu = [],
-    } = pc
+    const { pc = {}, title: configTitle } = config
+    const { header: configHeader = { i18nButton: {}, logo: '', search: {} }, menu: configMenu = [] } = pc
     menu.value = configMenu
-    language.value = configLanguage
     header.value = configHeader
     title.value = configTitle
 
@@ -128,8 +125,13 @@ export default defineComponent({
 
     watch(
       () => route.path,
-      (to: string) => componentName.value = to.slice(to.lastIndexOf('/') + 1)
+      (to: string) => {
+        componentName.value = to.slice(to.lastIndexOf('/') + 1)
+        language.value = to.slice(to.indexOf('#/') + 2, to.lastIndexOf('/'))
+      },
+      { immediate: true }
     )
+
     return {
       menu,
       language,
@@ -146,7 +148,7 @@ export default defineComponent({
 </script>
 
 <style lang="less">
-@import '../varlet-ui/src/styles/var';
+@import '~@varlet/ui/es/styles/var';
 
 body,
 html,

packages/varlet-cli/site/pc/main.ts

@@ -1,9 +1,19 @@
-import { createApp } from 'vue'
-import { createRouter, createWebHashHistory } from 'vue-router'
 import App from './App.vue'
 import '@varlet/touch-emulator'
 // @ts-ignore
 import routes from '@pc-routes'
+// @ts-ignore
+import config from '@config'
+import { createApp } from 'vue'
+import { createRouter, createWebHashHistory } from 'vue-router'
+import { get } from 'lodash'
+
+const redirect = get(config, 'pc.redirect')
+redirect &&
+  routes.push({
+    path: '/:pathMatch(.*)*',
+    redirect: get(config, 'pc.redirect') ?? '/',
+  })
 
 const router = createRouter({
   history: createWebHashHistory(),

packages/varlet-cli/site/site.config.json

@@ -7,6 +7,7 @@
     "title": "Varlet 组件库示例",
     "description": "Varlet 组件库示例",
     "logo": "https://cn.vuejs.org/images/logo.png",
+    "redirect": "/zh-CN/home",
     "header": {
       "i18nButton": {
         "zh_CN": "En",
@@ -23,13 +24,22 @@
     "menu": [
       {
         "text": {
-          "zh-CN": "快速开始"
+          "zh-CN": "基本介绍",
+          "en-US": "Basic introduction"
         },
         "isTitle": true
       },
       {
         "text": {
-          "zh-CN": "组件"
+          "zh-CN": "快速开始",
+          "en-US": "Quickstart"
+        },
+        "doc": "quickstart"
+      },
+      {
+        "text": {
+          "zh-CN": "组件",
+          "en-US": "Components"
         },
         "isTitle": true
       },
@@ -269,11 +279,7 @@
   "mobile": {
     "title": "Varlet 组件库示例",
     "description": "Varlet 组件库示例",
-    "logo": "https://cn.vuejs.org/images/logo.png"
-  },
-  "languages": [
-    "zh-CN",
-    "en-US"
-  ],
-  "language": "zh-CN"
+    "logo": "https://cn.vuejs.org/images/logo.png",
+    "redirect": "/home"
+  }
 }

packages/varlet-cli/src/commands/create.ts

@@ -2,7 +2,7 @@ import logger from '../shared/logger'
 import { bigCamelize, camelize } from '../shared/fsUtils'
 import { mkdirs, pathExistsSync, writeFile } from 'fs-extra'
 import { resolve } from 'path'
-import { DOCS_DIR_NAME, EXAMPLE_DIR_NAME, LOCALE_DIR_NAME, SRC_DIR, TESTS_DIR_NAME } from '../shared/constant'
+import { DOCS_DIR_NAME, EXAMPLE_DIR_NAME, SRC_DIR, TESTS_DIR_NAME } from '../shared/constant'
 import { varletConfig } from '../config/varlet.config'
 import { get } from 'lodash'
 
@@ -72,57 +72,25 @@ export default defineComponent({
 </style>
 `
 
-  const localeTemplate = `\
-import zhCN from './zh-CN'
-import enUS from './en-US'
-import { ref, Ref } from 'vue'
-
-export const packs: Record<string, any> = {
-  'zh-CN': zhCN,
-  'en-US': enUS
-}
-
-export const pack: Ref<Record<string, any>> = ref({})
-
-export function use(lang: string) {
-  if (!packs[lang]) {
-    return
-  }
-
-  pack.value = packs[lang]
-}
-
-use('zh-CN')
-`
   const componentDir = resolve(SRC_DIR, name)
   const testsDir = resolve(SRC_DIR, name, TESTS_DIR_NAME)
   const exampleDir = resolve(SRC_DIR, name, EXAMPLE_DIR_NAME)
   const docsDir = resolve(SRC_DIR, name, DOCS_DIR_NAME)
-  const localeDir = resolve(exampleDir, LOCALE_DIR_NAME)
 
   if (pathExistsSync(componentDir)) {
     logger.error('component directory is existed')
     return
   }
 
-  await Promise.all([
-    mkdirs(componentDir),
-    mkdirs(testsDir),
-    mkdirs(exampleDir),
-    mkdirs(docsDir),
-    mkdirs(localeDir)
-  ])
+  await Promise.all([mkdirs(componentDir), mkdirs(testsDir), mkdirs(exampleDir), mkdirs(docsDir)])
 
   await Promise.all([
     writeFile(resolve(componentDir, `${bigCamelize(name)}.vue`), vueTemplate),
     writeFile(resolve(componentDir, 'index.ts'), indexTemplate),
     writeFile(resolve(testsDir, 'index.spec.js'), testsTemplate),
     writeFile(resolve(exampleDir, 'index.vue'), exampleTemplate),
-    writeFile(resolve(localeDir, 'index.ts'), localeTemplate),
     writeFile(resolve(docsDir, 'zh-CN.md'), ''),
     writeFile(resolve(docsDir, 'en-US.md'), ''),
-    writeFile(resolve(localeDir, 'zh-CN.ts'), 'export default {}'),
-    writeFile(resolve(localeDir, 'en-US.ts'), 'export default {}'),
   ])
 
   logger.success('create success!')