@varlet/cli 1.27.7-alpha.1651056904329 → 1.27.8

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

@@ -0,0 +1,193 @@
+.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;
+    }
+  }
+}

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',
@@ -59,6 +59,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 +75,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 +83,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 +101,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 +117,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 +125,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',