@varlet/cli 1.27.8 → 1.27.10

package/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',

package/lib/commands/compile.js

@@ -90,15 +90,19 @@ function compile(cmd) {
                     return [4 /*yield*/, Promise.all([runTask('types', compileTypes_1.compileTypes), runTask('template highlight', compileTemplateHighlight_1.compileTemplateHighlight)])];
                 case 2:
                     _b.sent();
+                    process.env.TARGET_MODULE = 'module';
                     return [4 /*yield*/, runTask('module', compileModule_1.compileModule)];
                 case 3:
                     _b.sent();
+                    process.env.TARGET_MODULE = 'esm-bundle';
                     return [4 /*yield*/, runTask('esm bundle', function () { return (0, compileModule_1.compileModule)('esm-bundle'); })];
                 case 4:
                     _b.sent();
+                    process.env.TARGET_MODULE = 'commonjs';
                     return [4 /*yield*/, runTask('commonjs', function () { return (0, compileModule_1.compileModule)('commonjs'); })];
                 case 5:
                     _b.sent();
+                    process.env.TARGET_MODULE = 'umd';
                     _a = !cmd.noUmd;
                     if (!_a) return [3 /*break*/, 7];
                     return [4 /*yield*/, runTask('umd', function () { return (0, compileModule_1.compileModule)('umd'); })];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "1.27.8",
+  "version": "1.27.10",
   "description": "cli of varlet",
   "bin": {
     "varlet-cli": "./lib/index.js"
@@ -33,9 +33,9 @@
     "@babel/helper-plugin-utils": "^7.14.5",
     "@babel/preset-env": "^7.14.8",
     "@babel/preset-typescript": "^7.14.5",
-    "@varlet/icons": "1.27.8",
-    "@varlet/markdown-vite-plugin": "1.27.8",
-    "@varlet/touch-emulator": "1.27.8",
+    "@varlet/icons": "1.27.10",
+    "@varlet/markdown-vite-plugin": "1.27.10",
+    "@varlet/touch-emulator": "1.27.10",
     "@vitejs/plugin-vue": "2.2.0",
     "@vitejs/plugin-vue-jsx": "1.3.5",
     "@vue/babel-plugin-jsx": "1.1.1",
@@ -68,6 +68,7 @@
   "devDependencies": {
     "@types/babel__core": "^7.1.12",
     "@types/fs-extra": "^9.0.2",
+    "@types/glob": "^7.1.3",
     "@types/hash-sum": "^1.0.0",
     "@types/jest": "^26.0.15",
     "@types/lodash": "^4.14.174",
@@ -75,7 +76,7 @@
     "@types/semver": "^7.3.9"
   },
   "peerDependencies": {
-    "@varlet/touch-emulator": "1.27.8",
+    "@varlet/touch-emulator": "1.27.10",
     "@vue/test-utils": "^2.0.0-rc.6",
     "clipboard": "^2.0.6",
     "live-server": "^1.2.1",

package/site/mobile/App.vue

@@ -4,7 +4,7 @@
       <var-site-app-bar class="app-bar" title-position="left" :title="bigCamelizeComponentName">
         <template #left>
           <var-site-button v-if="showBackIcon" text round @click="back" color="transparent" text-color="#fff">
-            <var-site-icon name="chevron-left" :size="28" style="margin-top: 1px" />
+            <var-site-icon name="chevron-left" class="arrow-left" style="margin-top: 1px" />
           </var-site-button>
           <var-site-button
             v-if="!showBackIcon && github"
@@ -15,7 +15,7 @@
             color="transparent"
             text-color="#fff"
           >
-            <var-site-icon name="github" :size="28" style="margin-top: 1px" />
+            <var-site-icon name="github" class="github" style="margin-top: 1px" />
           </var-site-button>
         </template>
         <template #right>
@@ -31,21 +31,21 @@
             @click="toggleTheme"
           >
             <var-site-icon
-              size="24px"
+              class="theme"
               color="#fff"
               :name="currentThemes === 'themes' ? 'white-balance-sunny' : 'weather-night'"
             />
           </var-site-button>
           <var-site-button
-            style="padding-right: 6px"
+            class="i18n-button"
             text
             color="transparent"
             text-color="#fff"
             @click.stop="showMenu = true"
             v-if="languages"
           >
-            <var-site-icon name="translate" :size="24" />
-            <var-site-icon name="chevron-down" :size="22" />
+            <var-site-icon name="translate" class="i18n" />
+            <var-site-icon name="chevron-down" class="arrow-down" />
           </var-site-button>
         </template>
       </var-site-app-bar>
@@ -200,6 +200,7 @@ body {
   margin: 0;
   padding: 0;
   min-height: 100%;
+  font-size: 16px;
   font-family: 'Roboto', sans-serif;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: var(--site-config-color-bar);
@@ -246,7 +247,7 @@ header {
 }
 
 .router-view__block {
-  padding: 54px 12px 15px;
+  padding: 55px 15px 15px;
 }
 
 * {
@@ -263,4 +264,28 @@ header {
     background: var(--site-config-color-mobile-language-active-background);
   }
 }
+
+.arrow-left {
+  font-size: 28px !important;
+}
+
+.github {
+  font-size: 28px !important;
+}
+
+.theme {
+  font-size: 24px !important;
+}
+
+.i18n {
+  font-size: 24px !important;
+}
+
+.arrow-down {
+  font-size: 22px !important;
+}
+
+.i18n-button {
+  padding-right: 6px !important;
+}
 </style>

package/site/mobile/components/AppHome.vue

@@ -6,19 +6,17 @@
     </h1>
     <h2 class="varlet-home__desc">{{ description[lang] }}</h2>
   </div>
-  <var-site-cell
+
+  <div
+    class="varlet-home__cell"
     v-for="component in components"
     :key="component.text"
-    @click="toComponent(component)"
     v-ripple
+    @click="toComponent(component)"
   >
-    <template #extra>
-      <var-site-icon name="chevron-right" size="14" />
-    </template>
-    <template #default>
-      {{ component.text[lang] }}
-    </template>
-  </var-site-cell>
+    <span>{{ component.text[lang] }}</span>
+    <var-site-icon name="chevron-right" size="14" />
+  </div>
 </template>
 
 <script lang='ts'>
@@ -85,7 +83,7 @@ export default {
 
 .varlet-home__title {
   margin: 0 0 16px;
-  font-size: 32px;
+  font-size: 34px;
 }
 
 .varlet-home__title,
@@ -103,8 +101,8 @@ export default {
 }
 
 .varlet-home__image {
-  width: 32px;
-  height: 32px;
+  width: 36px;
+  height: 36px;
 }
 
 .varlet-home__image,
@@ -117,7 +115,13 @@ export default {
   margin-left: 16px;
 }
 
-.var-site-cell {
+.varlet-home__cell {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 40px;
+  padding: 10px 12px;
+  font-size: 15px;
   cursor: pointer;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   transition: all 0.3s;

package/site/mobile/components/styles/common.less

@@ -0,0 +1,64 @@
+@import './var';
+
+.var-site {
+  &--box {
+    box-sizing: border-box;
+
+    * {
+      box-sizing: border-box;
+    }
+  }
+
+  &--relative {
+    position: relative;
+  }
+
+  &--absolute {
+    position: absolute;
+  }
+
+  &--hidden {
+    overflow: hidden;
+  }
+
+  &--lock {
+    overflow: hidden;
+  }
+
+  &--block {
+    display: block;
+  }
+
+  &--inline-block {
+    display: inline-block;
+  }
+
+  &--flex {
+    display: flex;
+  }
+
+  &--inline-flex {
+    display: inline-flex;
+  }
+}
+
+:root {
+  --site-font-size-xs: @site-font-size-xs;
+  --site-font-size-sm: @site-font-size-sm;
+  --site-font-size-md: @site-font-size-md;
+  --site-font-size-lg: @site-font-size-lg;
+  --site-icon-size-xs: @site-icon-size-xs;
+  --site-icon-size-sm: @site-icon-size-sm;
+  --site-icon-size-md: @site-icon-size-md;
+  --site-icon-size-lg: @site-icon-size-lg;
+  --site-color-primary: @site-color-primary;
+  --site-color-info: @site-color-info;
+  --site-color-success: @site-color-success;
+  --site-color-warning: @site-color-warning;
+  --site-color-danger: @site-color-danger;
+  --site-color-disabled: @site-color-disabled;
+  --site-cubic-bezier: @site-cubic-bezier;
+  --site-shadow-key-umbra-opacity: @site-shadow-key-umbra-opacity;
+  --site-shadow-key-penumbra-opacity: @site-shadow-key-penumbra-opacity;
+  --site-shadow-key-ambient-opacity: @site-shadow-key-ambient-opacity;
+}

package/site/mobile/components/styles/elevation.less

@@ -0,0 +1,126 @@
+.var-site-elevation {
+  &--0 {
+    box-shadow: 0 0 0 0 var(--site-shadow-key-umbra-opacity), 0 0 0 0 var(--site-shadow-key-penumbra-opacity),
+      0 0 0 0 var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--1 {
+    box-shadow: 0 2px 1px -1px var(--site-shadow-key-umbra-opacity), 0 1px 1px 0 var(--site-shadow-key-penumbra-opacity),
+      0 1px 3px 0 var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--2 {
+    box-shadow: 0 3px 1px -2px var(--site-shadow-key-umbra-opacity), 0 2px 2px 0 var(--site-shadow-key-penumbra-opacity),
+      0 1px 5px 0 var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--3 {
+    box-shadow: 0 3px 3px -2px var(--site-shadow-key-umbra-opacity), 0 3px 4px 0 var(--site-shadow-key-penumbra-opacity),
+      0 1px 8px 0 var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--4 {
+    box-shadow: 0 2px 4px -1px var(--site-shadow-key-umbra-opacity), 0 4px 5px 0 var(--site-shadow-key-penumbra-opacity),
+      0 1px 10px 0 var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--5 {
+    box-shadow: 0 3px 5px -1px var(--site-shadow-key-umbra-opacity), 0 5px 8px 0 var(--site-shadow-key-penumbra-opacity),
+      0 1px 14px 0 var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--6 {
+    box-shadow: 0 3px 5px -1px var(--site-shadow-key-umbra-opacity), 0 6px 10px 0 var(--site-shadow-key-penumbra-opacity),
+      0 1px 18px 0 var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--7 {
+    box-shadow: 0 4px 5px -2px var(--site-shadow-key-umbra-opacity), 0 7px 10px 1px var(--site-shadow-key-penumbra-opacity),
+      0 2px 16px 1px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--8 {
+    box-shadow: 0 5px 5px -3px var(--site-shadow-key-umbra-opacity), 0 8px 10px 1px var(--site-shadow-key-penumbra-opacity),
+      0 3px 14px 2px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--9 {
+    box-shadow: 0 5px 6px -3px var(--site-shadow-key-umbra-opacity), 0 9px 12px 1px var(--site-shadow-key-penumbra-opacity),
+      0 3px 16px 2px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--10 {
+    box-shadow: 0 6px 6px -3px var(--site-shadow-key-umbra-opacity), 0 10px 14px 1px var(--site-shadow-key-penumbra-opacity),
+      0 4px 18px 3px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--11 {
+    box-shadow: 0 6px 7px -4px var(--site-shadow-key-umbra-opacity), 0 11px 15px 1px var(--site-shadow-key-penumbra-opacity),
+      0 4px 20px 3px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--12 {
+    box-shadow: 0 7px 8px -4px var(--site-shadow-key-umbra-opacity), 0 12px 17px 2px var(--site-shadow-key-penumbra-opacity),
+      0 5px 22px 4px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--13 {
+    box-shadow: 0 7px 8px -4px var(--site-shadow-key-umbra-opacity), 0 13px 19px 2px var(--site-shadow-key-penumbra-opacity),
+      0 5px 24px 4px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--14 {
+    box-shadow: 0 7px 9px -4px var(--site-shadow-key-umbra-opacity), 0 14px 21px 2px var(--site-shadow-key-penumbra-opacity),
+      0 5px 26px 4px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--15 {
+    box-shadow: 0 8px 9px -5px var(--site-shadow-key-umbra-opacity), 0 15px 22px 2px var(--site-shadow-key-penumbra-opacity),
+      0 6px 28px 5px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--16 {
+    box-shadow: 0 8px 10px -5px var(--site-shadow-key-umbra-opacity), 0 16px 24px 2px var(--site-shadow-key-penumbra-opacity),
+      0 6px 30px 5px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--17 {
+    box-shadow: 0 8px 11px -5px var(--site-shadow-key-umbra-opacity), 0 17px 26px 2px var(--site-shadow-key-penumbra-opacity),
+      0 6px 32px 5px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--18 {
+    box-shadow: 0 9px 11px -5px var(--site-shadow-key-umbra-opacity), 0 18px 28px 2px var(--site-shadow-key-penumbra-opacity),
+      0 7px 34px 6px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--19 {
+    box-shadow: 0 9px 12px -6px var(--site-shadow-key-umbra-opacity), 0 19px 29px 2px var(--site-shadow-key-penumbra-opacity),
+      0 7px 36px 6px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--20 {
+    box-shadow: 0 10px 13px -6px var(--site-shadow-key-umbra-opacity), 0 20px 31px 3px var(--site-shadow-key-penumbra-opacity),
+      0 8px 38px 7px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--21 {
+    box-shadow: 0 10px 13px -6px var(--site-shadow-key-umbra-opacity), 0 21px 33px 3px var(--site-shadow-key-penumbra-opacity),
+      0 8px 40px 7px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--22 {
+    box-shadow: 0 10px 14px -6px var(--site-shadow-key-umbra-opacity), 0 22px 35px 3px var(--site-shadow-key-penumbra-opacity),
+      0 8px 42px 7px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--23 {
+    box-shadow: 0 11px 14px -7px var(--site-shadow-key-umbra-opacity), 0 23px 36px 3px var(--site-shadow-key-penumbra-opacity),
+      0 9px 44px 8px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--24 {
+    box-shadow: 0 11px 15px -7px var(--site-shadow-key-umbra-opacity), 0 24px 38px 3px var(--site-shadow-key-penumbra-opacity),
+      0 9px 46px 8px var(--site-shadow-key-ambient-opacity);
+  }
+}

package/site/mobile/components/styles/var.less

@@ -0,0 +1,27 @@
+// 文字
+@site-font-size-xs: 10px;
+@site-font-size-sm: 12px;
+@site-font-size-md: 14px;
+@site-font-size-lg: 16px;
+
+// 图标
+@site-icon-size-xs: 16px;
+@site-icon-size-sm: 18px;
+@site-icon-size-md: 20px;
+@site-icon-size-lg: 22px;
+
+//颜色
+@site-color-primary: #3a7afe;
+@site-color-info: #00afef;
+@site-color-success: #00c48f;
+@site-color-warning: #ff9f00;
+@site-color-danger: #f44336;
+@site-color-disabled: #e0e0e0;
+
+// 动画函数
+@site-cubic-bezier: cubic-bezier(0.25, 0.8, 0.5, 1);
+
+// 阴影
+@site-shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2);
+@site-shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14);
+@site-shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);

package/site/mobile/main.ts

@@ -6,7 +6,7 @@ import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
 
 import Icon from '../components/icon'
-import AppBar from '../components/app-bar'
+import AppBar from './components/app-bar'
 import Button from '../components/button'
 import Cell from '../components/cell'
 import Ripple from '../components/ripple'

package/site/pc/Layout.vue

@@ -386,6 +386,7 @@ iframe {
         padding: 20px;
         margin-bottom: 30px;
         box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+
         &:first-child{
           margin-top: 30px;
         }

package/site/pc/components/AnimationBox.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, onMounted, onBeforeUnmount, ref, useAttrs } from 'vue'
+import { defineComponent, onMounted, onBeforeUnmount, onUnmounted, ref, useAttrs } from 'vue'
 import { animationBoxData, animationEl, animationElClientRect } from '../floating'
 
 export default defineComponent({
@@ -15,13 +15,23 @@ export default defineComponent({
       mutationObserver.value = new MutationObserver(() => {
         animationElClientRect.value = varletLogoAnimationRef?.value?.getBoundingClientRect();
       });
-      mutationObserver.value.observe(document.body, { attributes: true, subtree: true, childList:true });
+      const logoContainer = varletLogoAnimationRef.value?.parentNode?.parentNode
+      mutationObserver.value.observe(logoContainer || document.body, {
+        attributes: true, 
+        subtree: true, 
+        childList:true 
+      });
     })
 
     onBeforeUnmount(() => {
       mutationObserver.value?.disconnect();
     })
 
+    onUnmounted(() => {
+      animationEl.value = undefined
+      animationElClientRect.value = undefined
+    })
+
     return {
       varletLogoAnimationRef,
     }

package/site/pc/components/AppHeader.vue

@@ -1,11 +1,37 @@
 <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>
 
     <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"
+              :class="{ 'varlet-site-header__animation-list--active': currentVersion === key }"
+              @click="open(value)"
+            >{{ key }}
+            </var-site-cell>
+          </div>
+        </transition>
+      </div>
+
       <a class="varlet-site-header__link" target="_blank" :href="playground" v-ripple v-if="playground">
         <var-site-icon name="code-json" :size="24" />
       </a>
@@ -24,29 +50,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 +93,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 currentVersion: Ref<string> = ref(get(config, 'pc.header.version.current'))
+    const versionItems: Ref<Record<string, string>> = ref(get(config, 'pc.header.version.items'))
     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(versionItems.value))
 
     const backRoot = () => {
       const { language: lang } = getPCLocationInfo()
@@ -91,7 +122,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 +139,14 @@ export default defineComponent({
       ;(document.getElementById('mobile') as HTMLIFrameElement).contentWindow!.postMessage(getThemesMessage(), '*')
     }
 
+    const open = (value: string) => {
+      if (value !== currentVersion.value) {
+        setTimeout(() => {
+          window.location.href = value
+        }, 350);
+      }
+    }
+
     watchThemes((themes, from) => {
       from === 'mobile' && setCurrentThemes(themes)
     })
@@ -118,13 +157,18 @@ export default defineComponent({
     return {
       logo,
       title,
+      currentVersion,
       languages,
+      versionItems,
       nonEmptyLanguages,
+      nonEmptyVersions,
       playground,
       github,
-      isOpenMenu,
+      isOpenLanguageMenu,
+      isOpenVersionsMenu,
       darkMode,
       currentThemes,
+      open,
       backRoot,
       handleLanguageChange,
       toggleTheme,
@@ -198,6 +242,7 @@ export default defineComponent({
 
   &__title {
     font-size: 22px;
+    margin-right: 12px;
   }
 
   &__tail {
@@ -226,6 +271,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: 4px;
+
+    &:hover {
+      background: var(--site-config-color-nav-button-hover-background);
+    }
+  }
+
   &__link {
     border-radius: 50%;
     width: 42px;
@@ -264,7 +326,7 @@ export default defineComponent({
     }
   }
 
-  &__language-list {
+  &__animation-list {
     background: var(--site-config-color-bar);
     cursor: pointer;
     color: var(--site-config-color-text);
@@ -287,5 +349,9 @@ export default defineComponent({
       color: var(--site-config-color-pc-language-active);
     }
   }
+
+   &__animation-versions {
+    left: -7px;
+  }
 }
 </style>

package/site/pc/components/LogoAnimation.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import config from '@config'
 import { get } from 'lodash-es'
-import { computed, defineComponent, onBeforeMount, onMounted, onBeforeUnmount, ref, watch, nextTick } from 'vue'
+import { computed, defineComponent, onMounted, onBeforeUnmount, ref, watch, nextTick } from 'vue'
 import { animationBoxData, animationEl, animationElClientRect } from '../floating'
 import type { Ref, StyleValue } from 'vue'
 import { useRouter } from 'vue-router'
@@ -27,38 +27,33 @@ export default defineComponent({
     }))
 
     const router = useRouter()
-    router.beforeEach(async () => {
-      if (!floatingState.value) {
+    router.beforeEach(async (to: any, from: any) => {
+      if (!floatingState.value && from.path !== '/') {
         floatingState.value = true
       }
-      await nextTick();
-    })
-
-    onBeforeMount(() => {
-      floatingState.value = false
     })
 
     onMounted(() => {
-      window.addEventListener('resize', resetPosition, false);
+      window.addEventListener('resize', resetPosition, false)
     })
 
     onBeforeUnmount(() => {
       resetTimer && clearTimeout(resetTimer)
-      window.removeEventListener('resize', resetPosition);
+      window.removeEventListener('resize', resetPosition)
     })
 
     const land = () => {
-      floatingState.value = false;
+      floatingState.value = false
     }
 
-    let resetTimer: number;
+    let resetTimer: number
 
     const resetPosition = async () => {
       if (floatingState.value) {
         floatingState.value = false
-        await nextTick();
+        await nextTick()
       }
-      clearTimeout(resetTimer);
+      clearTimeout(resetTimer)
       const newBRect = animationEl.value?.getBoundingClientRect()
       if (newBRect) {
         resetTimer = window.setTimeout(() => {
@@ -73,21 +68,35 @@ export default defineComponent({
       styles,
       animationEl,
       floatingState,
-      land
+      land,
     }
   },
 })
 </script>
 
 <template>
-  <Teleport :to="animationEl" v-if="animationEl">
-    <img v-show="!floatingState" v-bind="animationBoxData.attrs" :style="styles" :src="logo" alt="logo"
-      v-if="logo && animationEl" class="varlet-cli-logo-animation" />
+  <Teleport :to="animationEl || 'body'">
+    <img
+      v-show="!floatingState"
+      v-bind="animationBoxData.attrs"
+      :style="styles"
+      :src="logo"
+      alt="logo"
+      v-if="logo && animationEl"
+      class="varlet-cli-logo-animation"
+      :class="{ 'varlet-cli-logo-position': !animationEl }"
+    />
   </Teleport>
   <div v-show="floatingState">
-    <img @transitionend="land" v-bind="animationBoxData.attrs" :style="styles" :src="logo" alt="logo"
+    <img
+      @transitionend="land"
+      v-bind="animationBoxData.attrs"
+      :style="styles"
+      :src="logo"
+      alt="logo"
       v-if="logo && animationEl"
-      class="varlet-cli-logo-animation varlet-cli-logo-position varlet-cli-logo-transition" />
+      class="varlet-cli-logo-animation varlet-cli-logo-position varlet-cli-logo-transition"
+    />
   </div>
 </template>
 

package/site/pc/pages/index/index.less

@@ -188,6 +188,7 @@
       height: 90px;
       flex-shrink: 0;
       margin-right: 25px;
+      z-index: 2;
     }
   }
 }

package/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,