@varlet/cli 1.27.20 → 2.0.0-alpha.1663742071515

package/site/pc/components/LogoAnimation.vue

@@ -2,9 +2,8 @@
 import config from '@config'
 import { get } from 'lodash-es'
 import { computed, defineComponent, onMounted, onBeforeUnmount, ref, watch, nextTick } from 'vue'
-import { animationBoxData, animationEl, animationElClientRect } from '../floating'
+import { animationBoxData, animationEl, animationElClientRect, isMountedCount } from '../floating'
 import type { Ref, StyleValue } from 'vue'
-import { useRouter } from 'vue-router'
 
 export default defineComponent({
   name: 'LogoAnimation',
@@ -15,6 +14,8 @@ export default defineComponent({
 
     watch(animationElClientRect, async (newClientRect) => {
       if (newClientRect) {
+        isMountedCount.value > 1 && (floatingState.value = true)
+
         proxyRect.value = newClientRect
       }
     })
@@ -26,13 +27,6 @@ export default defineComponent({
       left: `${proxyRect.value?.left}px`,
     }))
 
-    const router = useRouter()
-    router.beforeEach(async (to: any, from: any) => {
-      if (!floatingState.value && from.path !== '/') {
-        floatingState.value = true
-      }
-    })
-
     onMounted(() => {
       window.addEventListener('resize', resetPosition, false)
     })
@@ -54,6 +48,7 @@ export default defineComponent({
         await nextTick()
       }
       clearTimeout(resetTimer)
+
       const newBRect = animationEl.value?.getBoundingClientRect()
       if (newBRect) {
         resetTimer = window.setTimeout(() => {
@@ -76,44 +71,47 @@ export default defineComponent({
 
 <template>
   <Teleport :to="animationEl || 'body'">
-    <img
-      v-show="!floatingState"
-      v-bind="animationBoxData.attrs"
-      :style="styles"
-      :src="logo"
-      alt="logo"
+    <img 
       v-if="logo && animationEl"
-      class="varlet-cli-logo-animation"
-      :class="{ 'varlet-cli-logo-position': !animationEl }"
+      v-bind="animationBoxData.attrs" 
+      :class="{ 'varlet-cli-logo-position': !animationEl, 'varlet-cli-logo-show': !floatingState }" 
+      :style="styles" 
+      :src="logo" 
+      class="varlet-cli-logo-entity"
+      alt="logo" 
     />
   </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>
+  <img 
+    v-if="logo && animationEl"
+    v-bind="animationBoxData.attrs" 
+    :class="{ 'varlet-cli-logo-show': floatingState }" 
+    :style="styles" 
+    :src="logo" 
+    @transitionend="land" 
+    class="varlet-cli-logo-entity varlet-cli-logo-position varlet-cli-logo-transition"
+    alt="logo"
+  />
 </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 {
+.varlet-cli-logo-entity {
   z-index: 10;
   pointer-events: none;
+  opacity: 0;
 }
 
 .varlet-cli-logo-position {
   position: fixed;
+  transition: 0.5s ease-in-out;
+  transition-property: left, top, height, width;
+}
+
+.varlet-cli-logo-show {
+  opacity: 1;
 }
 </style>

package/site/pc/floating.ts

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

package/site/pc/main.ts

@@ -6,6 +6,8 @@ import config from '@config'
 import Icon from '../components/icon'
 import Cell from '../components/cell'
 import Ripple from '../components/ripple'
+import Button from '../components/button'
+import Popup from '../components/popup'
 import CodeExample from '../components/code-example'
 import Snackbar from '../components/snackbar'
 
@@ -91,4 +93,8 @@ createApp(App)
   // @ts-ignore
   .use(CodeExample)
   .use(Snackbar)
+  // @ts-ignore
+  .use(Popup)
+  // @ts-ignore
+  .use(Button)
   .mount('#app')

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

@@ -1,231 +1,176 @@
-.home-page {
-  position: relative;
-  width: 100vw;
-  height: 100vh;
-  box-sizing: border-box;
-  min-width: 1200px;
-  min-height: 460px;
-  background: var(--site-config-color-home-page-background);
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-}
-
-@keyframes fade-in {
+@keyframes logo-wave {
   0% {
-    opacity: 0;
-    transform: translateX(-100%);
+    transform: translate(8%, 8%);
   }
 
+  20% {
+    transform: translate(-8%, 8%);
+  }
 
-  to {
-    opacity: 1;
-    transform: translateX(0%);
+  40% {
+    transform: translate(-8%, -8%);
+  }
+
+  60% {
+    transform: translate(-2%, 8%);
   }
-}
 
-@keyframes slash-1 {
-  from {
-    transform: rotate(90deg);
-    ;
+  80% {
+    transform: translate(8%, -8%);
   }
 
-  to {
-    transform: rotate(10deg);
+  100% {
+    transform: translate(8%, 8%);
   }
 }
 
-@keyframes slash-2 {
-  from {
-    transform: rotate(90deg);
-    ;
+.varlet-doc-index {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 100vh;
+  box-sizing: border-box;
+  background: var(--site-config-color-index-page-background);
+  padding-bottom: 100px;
+  min-width: 1050px;
+
+  &__layout {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 110px 0;
+    max-width: 1200px;
+    transition: all .2s;
   }
 
-  to {
-    transform: rotate(20deg);
+  &__logo {
+    width: 100%;
+    height: 100%;
+    flex-shrink: 0;
+    z-index: 2;
   }
-}
 
-@keyframes slash-3 {
-  from {
-    transform: rotate(90deg);
-    ;
+  &__logo-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    width: 160px;
+    height: 160px;
   }
 
-  to {
-    transform: rotate(30deg);
+  &__logo-background-mask {
+    position: absolute;
+    left: -40px;
+    top: -40px;
+    bottom: -40px;
+    right: -40px;
+    background: var(--site-config-color-index-page-logo-mask-background);
+    transition: background-color .2s;
+    filter: blur(45px);
+    border-radius: 50%;
+    animation: logo-wave 6s infinite linear;
   }
-}
 
-@keyframes slash-4 {
-  from {
-    transform: rotate(90deg);
-    ;
+  &__title {
+    font-size: 54px;
+    margin-top: 60px;
   }
 
-  to {
-    transform: rotate(40deg);
+  &__description {
+    max-width: 700px;
+    width: 90vw;
+    font-size: 16px;
+    line-height: 28px;
+    letter-spacing: 1px;
+    margin-top: 30px;
+    padding: 0 20px;
+    text-align: center;
+    box-sizing: border-box;
+    color: var(--site-config-color-index-page-second-text-color);
   }
-}
 
-@keyframes slash-5 {
-  from {
-    transform: rotate(90deg);
-    ;
+  &__link-button-group {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 30px;
   }
 
-  to {
-    transform: rotate(50deg);
+  &__link-button {
+    height: 44px;
+    font-size: 18px;
+    transition: all .2s;
+    margin: 0 10px;
   }
-}
 
-.slash-box {
-  position: absolute;
-  width: 30px;
-  bottom: -70%;
-  top: -130%;
-  right: 52%;
-  transform-origin: bottom right;
-  transition: box-shadow 0.5s;
-  box-shadow: -20px 0 20px var(--site-config-color-home-page-slash);
-}
+  &__link-button-text {
+    margin-right: 4px;
+  }
 
-.box-1 {
-  animation: slash-1 .75s forwards;
-}
+  &__features {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-top: 70px;
+  }
 
-.box-2 {
-  animation: slash-2 .75s forwards;
-}
+  &__feature {
+    width: 280px;
+    margin: 10px;
+    padding: 20px;
+    border-radius: 4px;
+    background: var(--site-config-color-index-page-feature-background);
+    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);
+  }
 
-.box-3 {
-  animation: slash-3 .75s forwards;
-}
+  &__feature-description {
+    color: var(--site-config-color-index-page-second-text-color);
+    font-size: 14px;
+    margin-top: 10px;
+    line-height: 1.5;
+  }
 
-.box-4 {
-  animation: slash-4 .75s forwards;
-}
+  &__contributors {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 80px;
+  }
 
-.box-5 {
-  animation: slash-5 .75s forwards;
-}
+  &__contributors-title {
+    padding-top: 30px;
+    line-height: 32px;
+    font-size: 22px;
+    border-top: thin solid var(--site-config-color-index-page-divider-color);
+    color: var(--site-config-color-index-page-second-text-color);
+    letter-spacing: 1px;
+    transition: all .2s;
+  }
 
-.profile-container {
-  height: 100vh;
-  padding-left: 10vw;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  &__contributors-link {
+    display: block;
+    margin-top: 50px;
+    width: 700px;
+  }
 
-  .container-box {
-    width: 35vw;
-    min-width: 500px;
-
-    .logo-container {
-      margin-right: 20px;
-    }
-
-    .button-group {
-      display: flex;
-      margin-top: 25px;
-      align-items: center;
-    }
-
-    .block-button-content {
-      display: flex;
-      align-items: center;
-    }
-
-    .common-button {
-      height: 52px;
-      font-size: 18px;
-      transition: all .25s;
-      animation: fade-in .75s forwards;
-    }
-
-    .extra-button {
-      flex-shrink: 0;
-      background-color: var(--site-config-color-home-page-extra-button-background);
-    }
-
-    .github-button {
-      background-color: var(--site-config-color-home-page-github-button-background);
-      color: #fff;
-    }
-
-    .primary-button {
-      background-color: var(--site-config-color-home-page-primary-button-background);
-    }
-
-    .margin-left {
-      margin-left: 10px;
-    }
-
-    @media all and (max-width: 2560px) {
-      .description-container {
-        display: flex;
-        margin-bottom: 40px;
-      }
-
-      .base-title {
-        font-size: 110px;
-        line-height: 72px;
-        font-weight: 500;
-        margin-top: 21px;
-        animation: fade-in .75s forwards;
-      }
-
-      .base-description {
-        font-size: 20px;
-        line-height: 38px;
-        padding-left: 4px;
-        font-weight: 500;
-        margin-bottom: 43px;
-        letter-spacing: 1px;
-        animation: fade-in .75s forwards;
-      }
-
-      .logo-box {
-        width: 120px;
-        height: 120px;
-        flex-shrink: 0;
-        margin-right: 30px;
-        z-index: 2;
-      }
-    }
-
-    @media all and (max-width: 1920px) {
-
-      .description-container {
-        display: flex;
-        margin-bottom: 35px;
-      }
-
-      .base-title {
-        font-size: 84px;
-        line-height: 72px;
-        font-weight: 500;
-        margin-top: 8px;
-        animation: fade-in .75s forwards;
-      }
-
-      .base-description {
-        font-size: 16px;
-        line-height: 28px;
-        padding-left: 4px;
-        font-weight: 500;
-        margin-bottom: 45px;
-        letter-spacing: 1px;
-        animation: fade-in .75s forwards;
-      }
-
-      .logo-box {
-        width: 90px;
-        height: 90px;
-        flex-shrink: 0;
-        margin-right: 25px;
-        z-index: 2;
-      }
-    }
-  }
-}
+  &__contributors-image {
+    display: block;
+    width: 100%;
+  }
+
+  &__footer {
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100px;
+    border-top: thin solid var(--site-config-color-index-page-divider-color);
+    color: var(--site-config-color-index-page-second-text-color);
+    font-size: 14px;
+    line-height: 26px;
+    transition: all .2s;
+  }
+}