feat: add versions config (#57)

Author: zhangmo8

packages/varlet-vue2-cli/site/pc/components/AppHeader.vue

@@ -6,6 +6,30 @@
     </div>
 
     <div class="varlet-site-header__tail">
+      <div
+        class="varlet-site-header__versions"
+        @mouseenter="isOpenVersionsMenu = true"
+        @mouseleave="isOpenVersionsMenu = false"
+        v-if="versionItems"
+      >
+        <span style="font-size: 14px;">{{ currentVersion }}</span>
+        <var-site-icon name="chevron-down" />
+        <transition name="fade">
+          <div
+            class="varlet-site-header__animation-list varlet-site-header__animation-versions var-site-elevation--5"
+            v-show="isOpenVersionsMenu"
+            :style="{ pointerEvents: isOpenVersionsMenu ? 'auto' : 'none' }"
+          >
+            <var-site-cell
+              v-for="(value, key) in nonEmptyVersions"
+              v-ripple
+              :key="key"
+              @click.native="open(value)"
+            >{{ key }}
+            </var-site-cell>
+          </div>
+        </transition>
+      </div>
       <a
         class="varlet-site-header__link"
         target="_blank"
@@ -41,23 +65,23 @@
       </div>
       <div
         class="varlet-site-header__language"
-        @mouseenter="isOpenMenu = true"
-        @mouseleave="isOpenMenu = false"
+        @mouseenter="isOpenLanguageMenu = true"
+        @mouseleave="isOpenLanguageMenu = false"
         v-if="languages"
       >
         <var-site-icon name="translate" size="26px" />
         <var-site-icon name="chevron-down" />
         <transition name="fade">
           <div
-            class="varlet-site-header__language-list var-site-elevation--5"
-            v-show="isOpenMenu"
-            :style="{ pointerEvents: isOpenMenu ? 'auto' : 'none' }"
+            class="varlet-site-header__animation-list var-site-elevation--5"
+            v-show="isOpenLanguageMenu"
+            :style="{ pointerEvents: isOpenLanguageMenu ? 'auto' : 'none' }"
           >
             <var-site-cell
               v-for="(value, key) in nonEmptyLanguages"
               v-ripple
               :key="key"
-              :class="{ 'varlet-site-header__language-list--active': language === key }"
+              :class="{ 'varlet-site-header__animation-list--active': language === key }"
               @click.native="handleLanguageChange(key)"
             >
               {{ value }}
@@ -88,6 +112,9 @@ export default defineComponent({
   computed: {
     nonEmptyLanguages() {
       return removeEmpty(this.languages)
+    },
+    nonEmptyVersions() {
+      return removeEmpty(this.versionItems)
     }
   },
 
@@ -96,11 +123,14 @@ export default defineComponent({
     redirect: get(config, 'pc.redirect'),
     themesKey: get(config, 'themesKey'),
     languages: get(config, 'pc.header.i18n'),
+    currentVersion: get(config, 'pc.header.version.current'),
+    versionItems: get(config, 'pc.header.version.items'),
     playground: get(config, 'pc.header.playground'),
     github: get(config, 'pc.header.github'),
     darkMode: get(config, 'pc.header.darkMode'),
     currentThemes: getBrowserThemes(get(config, 'themesKey')),
-    isOpenMenu: false,
+    isOpenLanguageMenu: false,
+    isOpenVersionsMenu: false
   }),
 
   created() {
@@ -114,6 +144,12 @@ export default defineComponent({
   },
 
   methods: {
+    open(value) {
+      setTimeout(() => {
+         window.location.href = value
+      }, 350);
+    },
+
     backRoot() {
       const { language: lang } = getPCLocationInfo()
       this.$router.replace(`/${lang}${this.redirect}`)
@@ -122,7 +158,7 @@ export default defineComponent({
     handleLanguageChange(language) {
       const { menuName } = getPCLocationInfo()
       this.$router.replace(`/${language}/${menuName}`)
-      this.isOpenMenu = false
+      this.isOpenLanguageMenu = false
     },
 
     setCurrentThemes(themes) {
@@ -240,6 +276,23 @@ export default defineComponent({
     }
   }
 
+  &__versions {
+    border-radius: 3px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    padding-right: 10px;
+    padding-left: 18px;
+    position: relative;
+    cursor: pointer;
+    transition: background-color 0.25s;
+    margin-right: 6px;
+
+    &:hover {
+      background: var(--site-config-color-nav-button-hover-background);
+    }
+  }
+
   &__link {
     border-radius: 50%;
     width: 42px;
@@ -278,7 +331,7 @@ export default defineComponent({
     }
   }
 
-  &__language-list {
+  &__animation-list {
     background: var(--site-config-color-bar);
     cursor: pointer;
     color: var(--site-config-color-text);
@@ -300,6 +353,10 @@ export default defineComponent({
       background: var(--site-config-color-pc-language-active-background);
       color: var(--site-config-color-pc-language-active);
     }
+
+    &__animation-versions {
+      left: -7px;
+    }
   }
 }
 </style>

packages/varlet-vue2-ui/varlet.config.js

@@ -4,6 +4,14 @@ module.exports = {
     baidu: 'https://hm.baidu.com/hm.js?5c628ce58967c90ff4dd9c8803d930fa',
   },
   pc: {
+    header: {
+      version: {
+        current: 'Vue 2',
+        items: {
+          'Vue 3': 'https://varlet-varletjs.vercel.app/',
+        },
+      },
+    },
     menu: [
       {
         text: {