@varlet/cli 1.27.8-alpha.1651665460392 → 1.27.9

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,119 @@
+<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>

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>();

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

@@ -0,0 +1,194 @@
+.home-page {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  box-sizing: border-box;
+  min-width: 1200px;
+  background: var(--site-config-color-home-page-background);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+
+
+  to {
+    opacity: 1;
+    transform: translateX(0%);
+  }
+}
+
+@keyframes slash-1 {
+  from {
+    transform: rotate(90deg);
+    ;
+  }
+
+  to {
+    transform: rotate(10deg);
+  }
+}
+
+@keyframes slash-2 {
+  from {
+    transform: rotate(90deg);
+    ;
+  }
+
+  to {
+    transform: rotate(20deg);
+  }
+}
+
+@keyframes slash-3 {
+  from {
+    transform: rotate(90deg);
+    ;
+  }
+
+  to {
+    transform: rotate(30deg);
+  }
+}
+
+@keyframes slash-4 {
+  from {
+    transform: rotate(90deg);
+    ;
+  }
+
+  to {
+    transform: rotate(40deg);
+  }
+}
+
+@keyframes slash-5 {
+  from {
+    transform: rotate(90deg);
+    ;
+  }
+
+  to {
+    transform: rotate(50deg);
+  }
+}
+
+.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);
+}
+
+.box-1 {
+  animation: slash-1 .75s forwards;
+}
+
+.box-2 {
+  animation: slash-2 .75s forwards;
+}
+
+.box-3 {
+  animation: slash-3 .75s forwards;
+}
+
+.box-4 {
+  animation: slash-4 .75s forwards;
+}
+
+.box-5 {
+  animation: slash-5 .75s forwards;
+}
+
+.profile-container {
+  height: 100vh;
+  padding-left: 10vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .container-box {
+    width: 35vw;
+    min-width: 500px;
+
+    .description-container {
+      display: flex;
+      margin-bottom: 35px;
+    }
+
+    .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;
+    }
+
+    .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 {
+      width: 90px;
+      height: 90px;
+      flex-shrink: 0;
+      margin-right: 25px;
+      z-index: 2;
+    }
+  }
+}

