feat: varlet/cli site version config

packages/varlet-cli/generators/base/varlet.config.js

@@ -61,6 +61,8 @@ module.exports = {
       'zh-CN': '一个组件库',
     },
     header: {
+      darkMode: null,
+      versions: null,
       i18n: null,
       playground: null,
       github: 'https://github.com/varletjs/varlet',

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

@@ -1,8 +1,33 @@
 <template>
   <div class="varlet-site-header">
-    <div class="varlet-site-header__lead" @click="backRoot">
-      <animation-box class="varlet-site-header__logo" />
-      <div class="varlet-site-header__title" v-if="title">{{ title }}</div>
+    <div class="varlet-site-header__lead">
+      <animation-box class="varlet-site-header__logo"  @click="backRoot" />
+      <div class="varlet-site-header__title" v-if="title"  @click="backRoot">{{ title }}</div>
+      <div
+        class="varlet-site-header__versions"
+        @mouseenter="isOpenVersionsMenu = true"
+        @mouseleave="isOpenVersionsMenu = false"
+        v-if="versions"
+      >
+        {{ nowVersion }}
+        <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"
+              :class="{ 'varlet-site-header__animation-list--active': nowVersion === key }"
+              @click="open(value)"
+              >{{ key }}
+            </var-site-cell>
+          </div>
+        </transition>
+      </div>
     </div>
 
     <div class="varlet-site-header__tail">
@@ -24,29 +49,30 @@
       </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="handleLanguageChange(key)"
               >{{ value }}
             </var-site-cell>
           </div>
         </transition>
       </div>
+
     </div>
   </div>
 </template>
@@ -66,22 +92,26 @@ export default defineComponent({
   props: {
     language: {
       type: String,
-    },
+    }
   },
   setup() {
     const title: Ref<string> = ref(get(config, 'title'))
     const logo: Ref<string> = ref(get(config, 'logo'))
     const themesKey = get(config, 'themesKey')
     const languages: Ref<Record<string, string>> = ref(get(config, 'pc.header.i18n'))
+    const nowVersion: Ref<string> = ref(get(config, 'pc.header.versions.default'))
+    const versions: Ref<Record<string, string>> = ref(get(config, 'pc.header.versions.item'))
     const playground: Ref<string> = ref(get(config, 'pc.header.playground'))
     const github: Ref<string> = ref(get(config, 'pc.header.github'))
     const redirect = get(config, 'pc.redirect')
     const darkMode: Ref<boolean> = ref(get(config, 'pc.header.darkMode'))
     const currentThemes = ref(getBrowserThemes(themesKey))
 
-    const isOpenMenu: Ref<boolean> = ref(false)
+    const isOpenLanguageMenu: Ref<boolean> = ref(false)
+    const isOpenVersionsMenu: Ref<boolean> = ref(false)
     const router = useRouter()
     const nonEmptyLanguages: ComputedRef<Record<string, string>> = computed(() => removeEmpty(languages.value))
+    const nonEmptyVersions: ComputedRef<Record<string, string>> = computed(() => removeEmpty(versions.value))
 
     const backRoot = () => {
       const { language: lang } = getPCLocationInfo()
@@ -91,7 +121,7 @@ export default defineComponent({
     const handleLanguageChange = (language: string) => {
       const { menuName } = getPCLocationInfo()
       router.replace(`/${language}/${menuName}`)
-      isOpenMenu.value = false
+      isOpenLanguageMenu.value = false
     }
 
     const setCurrentThemes = (themes: 'themes' | 'darkThemes') => {
@@ -108,6 +138,14 @@ export default defineComponent({
       ;(document.getElementById('mobile') as HTMLIFrameElement).contentWindow!.postMessage(getThemesMessage(), '*')
     }
 
+    const open = (value: string) => {
+      if (value !== nowVersion.value) {
+        setTimeout(() => {
+          window.location.href = value
+        }, 350);
+      }
+    }
+
     watchThemes((themes, from) => {
       from === 'mobile' && setCurrentThemes(themes)
     })
@@ -118,13 +156,18 @@ export default defineComponent({
     return {
       logo,
       title,
+      nowVersion,
       languages,
+      versions,
       nonEmptyLanguages,
+      nonEmptyVersions,
       playground,
       github,
-      isOpenMenu,
+      isOpenLanguageMenu,
+      isOpenVersionsMenu,
       darkMode,
       currentThemes,
+      open,
       backRoot,
       handleLanguageChange,
       toggleTheme,
@@ -198,6 +241,7 @@ export default defineComponent({
 
   &__title {
     font-size: 22px;
+    margin-right: 12px;
   }
 
   &__tail {
@@ -226,6 +270,22 @@ 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;
+
+    &:hover {
+      background: var(--site-config-color-nav-button-hover-background);
+    }
+  }
+
   &__link {
     border-radius: 50%;
     width: 42px;
@@ -264,7 +324,7 @@ export default defineComponent({
     }
   }
 
-  &__language-list {
+  &__animation-list {
     background: var(--site-config-color-bar);
     cursor: pointer;
     color: var(--site-config-color-text);
@@ -287,5 +347,9 @@ export default defineComponent({
       color: var(--site-config-color-pc-language-active);
     }
   }
+
+   &__animation-versions {
+    left: -7px;
+  }
 }
 </style>

packages/varlet-cli/varlet.default.config.js

@@ -29,6 +29,7 @@ module.exports = {
         'zh-CN': '中文',
         'en-US': 'English',
       },
+      versions: null,
       github: 'https://github.com/varletjs/varlet',
       playground: 'https://varlet-ui-playground.vercel.app',
       darkMode: true,

packages/varlet-ui/docs/cli.en-US.md

@@ -162,6 +162,7 @@ module.exports = {
     },
     header: {
       darkMode: null,
+      versions: null,
       i18n: null,
       github: 'https://github.com/varletjs/varlet',
     },

packages/varlet-ui/docs/cli.zh-CN.md

@@ -158,6 +158,7 @@ module.exports = {
     },
     header: {
       darkMode: null,
+      versions: null,
       i18n: null,
       github: 'https://github.com/varletjs/varlet',
     },

packages/varlet-ui/varlet.config.js

@@ -4,6 +4,15 @@ module.exports = {
     baidu: 'https://hm.baidu.com/hm.js?5c628ce58967c90ff4dd9c8803d930fa',
   },
   pc: {
+    header: {
+      versions: {
+        default: "VUE3",
+        item: {
+          'VUE3': 'https://varlet-varletjs.vercel.app/',
+          'VUE2': 'https://varlet-vue2.vercel.app/'
+        }
+      }
+    },
     menu: [
       {
         text: {