@varlet/cli 1.27.8-alpha.1651665460392 → 1.27.9

package/site/pc/Layout.vue

@@ -0,0 +1,397 @@
+<script lang="ts">
+import config from '@config'
+import AppMobile from './components/AppMobile.vue'
+import AppHeader from './components/AppHeader.vue'
+import AppSidebar from './components/AppSidebar.vue'
+import { defineComponent, nextTick, onMounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { get } from 'lodash-es'
+import { getPCLocationInfo, MenuTypes } from '../utils'
+import type { Ref } from 'vue'
+
+export interface Menu {
+  doc: string
+  text: Record<string, string>
+  type: MenuTypes
+}
+
+export default defineComponent({
+  components: {
+    AppMobile,
+    AppHeader,
+    AppSidebar
+  },
+  setup() {
+    const menu: Ref<Menu[]> = ref(get(config, 'pc.menu', []))
+    const useMobile = ref(get(config, 'useMobile'))
+    const mobileRedirect = get(config, 'mobile.redirect')
+
+    const language: Ref<string> = ref('')
+    const componentName: Ref<null | string> = ref(null)
+    const menuName: Ref<string> = ref('')
+    const doc: Ref<HTMLElement | null> = ref(null)
+    const route = useRoute()
+
+    const getComponentNameByMenuName = (menuName: string) => {
+      const currentMenu = menu.value.find(menu => menu.doc === menuName)
+      return currentMenu?.type === MenuTypes.COMPONENT ? menuName : mobileRedirect.slice(1)
+    }
+
+    const init = () => {
+      const { menuName } = getPCLocationInfo()
+
+      nextTick(() => {
+        const children = document
+          .querySelector('.varlet-site-sidebar')!
+          .getElementsByClassName('var-site-cell')
+        const index = menu.value.findIndex((item) => item.doc === menuName)
+
+        if (index !== -1) {
+          children[index].scrollIntoView({
+            block: 'center',
+            inline: 'start',
+          })
+        }
+      })
+    }
+
+    const handleSidebarChange = (menu: Menu) => {
+      doc.value!.scrollTop = 0
+      componentName.value = getComponentNameByMenuName(menu.doc)
+      menuName.value = menu.doc
+    }
+
+    onMounted(init)
+
+    watch(
+      () => route.path,
+      () => {
+        const { language: lang, menuName: _menuName } = getPCLocationInfo()
+        if (!lang || !_menuName) {
+          return
+        }
+
+        componentName.value = getComponentNameByMenuName(_menuName)
+        menuName.value = _menuName
+        language.value = lang
+        document.title = get(config, 'pc.title')[lang] as string
+      },
+      { immediate: true }
+    )
+
+    return {
+      menu,
+      language,
+      componentName,
+      menuName,
+      doc,
+      useMobile,
+      handleSidebarChange,
+    }
+  },
+})
+</script>
+
+<template>
+  <div class="varlet-site">
+    <app-header :language="language" />
+
+    <div class="varlet-site-content">
+      <app-sidebar
+        :language="language"
+        :menu="menu"
+        :menu-name="menuName"
+        @change="handleSidebarChange"
+      />
+
+      <div
+        class="varlet-site-doc-container"
+        ref="doc"
+        :class="[!useMobile && 'varlet-site-doc-container--pc-only']"
+      >
+        <router-view />
+      </div>
+
+      <app-mobile
+        :component-name="componentName"
+        :language="language"
+        :replace="menuName"
+        v-show="useMobile"
+      />
+    </div>
+  </div>
+</template>
+
+<style>
+.hljs {
+  background: var(--site-config-color-hl-background) !important;
+  padding: 0 !important;
+  transition: all .25s
+}
+
+.hljs code {
+  line-height: 31px;
+}
+
+.hljs-comment, .hljs-meta, .hljs-quote {
+  color: var(--site-config-color-hl-group-a)
+}
+
+.hljs-keyword, .hljs-name, .hljs-selector-tag, .hljs-tag {
+  color: var(--site-config-color-hl-group-b)
+}
+
+.hljs-attribute, .hljs-selector-id {
+  color: var(--site-config-color-hl-group-c)
+}
+
+.hljs-addition, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-string {
+  color: var(--site-config-color-hl-group-d)
+}
+
+.hljs-subst {
+  color: var(--site-config-color-hl-group-e)
+}
+
+.hljs-link, .hljs-regexp {
+  color: var(--site-config-color-hl-group-f)
+}
+
+.hljs-doctag, .hljs-section, .hljs-title, .hljs-type {
+  color: var(--site-config-color-hl-group-g)
+}
+
+.hljs-bullet, .hljs-literal, .hljs-symbol, .hljs-template-variable, .hljs-variable {
+  color: var(--site-config-color-hl-group-h)
+}
+
+.hljs-deletion, .hljs-number {
+  color: var(--site-config-color-hl-group-i)
+}
+</style>
+
+<style lang="less">
+@doc-active: {
+  display: inline;
+  font-family: inherit;
+  padding: 0;
+  white-space: pre-wrap;
+}
+
+* {
+  transition: background-color .25s, box-shadow .25s;
+}
+
+iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.varlet {
+  &-introduce {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 20px 0;
+    padding: 90px 40px;
+    border-top: 6px solid var(--site-config-color-introduce-border);
+    border-radius: 2px;
+    background: var(--site-config-color-bar);
+    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);
+
+    &__row {
+      display: flex;
+      align-items: center;
+    }
+
+    &__image {
+      width: 60px;
+      margin-right: 20px;
+    }
+
+    &__name {
+      font-size: 60px;
+    }
+
+    &__des {
+      color: var(--site-config-color-sub-text);
+      font-size: 16px;
+      margin-top: 16px;
+      -webkit-font-smoothing: antialiased;
+    }
+  }
+
+  &-component-preview {
+    margin-top: 20px;
+  }
+
+  &-site {
+    min-width: 1200px;
+    padding: 60px 0 0;
+    &-content {
+      display: flex;
+      background: var(--site-config-color-body);
+      margin-left: 240px;
+      min-height: calc(100vh - 60px);
+    }
+
+    &-doc-container {
+      flex: 1 0 0;
+      min-width: 500px;
+      padding: 0 25px;
+      overflow-x: hidden;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      &--pc-only {
+        padding: 0 90px 0 30px;
+      }
+    }
+
+    &-doc {
+      a {
+        color: var(--site-config-color-link);
+        -webkit-font-smoothing: antialiased;
+        word-break: keep-all;
+        font-size: 15px;
+        @doc-active();
+
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        position: relative;
+        color: var(--site-config-color-text);
+        font-weight: normal;
+        line-height: 1.5;
+      }
+
+      h1 {
+        line-height: 40px;
+        font-size: 30px;
+        cursor: default;
+      }
+
+      h2 {
+        margin: 30px 0 20px;
+        font-size: 25px;
+      }
+
+      h3 {
+        font-size: 18px;
+        margin: 0;
+      }
+
+      h4 {
+        margin: 18px 0 0;
+      }
+
+      p,
+      ul,
+      ol {
+        -webkit-font-smoothing: antialiased;
+        color: var(--site-config-color-text);
+        font-size: 15px;
+        line-height: 26px;
+        border-radius: 4px;
+        background: var(--site-config-color-bar);
+        list-style: none;
+        margin: 14px 0 0;
+        padding: 0;
+      }
+
+      pre {
+        margin: 0;
+      }
+
+      code {
+        position: relative;
+        display: block;
+        padding: 10px 16px;
+        overflow-x: auto;
+        font-size: 13px;
+        font-family: Consolas, Monaco, monospace;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        color: var(--site-config-color-hl-code);
+      }
+
+      p code,
+      li code,
+      table code {
+        -webkit-font-smoothing: antialiased;
+        word-break: keep-all;
+        color: var(--site-config-color-primary);
+        font-size: 15px;
+        @doc-active();
+      }
+
+      table {
+        -webkit-font-smoothing: antialiased;
+        width: 100%;
+        margin-top: 12px;
+        color: var(--site-config-color-text);
+        background: var(--site-config-color-bar);
+        font-size: 14px;
+        line-height: 28px;
+        border-collapse: collapse;
+        border-radius: 4px;
+
+        th {
+          padding: 8px 16px;
+          font-weight: 500;
+          text-align: left;
+          color: var(--site-config-color-sub-text);
+          font-size: 13px;
+          -webkit-font-smoothing: antialiased;
+          border-bottom: 1px solid var(--site-config-color-border);
+        }
+
+        td {
+          padding: 8px 16px;
+          border-bottom: 1px solid var(--site-config-color-border);
+          color: var(--site-config-color-text);
+          font-family: Consolas, Monaco, monospace;
+
+          code {
+            white-space: pre-wrap;
+            padding: 0;
+            font-size: 13px;
+          }
+        }
+
+        em {
+          color: var(--site-config-color-type);
+          font-style: normal;
+          -webkit-font-smoothing: antialiased;
+          font-size: 13px;
+          @doc-active();
+        }
+      }
+
+      .card {
+        border-radius: 4px;
+        background: var(--site-config-color-bar);
+        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;
+        }
+      }
+    }
+  }
+}
+</style>

