@varlet/cli 1.27.8-alpha.1651665460392 → 1.27.8

package/site/pc/Layout.vue

@@ -0,0 +1,396 @@
+<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,35 @@
+<script lang="ts">
+import { defineComponent, onMounted, onBeforeUnmount, 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();
+      });
+      mutationObserver.value.observe(document.body, { attributes: true, subtree: true, childList:true });
+    })
+
+    onBeforeUnmount(() => {
+      mutationObserver.value?.disconnect();
+    })
+
+    return {
+      varletLogoAnimationRef,
+    }
+  },
+})
+</script>
+
+<template>
+  <div ref="varletLogoAnimationRef" data-animation="port"></div>
+</template>
+

package/site/pc/components/AppHeader.vue

@@ -1,35 +1,18 @@
 <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__lead" @click="backRoot">
+      <animation-box class="varlet-site-header__logo" />
       <div class="varlet-site-header__title" v-if="title">{{ title }}</div>
     </div>
 
     <div class="varlet-site-header__tail">
-      <a
-        class="varlet-site-header__link"
-        target="_blank"
-        :href="playground"
-        v-ripple
-        v-if="playground"
-      >
+      <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'"
@@ -59,8 +42,7 @@
               :key="key"
               :class="{ 'varlet-site-header__language-list--active': language === key }"
               @click="handleLanguageChange(key)"
-            >
-              {{ value }}
+              >{{ value }}
             </var-site-cell>
           </div>
         </transition>
@@ -75,10 +57,12 @@ 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,
@@ -91,6 +75,7 @@ export default defineComponent({
     const languages: Ref<Record<string, string>> = ref(get(config, 'pc.header.i18n'))
     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))
 
@@ -98,6 +83,11 @@ export default defineComponent({
     const router = useRouter()
     const nonEmptyLanguages: ComputedRef<Record<string, string>> = computed(() => removeEmpty(languages.value))
 
+    const backRoot = () => {
+      const { language: lang } = getPCLocationInfo()
+      router.replace(`/${lang}${redirect}`)
+    }
+
     const handleLanguageChange = (language: string) => {
       const { menuName } = getPCLocationInfo()
       router.replace(`/${language}/${menuName}`)
@@ -135,6 +125,7 @@ export default defineComponent({
       isOpenMenu,
       darkMode,
       currentThemes,
+      backRoot,
       handleLanguageChange,
       toggleTheme,
     }
@@ -186,7 +177,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,12 +185,15 @@ 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 {

package/site/pc/components/AppSidebar.vue

@@ -28,7 +28,7 @@ import config from '@config'
 import { MenuTypes } from '../../utils'
 import { reactive, ref, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import type { Menu } from '../App.vue'
+import type { Menu } from '../Layout.vue'
 import { get } from 'lodash-es'
 
 export default defineComponent({
@@ -74,7 +74,7 @@ export default defineComponent({
   top: 60px;
   bottom: 0;
   left: 0;
-  z-index: 99;
+  z-index: 6;
   overflow-y: scroll;
   box-shadow: 0 8px 12px var(--site-config-color-shadow);
   background: var(--site-config-color-bar);

package/site/pc/components/LogoAnimation.vue

@@ -0,0 +1,110 @@
+<script lang="ts">
+import config from '@config'
+import { get } from 'lodash-es'
+import { computed, defineComponent, onBeforeMount, onMounted, onBeforeUnmount, ref, watch, nextTick } from 'vue'
+import { animationBoxData, animationEl, animationElClientRect } from '../floating'
+import type { Ref, StyleValue } from 'vue'
+import { useRouter } from 'vue-router'
+
+export default defineComponent({
+  name: 'LogoAnimation',
+  setup() {
+    const logo: Ref<string> = get(config, 'logo')
+    const proxyRect: Ref<DOMRect | undefined> = ref<DOMRect>()
+    const floatingState: Ref<boolean> = ref<boolean>(false)
+
+    watch(animationElClientRect, async (newClientRect) => {
+      if (newClientRect) {
+        proxyRect.value = newClientRect
+      }
+    })
+
+    const styles: Ref<StyleValue | undefined> = computed(() => ({
+      width: `${proxyRect.value?.width}px`,
+      height: `${proxyRect.value?.height}px`,
+      top: `${proxyRect.value?.top}px`,
+      left: `${proxyRect.value?.left}px`,
+    }))
+
+    const router = useRouter()
+    router.beforeEach(async () => {
+      if (!floatingState.value) {
+        floatingState.value = true
+      }
+      await nextTick();
+    })
+
+    onBeforeMount(() => {
+      floatingState.value = false
+    })
+
+    onMounted(() => {
+      window.addEventListener('resize', resetPosition, false);
+    })
+
+    onBeforeUnmount(() => {
+      resetTimer && clearTimeout(resetTimer)
+      window.removeEventListener('resize', resetPosition);
+    })
+
+    const land = () => {
+      floatingState.value = false;
+    }
+
+    let resetTimer: number;
+
+    const resetPosition = async () => {
+      if (floatingState.value) {
+        floatingState.value = false
+        await nextTick();
+      }
+      clearTimeout(resetTimer);
+      const newBRect = animationEl.value?.getBoundingClientRect()
+      if (newBRect) {
+        resetTimer = window.setTimeout(() => {
+          proxyRect.value = newBRect
+        }, 200)
+      }
+    }
+
+    return {
+      logo,
+      animationBoxData,
+      styles,
+      animationEl,
+      floatingState,
+      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>
+  <div v-show="floatingState">
+    <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" />
+  </div>
+</template>
+
+<style lang="less">
+.varlet-cli-logo-transition {
+  transition: 0.5s all ease-in-out;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.varlet-cli-logo-animation {
+  z-index: 10;
+  pointer-events: none;
+}
+
+.varlet-cli-logo-position {
+  position: fixed;
+}
+</style>

package/site/pc/floating.ts

@@ -0,0 +1,9 @@
+import { reactive, ref } from 'vue'
+
+// 动画节点属性存储
+export const animationBoxData = reactive<any>({})
+
+// 存储节点
+export const animationEl = ref<HTMLElement | null>()
+
+export const animationElClientRect = ref<DOMRect | null>();