@varlet/cli 1.27.20 → 2.0.0-alpha.1663499244572

package/site/pc/components/AppMobile.vue

@@ -1,54 +1,60 @@
-<template>
-  <div class="varlet-site-mobile">
-    <div class="varlet-site-mobile-content">
-      <iframe id="mobile" :src="`./mobile.html#/${componentName}?language=${language}&platform=pc&replace=${replace}`"></iframe>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'AppMobile',
-  props: {
-    componentName: {
-      type: String
-    },
-    language: {
-      type: String
-    },
-    replace: {
-      type: String
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-.varlet-site-mobile {
-  position: sticky;
-  flex: 0 0 325px;
-  top: 80px;
-  height: calc(100vh - 100px);
-  margin-right: 38px;
-  overflow: hidden;
-  box-shadow: 0 0 14px 6px var(--site-config-color-shadow);
-  border-radius: 2px;
-
-  &-content {
-    width: 100%;
-    height: 100%;
-  }
-
-  &-image {
-    width: 100%;
-    pointer-events: none;
-    height: 100%;
-    top: 0;
-
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-</style>
+<template>
+  <div class="varlet-site-mobile varlet-site-mobile--375">
+    <div class="varlet-site-mobile-content">
+      <iframe id="mobile" :src="`./mobile.html#/${componentName}?language=${language}&platform=pc&replace=${replace}`"></iframe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppMobile',
+  props: {
+    componentName: {
+      type: String
+    },
+    language: {
+      type: String
+    },
+    replace: {
+      type: String
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.varlet-site-mobile {
+  position: sticky;
+  flex: 0 0 330px;
+  top: 80px;
+  height: calc(100vh - 100px);
+  margin-right: 38px;
+  overflow: hidden;
+  box-shadow: 0 0 14px 6px var(--site-config-color-shadow);
+  border-radius: 2px;
+
+  @media screen and (min-width: 1600px) {
+    &--375 {
+      flex: 0 0 375px;
+    }
+  }
+
+  &-content {
+    width: 100%;
+    height: 100%;
+  }
+
+  &-image {
+    width: 100%;
+    pointer-events: none;
+    height: 100%;
+    top: 0;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

package/site/pc/components/AppSidebar.vue

@@ -1,134 +1,143 @@
-<template>
-  <div class="varlet-site-sidebar var-elevation--3">
-    <var-site-cell
-      class="varlet-site-sidebar__item"
-      :id="item.doc"
-      :class="{
-        'varlet-site-sidebar__item--active': item.doc === menuName,
-        'varlet-site-sidebar__link': item.type !== menuTypes.TITLE,
-        'varlet-site-sidebar__title': item.type === menuTypes.TITLE,
-      }"
-      :key="index"
-      v-for="(item, index) in menu"
-      v-ripple="{
-        touchmoveForbid: false,
-        disabled: item.type === menuTypes.TITLE,
-        color: themes['color-side-bar']
-      }"
-      @click="changeRoute(item)"
-    >
-      <span class="varlet-site-sidebar__item--title" v-if="item.type === menuTypes.TITLE">{{ item.text[language] }}</span>
-      <span v-else>{{ item.text[language] }}</span>
-    </var-site-cell>
-  </div>
-</template>
-
-<script lang="ts">
-import config from '@config'
-import { MenuTypes } from '../../utils'
-import { reactive, ref, defineComponent } from 'vue'
-import type { PropType } from 'vue'
-import type { Menu } from '../Layout.vue'
-import { get } from 'lodash-es'
-
-export default defineComponent({
-  name: 'AppSidebar',
-  props: {
-    menu: {
-      type: Array as PropType<Menu[]>
-    },
-    menuName: {
-      type: String
-    },
-    language: {
-      type: String
-    }
-  },
-  emits: ['change'],
-  setup(props, { emit }) {
-    const menuTypes = reactive(MenuTypes)
-    const themes = ref(get(config, 'themes'))
-
-    const changeRoute = (item: Menu) => {
-      if (item.type === MenuTypes.TITLE || props.menuName === item.doc) {
-        return
-      }
-
-      emit('change', item)
-    }
-
-    return {
-      menuTypes,
-      themes,
-      changeRoute
-    }
-  }
-})
-</script>
-
-<style scoped lang="less">
-.varlet-site-sidebar {
-  padding: 0 0 15px;
-  position: fixed;
-  width: 240px;
-  top: 60px;
-  bottom: 0;
-  left: 0;
-  z-index: 6;
-  overflow-y: scroll;
-  box-shadow: 0 8px 12px var(--site-config-color-shadow);
-  background: var(--site-config-color-bar);
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  &__item {
-    margin: 0;
-    user-select: none;
-    padding: 10px 28px;
-
-    &--title {
-      font-size: 16px;
-      font-weight: 600;
-      color: var(--site-config-color-text);
-      line-height: 28px;
-      padding: 8px 0 8px;
-    }
-
-    &--active {
-      position: relative;
-      background: var(--site-config-color-side-bar-active-background);
-
-      span {
-        color: var(--site-config-color-side-bar);
-      }
-
-      &::before {
-        display: block;
-        content: '';
-        background: var(--site-config-color-side-bar);
-        width: 4px;
-        height: 40px;
-        position: absolute;
-        left: 0;
-      }
-    }
-  }
-
-  &__link {
-    cursor: pointer;
-    font-size: 14px;
-    color: var(--site-config-color-text);
-    transition: color 0.2s;
-
-    &:hover {
-      color: var(--site-config-color-side-bar);
-    }
-  }
-
-  &__title {
-    margin-top: 10px;
-  }
-}
-</style>
+<template>
+  <div class="varlet-site-sidebar var-elevation--3">
+    <var-cell
+      class="varlet-site-sidebar__item"
+      :id="item.doc"
+      :class="{
+        'varlet-site-sidebar__item--active': item.doc === menuName,
+        'varlet-site-sidebar__link': item.type !== menuTypes.TITLE,
+        'varlet-site-sidebar__title': item.type === menuTypes.TITLE,
+      }"
+      :key="index"
+      v-for="(item, index) in menu"
+      v-ripple="{
+        disabled: item.type === menuTypes.TITLE,
+      }"
+      @click="changeRoute(item)"
+    >
+      <span class="varlet-site-sidebar__indicator"></span>
+      <span class="varlet-site-sidebar__item--title" v-if="item.type === menuTypes.TITLE">{{ item.text[language]
+        }}</span>
+      <span v-else>{{ item.text[language] }}</span>
+    </var-cell>
+  </div>
+</template>
+
+<script lang="ts">
+import { MenuTypes } from '../../utils'
+import { reactive, defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import type { Menu } from '../Layout.vue'
+
+export default defineComponent({
+  name: 'AppSidebar',
+  props: {
+    menu: {
+      type: Array as PropType<Menu[]>
+    },
+    menuName: {
+      type: String
+    },
+    language: {
+      type: String
+    }
+  },
+  emits: ['change'],
+  setup(props, { emit }) {
+    const menuTypes = reactive(MenuTypes)
+
+    const changeRoute = (item: Menu) => {
+      if (item.type === MenuTypes.TITLE || props.menuName === item.doc) {
+        return
+      }
+
+      emit('change', item)
+    }
+
+    return {
+      menuTypes,
+      changeRoute
+    }
+  }
+})
+</script>
+
+<style scoped lang="less">
+@keyframes indicator-fade-in {
+  from {
+    transform: scaleY(0);
+    opacity: .3;
+  }
+
+  to {
+    transform: scaleY(1);
+    opacity: 1;
+  }
+}
+
+.varlet-site-sidebar {
+  padding: 0 0 15px;
+  position: fixed;
+  width: 240px;
+  top: 60px;
+  bottom: 0;
+  left: 0;
+  z-index: 6;
+  overflow-y: scroll;
+  box-shadow: 0 8px 12px var(--site-config-color-shadow);
+  background: var(--site-config-color-bar);
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &__item {
+    margin: 0;
+    user-select: none;
+    padding: 10px 28px;
+
+    &--title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--site-config-color-text);
+      line-height: 28px;
+      padding: 8px 0 8px;
+    }
+
+    &--active {
+      position: relative;
+      background: var(--site-config-color-side-bar-active-background);
+
+      span {
+        color: var(--site-config-color-side-bar);
+      }
+
+      &::before {
+        display: block;
+        content: '';
+        background: var(--site-config-color-side-bar);
+        width: 4px;
+        height: 40px;
+        position: absolute;
+        left: 0;
+        animation: indicator-fade-in .25s;
+      }
+    }
+  }
+
+  &__link {
+    cursor: pointer;
+    font-size: 14px;
+    color: var(--site-config-color-text);
+    transition: color 0.2s;
+
+    &:hover {
+      color: var(--site-config-color-side-bar);
+    }
+  }
+
+  &__title {
+    margin-top: 10px;
+  }
+}
+</style>

package/site/pc/components/LogoAnimation.vue

@@ -1,119 +1,117 @@
-<script lang="ts">
-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 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 (to: any, from: any) => {
-      if (!floatingState.value && from.path !== '/') {
-        floatingState.value = true
-      }
-    })
-
-    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 || '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"
-      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>
+<script lang="ts">
+import config from '@config'
+import { get } from 'lodash-es'
+import { computed, defineComponent, onMounted, onBeforeUnmount, ref, watch, nextTick } from 'vue'
+import { animationBoxData, animationEl, animationElClientRect, isMountedCount } from '../floating'
+import type { Ref, StyleValue } from 'vue'
+
+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) {
+        isMountedCount.value > 1 && (floatingState.value = true)
+
+        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`,
+    }))
+
+    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 || 'body'">
+    <img 
+      v-if="logo && 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>
+  <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 {
+  width: 100%;
+  height: 100%;
+}
+
+.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>();
+import { reactive, ref } from 'vue'
+
+export const animationBoxData = reactive<any>({})
+
+export const animationEl = ref<HTMLElement | null>()
+
+export const animationElClientRect = ref<DOMRect | null>()
+
+export const isMountedCount = ref<number>(0)