package/site/pc/components/AnimationBox.vue

@@ -0,0 +1,45 @@
+<script lang="ts">
+import { defineComponent, onMounted, onBeforeUnmount, onUnmounted, ref, useAttrs } from 'vue'
+import { animationBoxData, animationEl, animationElClientRect } from '../floating'
+
+export default defineComponent({
+  name: 'AnimationBox',
+  setup() {
+    const mutationObserver = ref<MutationObserver>()
+    const varletLogoAnimationRef = ref<HTMLElement>()
+    animationBoxData.attrs = useAttrs()
+
+    onMounted(() => {
+      animationEl.value = varletLogoAnimationRef.value
+      animationElClientRect.value = varletLogoAnimationRef?.value?.getBoundingClientRect();
+      mutationObserver.value = new MutationObserver(() => {
+        animationElClientRect.value = varletLogoAnimationRef?.value?.getBoundingClientRect();
+      });
+      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,
+    }
+  },
+})
+</script>
+
+<template>
+  <div ref="varletLogoAnimationRef" data-animation="port"></div>
+</template>
+

package/site/pc/components/AppHeader.vue

@@ -1,35 +1,44 @@
 <template>
   <div class="varlet-site-header">
     <div class="varlet-site-header__lead">
-      <img class="varlet-site-header__logo" :src="logo" alt="logo" v-if="logo" />
-      <div class="varlet-site-header__title" v-if="title">{{ title }}</div>
+      <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">
-      <a
-        class="varlet-site-header__link"
-        target="_blank"
-        :href="playground"
-        v-ripple
-        v-if="playground"
+      <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>
-      <a
-        class="varlet-site-header__link"
-        target="_blank"
-        :href="github"
-        v-ripple
-        v-if="github"
-      >
+      <a class="varlet-site-header__link" target="_blank" :href="github" v-ripple v-if="github">
         <var-site-icon name="github" :size="28" />
       </a>
-      <div
-        class="varlet-site-header__theme"
-        v-ripple
-        v-if="darkMode"
-        @click="toggleTheme"
-      >
+      <div class="varlet-site-header__theme" v-ripple v-if="darkMode" @click="toggleTheme">
         <var-site-icon
           size="26px"
           :name="currentThemes === 'themes' ? 'white-balance-sunny' : 'weather-night'"
@@ -41,30 +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 }}
+              >{{ value }}
             </var-site-cell>
           </div>
         </transition>
       </div>