package/site/pc/pages/index/index.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import AnimationBox from '../../components/AnimationBox.vue'
+import config from '@config'
+import VarSiteButton from '../../../components/button'
+import VarSiteIcon from '../../../components/icon'
+import { get } from 'lodash-es'
+import { ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { getBrowserThemes, setThemes } from '../../../utils'
+import { getPCLocationInfo, watchThemes } from '@varlet/cli/site/utils'
+import en_US from './locale/en-US'
+import zh_CN from './locale/zh-CN'
+import type { Ref } from 'vue'
+
+const route = useRoute()
+const router = useRouter()
+const packs = {
+  'zh-CN': zh_CN,
+  'en-US': en_US
+} as any
+
+const github = get(config, 'pc.header.github')
+const themesKey = get(config, 'themesKey')
+const currentThemes = ref(getBrowserThemes(themesKey))
+const darkMode: Ref<boolean> = ref(get(config, 'pc.header.darkMode'))
+const title: Ref<string> = ref(get(config, 'title'))
+const languages: Ref<Record<string, string>> = ref(get(config, 'pc.header.i18n'))
+const pack: Ref<Record<string, string>> = ref({})
+
+const goGithub = () => {
+  window.open(github)
+}
+
+const getStar = () => {
+  const { language: lang } = getPCLocationInfo()
+  router.push(`/${lang}/home`)
+}
+
+const getThemesMessage = () => ({ action: 'themesChange', from: 'pc', data: currentThemes.value })
+
+const setCurrentThemes = (themes: 'themes' | 'darkThemes') => {
+  currentThemes.value = themes
+  setThemes(config, currentThemes.value)
+  window.localStorage.setItem(themesKey, currentThemes.value)
+}
+
+const toggleTheme = () => {
+  setCurrentThemes(currentThemes.value === 'darkThemes' ? 'themes' : 'darkThemes')
+  window.postMessage(getThemesMessage(), '*')
+    ; (document.getElementById('mobile') as HTMLIFrameElement)?.contentWindow!.postMessage(getThemesMessage(), '*')
+}
+
+const setLocale = () => {
+  const { language: lang } = getPCLocationInfo()
+  if (!lang) return
+
+  pack.value = packs[lang]
+  document.title = get(config, 'pc.title')[lang] as string
+}
+
+const toggleLanguages = () => {
+  const { language: lang } = getPCLocationInfo()
+
+  const { menuName } = getPCLocationInfo()
+  const replaceStr = `/${lang === 'zh-CN' ? 'en-US' : 'zh-CN'}/${menuName}`
+  router.replace(replaceStr)
+}
+
+setThemes(config, currentThemes.value)
+
+window.postMessage(getThemesMessage(), '*')
+
+watchThemes((themes, from) => {
+  from === 'mobile' && setCurrentThemes(themes)
+})
+
+watch(() => route.path, setLocale, { immediate: true })
+</script>
+
+<template>
+  <div class="home-page">
+    <div class="slash-box box-1"></div>
+    <div class="slash-box box-2"></div>
+    <div class="slash-box box-3"></div>
+    <div class="slash-box box-4"></div>
+    <div class="slash-box box-5"></div>
+    <div class="profile-container">
+      <div class="container-box">
+        <div class="description-container">
+          <animation-box class="logo" />
+          <div class="base-title">{{ title }}</div>
+        </div>
+        <div class="base-description">{{ pack.description }}</div>
+
+        <div class="button-group">
+          <var-site-button class="common-button github-button" block @click="goGithub">
+            <div class="block-button-content">
+              <span>GITHUB</span>
+              <var-site-icon style="margin-left: 10px;" name="github" size="24px" />
+            </div>
+          </var-site-button>
+          <var-site-button class="common-button extra-button margin-left" text v-if="darkMode" @click="toggleTheme">
+            <var-site-icon size="24px" :name="currentThemes === 'themes' ? 'white-balance-sunny' : 'weather-night'" />
+          </var-site-button>
+        </div>
+
+        <div class="button-group">
+          <var-site-button type="primary" class="common-button primary-button" block @click="getStar">
+            <div class="block-button-content">
+              <span>{{ pack.started }}</span>
+              <var-site-icon style="margin-left: 10px; transform: rotate(-90deg)" name="arrow-down" size="24px" />
+            </div>
+          </var-site-button>
+          <var-site-button class="common-button extra-button margin-left" text v-if="languages" @click="toggleLanguages">
+            <var-site-icon name="translate" size="24px" />
+          </var-site-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+@import "./index";
+</style>

package/site/pc/pages/index/locale/en-US.ts

@@ -0,0 +1,5 @@
+export default {
+  started: 'GET STARTED',
+  description: 'Varlet is a Material design mobile component library developed based on Vue3, developed and maintained by partners in the community. ' +
+    'Support Typescript, import on demand, dark mode, theme customization, internationalization, and provide VSCode plugin to ensure a good development experience',
+}

package/site/pc/pages/index/locale/zh-CN.ts

@@ -0,0 +1,5 @@
+export default {
+  started: '起步',
+  description: 'Varlet 是一个基于 Vue3 开发的 Material 风格移动端组件库，' +
+    '全面拥抱 Vue3 生态，由社区团队维护。支持 Typescript、按需引入、暗黑模式、主题定制、国际化，并提供 VSCode 插件保障良好的开发体验',
+}

package/varlet.default.config.js

@@ -19,7 +19,7 @@ module.exports = {
   useMobile: false,
   pc: {
     menu: [],
-    redirect: '/home',
+    redirect: '/index',
     title: {
       'zh-CN': '面向 Vue3 的 Material 风格移动端组件库',
       'en-US': 'Material design mobile components built for Vue3',
@@ -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,
@@ -59,6 +60,11 @@ module.exports = {
   },
   themes: {
     'color-body': '#fff',
+    'color-home-page-background': '#fff',
+    'color-home-page-slash': '#ccc',
+    'color-home-page-primary-button-background': '#3a7afe',
+    'color-home-page-extra-button-background': '#f5f5f5',
+    'color-home-page-github-button-background': '#212121',
     'color-bar': '#fff',
     'color-sub-bar': '#f5f5f5',
     'color-text': '#555',
@@ -70,7 +76,7 @@ module.exports = {
     'color-link': '#00c48f',
     'color-type': '#00c48f',
     'color-progress': '#1d92e9',
-    'color-progress-track': '#fff',
+    'color-progress-track': 'transparent',
     'color-side-bar': '#3a7afe',
     'color-side-bar-active-background': '#3a7afe1a',
     'color-app-bar': '#3a7afe',
@@ -78,6 +84,7 @@ module.exports = {
     'color-mobile-cell-hover': '#3a7afe',
     'color-pc-language-active': '#3a7afe',
     'color-pc-language-active-background': '#edf5ff',
+    'color-pc-github-active-background': '#212121',
     'color-mobile-language-active': '#3a7afe',
     'color-mobile-language-active-background': '#edf5ff',
     'color-hl-background': '#fafafa',
@@ -95,6 +102,11 @@ module.exports = {
   },
   darkThemes: {
     'color-body': '#121212',
+    'color-home-page-background': 'linear-gradient(to right, #1e1e1e, #272727)',
+    'color-home-page-slash': '#111',
+    'color-home-page-primary-button-background': '#4a7afe',
+    'color-home-page-extra-button-background': '#303030',
+    'color-home-page-github-button-background': '#303030',
     'color-bar': '#1e1e1e',
     'color-sub-bar': '#272727',
     'color-text': '#fff',
@@ -106,7 +118,7 @@ module.exports = {
     'color-link': '#A8FFC4',
     'color-type': '#A8FFC4',
     'color-progress': '#5580f8',
-    'color-progress-track': '#202020',
+    'color-progress-track': 'transparent',
     'color-side-bar': '#4a7afe',
     'color-side-bar-active-background': '#4a7afe1a',
     'color-app-bar': '#272727',
@@ -114,6 +126,7 @@ module.exports = {
     'color-mobile-cell-hover': '#4a7afe',
     'color-pc-language-active': '#4a7afe',
     'color-pc-language-active-background': '#4a7afe20',
+    'color-pc-github-active-background': '#303030',
     'color-mobile-language-active': '#4a7afe',
     'color-mobile-language-active-background': '#4a7afe20',
     'color-hl-background': '#272727',