feat(cli): support switch lang

docs/site/mobile.js

@@ -8,8 +8,9 @@ Vue.mixin({
   computed: {
     $t() {
       const { name } = this.$options;
+      const { lang } = this.$route.meta || {};
       const prefix = name ? camelize(name) + '.' : '';
-      const messages = this.$vantMessages[this.$vantLang];
+      const messages = this.$vantMessages[lang];
 
       return (path, ...args) => {
         const message = get(messages, prefix + path) || get(messages, path);
@@ -20,6 +21,7 @@ Vue.mixin({
 
   beforeCreate() {
     const { i18n, name } = this.$options;
+
     if (i18n) {
       const locales = {};
       const camelizedName = camelize(name);

packages/vant-cli/site/desktop/App.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="app">
-    <van-doc :lang="lang" :config="config" :simulator="simulator">
+    <van-doc
+      :lang="lang"
+      :config="config"
+      :simulator="simulator"
+      :lang-configs="langConfigs"
+    >
       <router-view />
     </van-doc>
   </div>
@@ -9,6 +14,7 @@
 <script>
 import VanDoc from './components';
 import { config } from 'site-desktop-shared';
+import { setLang } from '../common/locales';
 
 function getPublicPath() {
   const { site } = config.build || {};
@@ -37,16 +43,29 @@ export default {
       return lang || '';
     },
 
+    langConfigs() {
+      const { locales = {} } = config.site;
+      return Object.keys(locales).map(key => ({
+        lang: key,
+        label: locales[key].langLabel || ''
+      }));
+    },
+
     config() {
       const { locales } = config.site;
 
       if (locales) {
-        const { lang } = this.$route.meta;
-        return locales[lang];
+        return locales[this.lang];
       }
 
       return config.site;
     }
+  },
+
+  watch: {
+    lang(val) {
+      setLang(val);
+    }
   }
 };
 </script>

packages/vant-cli/site/desktop/components/Header.vue

@@ -30,10 +30,10 @@
               </transition>
             </span>
           </li>
-        <!--
-          <li v-if="config.nav.lang" class="van-doc-header__top-nav-item">
-            <a class="van-doc-header__cube" :href="langLink">{{ config.nav.lang.text }}</a>
-          </li> -->
+
+          <li v-if="langLabel && langLink" class="van-doc-header__top-nav-item">
+            <a class="van-doc-header__cube" :href="langLink">{{ langLabel }}</a>
+          </li>
         </ul>
       </div>
     </div>
@@ -53,7 +53,8 @@ export default {
   props: {
     lang: String,
     config: Object,
-    versions: Array
+    versions: Array,
+    langConfigs: Array
   },
 
   data() {
@@ -64,8 +65,20 @@ export default {
 
   computed: {
     langLink() {
-      const { lang } = this.config.nav;
-      return `#${this.$route.path.replace(lang.from, lang.to)}`;
+      return `#${this.$route.path.replace(this.lang, this.anotherLang.lang)}`;
+    },
+
+    langLabel() {
+      return this.anotherLang.label;
+    },
+
+    anotherLang() {
+      const items = this.langConfigs.filter(item => item.lang !== this.lang);
+      if (items.length) {
+        return items[0];
+      }
+
+      return {};
     },
 
     searchConfig() {

packages/vant-cli/site/desktop/components/Simulator.vue

@@ -9,7 +9,8 @@ export default {
   name: 'van-doc-simulator',
 
   props: {
-    src: String
+    src: String,
+    lang: String
   },
 
   data() {
@@ -32,6 +33,12 @@ export default {
     }
   },
 
+  watch: {
+    lang(val) {
+      location.hash = `#${location.hash.replace(this.lang, val)}`;
+    }
+  },
+
   mounted() {
     window.addEventListener('scroll', () => {
       this.scrollTop = window.scrollY;

packages/vant-cli/site/desktop/components/index.vue

@@ -4,21 +4,16 @@
       :lang="lang"
       :config="config"
       :versions="versions"
+      :lang-configs="langConfigs"
       @switch-version="$emit('switch-version', $event)"
     />
     <doc-nav :base="base" :nav-config="config.nav" />
-    <doc-container :has-simulator="!!(simulator || simulators.length)">
+    <doc-container :has-simulator="!!simulator ">
       <doc-content>
         <slot />
       </doc-content>
     </doc-container>
-    <doc-simulator v-if="simulator" :src="simulator" />
-    <doc-simulator
-      v-for="(url, index) in simulators"
-      v-show="index === currentSimulator"
-      :src="url"
-      :key="url"
-    />
+    <doc-simulator v-if="simulator" :src="simulator" :lang="lang" />
   </div>
 </template>
 
@@ -43,16 +38,13 @@ export default {
   props: {
     lang: String,
     versions: Array,
-    currentSimulator: Number,
     simulator: String,
+    langConfigs: Array,
+    currentSimulator: Number,
     config: {
       type: Object,
       required: true
     },
-    simulators: {
-      type: Array,
-      default: () => []
-    },
     base: {
       type: String,
       default: ''

packages/vant-cli/site/mobile/components/DemoHome.vue

@@ -26,7 +26,7 @@ export default {
 
   computed: {
     lang() {
-      const { lang } = this.$route.meta || {};
+      const { lang } = this.$route.meta;
       return lang;
     },
 

vant.config.js

@@ -12,6 +12,7 @@ module.exports = {
         title: 'Vant',
         description: '轻量、可靠的移动端 Vue 组件库',
         logo: 'https://img.yzcdn.cn/vant/logo.png',
+        langLabel: '中文',
         links: [
           {
             logo: 'https://b.yzcdn.cn/vant/logo/weapp.svg',
@@ -355,6 +356,7 @@ module.exports = {
         title: 'Vant',
         description: 'Mobile UI Components built on Vue',
         logo: 'https://img.yzcdn.cn/vant/logo.png',
+        langLabel: 'En',
         links: [
           {
             logo: 'https://b.yzcdn.cn/vant/logo/weapp.svg',