+
     </div>
   </div>
 </template>
@@ -75,33 +84,45 @@ import { ref, computed, defineComponent } from 'vue'
 import { get } from 'lodash-es'
 import { getBrowserThemes, getPCLocationInfo, removeEmpty, setThemes, watchThemes } from '../../utils'
 import { useRouter } from 'vue-router'
+import AnimationBox from './AnimationBox.vue'
 import type { Ref, ComputedRef } from 'vue'
 
 export default defineComponent({
   name: 'AppHeader',
+  components: { AnimationBox },
   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()
+      router.replace(`/${lang}${redirect}`)
+    }
 
     const handleLanguageChange = (language: string) => {
       const { menuName } = getPCLocationInfo()
       router.replace(`/${language}/${menuName}`)
-      isOpenMenu.value = false
+      isOpenLanguageMenu.value = false
     }
 
     const setCurrentThemes = (themes: 'themes' | 'darkThemes') => {
@@ -118,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)
     })
@@ -128,13 +157,19 @@ export default defineComponent({
     return {
       logo,
       title,
+      currentVersion,
       languages,
+      versionItems,
       nonEmptyLanguages,
+      nonEmptyVersions,
       playground,
       github,
-      isOpenMenu,
+      isOpenLanguageMenu,
+      isOpenVersionsMenu,
       darkMode,
       currentThemes,
+      open,
+      backRoot,
       handleLanguageChange,
       toggleTheme,
     }
@@ -186,7 +221,7 @@ export default defineComponent({
   padding: 0 30px;
   justify-content: space-between;
   user-select: none;
-  z-index: 996;
+  z-index: 9;
   background: var(--site-config-color-bar);
   border-bottom: 1px solid var(--site-config-color-border);
   box-sizing: border-box;
@@ -194,16 +229,20 @@ export default defineComponent({
   &__lead {
     display: flex;
     align-items: center;
+    cursor: pointer;
   }
 
   &__logo {
     width: 32px;
+    height: 32px;
     margin-right: 12px;
     flex-shrink: 0;
+    transition: 0.3s all ease-in-out;
   }
 
   &__title {
     font-size: 22px;
+    margin-right: 12px;
   }
 
   &__tail {
@@ -232,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: 6px;
+
+    &:hover {
+      background: var(--site-config-color-nav-button-hover-background);
+    }
+  }
+
   &__link {
     border-radius: 50%;
     width: 42px;
@@ -270,7 +326,7 @@ export default defineComponent({
     }
   }
 
-  &__language-list {
+  &__animation-list {
     background: var(--site-config-color-bar);
     cursor: pointer;
     color: var(--site-config-color-text);
@@ -293,5 +349,9 @@ export default defineComponent({
       color: var(--site-config-color-pc-language-active);
     }
   }
+
+   &__animation-versions {
+    left: -7px;
+  }
 }
 </style>