@varlet/cli 2.15.1 → 2.16.0-alpha.1693852004525

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import AnimationBox from '../../components/AnimationBox.vue'
 import config from '@config'
+import AppHeader from '../../components/AppHeader.vue'
 import { get } from 'lodash-es'
 import { ref, watch, type Ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -14,23 +14,20 @@ import { setTheme } from '../../../utils'
 
 const route = useRoute()
 const router = useRouter()
-
-const github = get(config, 'pc.header.github')
 const currentTheme = ref(getBrowserTheme())
-const darkMode: Ref<boolean> = ref(get(config, 'pc.header.darkMode'))
+const github = get(config, 'pc.header.github')
 const title: Ref<string> = ref(get(config, 'title'))
 const language: Ref<string> = ref(get(config, 'defaultLanguage'))
-const languages: Ref<Record<string, string>> = ref(get(config, 'pc.header.i18n'))
 const indexPage: Ref<Record<string, any>> = ref(get(config, 'pc.indexPage'))
 
-const goGithub = () => {
-  window.open(github)
-}
-
 const getStar = () => {
   router.push(`/${language.value}/home`)
 }
 
+const toGithub = () => {
+  window.open(github)
+}
+
 const getThemeMessage = () => ({ action: 'theme-change', from: 'pc', data: currentTheme.value })
 
 const setCurrentTheme = (theme: Theme) => {
@@ -39,12 +36,6 @@ const setCurrentTheme = (theme: Theme) => {
   window.localStorage.setItem(get(config, 'themeKey'), currentTheme.value)
 }
 
-const toggleTheme = () => {
-  setCurrentTheme(currentTheme.value === 'darkTheme' ? 'lightTheme' : 'darkTheme')
-  window.postMessage(getThemeMessage(), '*')
-    ; (document.getElementById('mobile') as HTMLIFrameElement)?.contentWindow!.postMessage(getThemeMessage(), '*')
-}
-
 const setLocale = () => {
   const { language: lang } = getPCLocationInfo()
   if (!lang) return
@@ -53,14 +44,8 @@ const setLocale = () => {
   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}`
-
-  language.value = lang
-  router.replace(replaceStr)
+const to = (url: string) => {
+  window.open(url)
 }
 
 setTheme(config, currentTheme.value)
@@ -71,35 +56,36 @@ watchTheme((theme, from) => {
   from === 'mobile' && setCurrentTheme(theme)
 })
 
-watch(() => route.path, setLocale, { immediate: true })
+watch(() => route.path, () => {
+  language.value =  getPCLocationInfo().language
+  setLocale()
+}, { immediate: true })
 </script>
 
 <template>
+  <app-header :language="language" />
   <div class="varlet-doc-index">
     <div class="varlet-doc-index__layout">
-      <div class="varlet-doc-index__logo-container">
-        <div class="varlet-doc-index__logo-background-mask"></div>
-        <animation-box class="varlet-doc-index__logo" />
-      </div>
+      <div class="varlet-doc-index__main-container">
+        <div class="varlet-doc-index__logo-container">
+          <div class="varlet-doc-index__logo-background-mask"></div>
+          <img class="varlet-doc-index__logo" :src="config.logo" alt="">
+        </div>
+        <div class="varlet-doc-index__info-container">
+          <div class="varlet-doc-index__title">{{ title }}</div>
+          <div class="varlet-doc-index__description">{{ indexPage.description[language] }}</div>
 
-      <div class="varlet-doc-index__title">{{ title }}</div>
-      <div class="varlet-doc-index__description">{{ indexPage.description[language] }}</div>
-      <div class="varlet-doc-index__link-button-group">
-        <var-button class="varlet-doc-index__link-button" text outline @click="goGithub">
-          <var-icon name="github" size="24px" />
-        </var-button>
-        <var-button class="varlet-doc-index__link-button" text outline v-if="darkMode" @click="toggleTheme">
-          <var-icon size="24px" :name="currentTheme === 'lightTheme' ? 'white-balance-sunny' : 'weather-night'" />
-        </var-button>
-        <var-button class="varlet-doc-index__link-button" text outline v-if="languages" @click="toggleLanguages">
-          <var-icon name="translate" size="24px" />
-        </var-button>
-        <var-button class="varlet-doc-index__link-button" type="primary" style="line-height: 1.2" @click="getStar">
-          <span class="varlet-doc-index__link-button-text">{{ indexPage.started[language] }}</span>
-          <var-icon style="transform: rotate(-90deg)" name="arrow-down" size="24px" />
-        </var-button>
+          <var-space size="large">
+            <var-button class="varlet-doc-index__link-button" type="primary" style="line-height: 1.2" @click="getStar">
+            {{ indexPage.started[language] }}
+            </var-button>
+            <var-button class="varlet-doc-index__github-button" type="primary" style="line-height: 1.2" @click="toGithub">
+              {{ indexPage.viewOnGithub[language] }}
+            </var-button>
+          </var-space>
+        </div>
       </div>
-
+      
       <div class="varlet-doc-index__features" v-if="indexPage.features">
         <div class="varlet-doc-index__feature" v-for="feature in indexPage.features">
           <div class="varlet-doc-index__feature-name">{{ feature.name[language] }}</div>
@@ -107,6 +93,23 @@ watch(() => route.path, setLocale, { immediate: true })
         </div>
       </div>
 
+      <div class="varlet-doc-index__team-members" v-if="indexPage.teamMembers">
+        <div class="varlet-doc-index__team-members-title">{{ indexPage.teamMembers.label[language] }}</div>
+
+        <div class="varlet-doc-index__team-members-container">
+          <div class="varlet-doc-index__team-member" v-for="member in indexPage.teamMembers.members">
+            <img class="varlet-doc-index__team-member-avatar" :src="member.avatar">
+            <div class="varlet-doc-index__team-member-name">{{ member.name[language] }}</div>
+            <div class="varlet-doc-index__team-member-title">{{ member.title[language] }}</div>
+            <div class="varlet-doc-index__team-member-description">{{ member.description[language] }}</div>
+            <div class="varlet-doc-index__team-member-social">
+              <var-icon class="varlet-doc-index__team-member-social-icon" name="github" :size="24" @click="to(member.github)" v-if="member.github" />
+              <var-icon class="varlet-doc-index__team-member-social-icon" name="twitter" :size="24" @click="to(member.twitter)" v-if="member.twitter" />
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div class="varlet-doc-index__contributors" v-if="indexPage.contributors">
         <div class="varlet-doc-index__contributors-title">{{ indexPage.contributors.label[language] }}</div>
 
@@ -131,6 +134,272 @@ watch(() => route.path, setLocale, { immediate: true })
   </div>
 </template>
 
-<style lang="less" scoped>
-@import './index';
+<style lang="less">
+@keyframes logo-wave {
+  0% {
+    transform: translate(8%, 8%);
+  }
+
+  20% {
+    transform: translate(-8%, 8%);
+  }
+
+  40% {
+    transform: translate(-8%, -8%);
+  }
+
+  60% {
+    transform: translate(-2%, 8%);
+  }
+
+  80% {
+    transform: translate(8%, -8%);
+  }
+
+  100% {
+    transform: translate(8%, 8%);
+  }
+}
+
+.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: 170px 0;
+    max-width: 1200px;
+    transition: all .2s;
+  }
+
+  &__main-container {
+    display: flex;
+  }
+
+  &__info-container {
+    margin-left: 100px;
+  }
+
+  &__logo {
+    width: 100%;
+    height: 100%;
+    flex-shrink: 0;
+    z-index: 2;
+  }
+
+  &__logo-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    width: 174px;
+    height: 174px;
+    margin-top: 8px;
+  }
+
+  &__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;
+  }
+
+  &__title {
+    font-size: 60px;
+  }
+
+  &__description {
+    max-width: 700px;
+    width: 90vw;
+    font-size: 20px;
+    line-height: 38px;
+    margin-top: 14px;
+    padding-left: 2px;
+    box-sizing: border-box;
+    color: var(--site-config-color-index-page-second-text-color);
+  }
+
+  &__link-button {
+    width: 170px !important;
+    height: 48px !important;
+    font-size: 19px !important;
+    transition: all .2s !important;
+    margin-top: 38px !important;
+    background: var(--site-config-color-index-page-get-started-button) !important;
+  }
+
+  &__github-button {
+    width: 170px !important;
+    height: 48px !important;
+    font-size: 19px !important;
+    transition: all .2s !important;
+    margin-top: 38px !important;
+    background: var(--site-config-color-index-page-github-button) !important;
+  }
+
+  &__features {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-top: 90px;
+  }
+
+  &__feature {
+    width: 300px;
+    margin: 12px;
+    padding: 20px;
+    border-radius: 10px;
+    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);
+  }
+
+  &__feature-description {
+    color: var(--site-config-color-index-page-second-text-color);
+    font-size: 14px;
+    margin-top: 10px;
+    line-height: 1.5;
+  }
+
+  &__contributors, &__team-members {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 90px;
+  }
+
+  &__contributors-title, &__team-members-title {
+    padding-top: 24px;
+    line-height: 32px;
+    font-size: 22px;
+    border-top: 2px 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;
+  }
+
+  &__team-members-container {
+    width: 1098px;
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 70px;
+  }
+
+  &__team-member {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 300px;
+    margin: 12px;
+    padding: 30px 20px;
+    border-radius: 10px;
+    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);
+
+
+    &-avatar {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+    }
+
+    &-name {
+      font-weight: bold;
+      font-size: 20px;
+      margin-top: 20px;
+    }
+
+    &-title, &-description {
+      color: var(--site-config-color-index-page-second-text-color);
+      font-size: 14px;
+      margin-top: 10px;
+      min-height: 40px;
+      text-align: center;
+    }
+
+    &-social {
+      margin-top: 10px;
+
+      &-icon {
+        margin: 10px 6px 0;
+        transition: all 0.25s !important;
+        
+        &:hover {
+          opacity: 0.7;
+          transform: scale(1.25);
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  &__contributors-link {
+    display: block;
+    margin-top: 80px;
+    width: 800px;
+  }
+
+  &__contributors-image {
+    display: block;
+    width: 100%;
+  }
+
+  &__sponsors {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 90px;
+  }
+
+  &__sponsors-title {
+    padding-top: 24px;
+    line-height: 32px;
+    font-size: 22px;
+    border-top: 2px 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;
+  }
+
+  &__sponsors-link {
+    display: block;
+    margin-top: 50px;
+    width: 1100px;
+  }
+
+  &__sponsors-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-border);
+    color: var(--site-config-color-index-page-second-text-color);
+    font-size: 14px;
+    line-height: 26px;
+    transition: all .2s;
+  }
+}
 </style>

package/site/types.ts

@@ -0,0 +1,6 @@
+import { type IContext } from "@varlet/ui"
+
+export interface SiteContext extends IContext {
+  showPlayground: boolean
+  playgroundURL: string
+}

package/template/generators/base/package.json

@@ -42,6 +42,7 @@
     "@varlet/icons": "workspace:*",
     "@varlet/touch-emulator": "workspace:*",
     "@varlet/shared": "workspace:*",
+    "@varlet/ui": "workspace:*",
     "@vue/test-utils": "2.4.1",
     "@vue/runtime-core": "3.3.4",
     "@vitest/coverage-istanbul": "0.34.3",

package/site/components/button/Button.vue

@@ -1,106 +0,0 @@
-<template>
-  <button
-    v-ripple="{ disabled: disabled || !ripple }"
-    :class="
-      classes(
-        n(),
-        'var-site--box',
-        n(`--${size}`),
-        [block, `var-site--flex ${n('--block')}`, 'var-site--inline-flex'],
-        [disabled, n('--disabled')],
-        [text, `${n(`--text-${type}`)} ${n('--text')}`, `${n(`--${type}`)} var-site-elevation--2`],
-        [text && disabled, n('--text-disabled')],
-        [round, n('--round')],
-        [outline, n('--outline')]
-      )
-    "
-    :style="{
-      color: textColor,
-      background: color,
-    }"
-    :disabled="disabled"
-    @click="handleClick"
-    @touchstart="handleTouchstart"
-  >
-    <var-loading
-      :class="n('loading')"
-      var-site-button-cover
-      :color="loadingColor"
-      :type="loadingType"
-      :size="loadingSize"
-      :radius="loadingRadius"
-      v-if="loading || pending"
-    />
-    <div :class="classes(n('content'), [loading || pending, n('--hidden')])">
-      <slot />
-    </div>
-  </button>
-</template>
-
-<script lang="ts">
-import Ripple from '../ripple'
-import VarLoading from '../loading'
-import { defineComponent, ref } from 'vue'
-import { props } from './props'
-import { createNamespace } from '../utils/components'
-import type { Ref } from 'vue'
-
-const { n, classes } = createNamespace('button')
-
-export default defineComponent({
-  name: 'VarButton',
-  components: {
-    VarLoading,
-  },
-  directives: { Ripple },
-  props,
-  setup(props) {
-    const pending: Ref<boolean> = ref(false)
-
-    const attemptAutoLoading = (result: any) => {
-      if (props.autoLoading) {
-        pending.value = true
-        Promise.resolve(result).finally(() => {
-          pending.value = false
-        })
-      }
-    }
-
-    const handleClick = (e: Event) => {
-      const { loading, disabled, onClick } = props
-
-      if (!onClick || loading || disabled || pending.value) {
-        return
-      }
-
-      attemptAutoLoading(onClick(e))
-    }
-
-    const handleTouchstart = (e: Event) => {
-      const { loading, disabled, onTouchstart } = props
-
-      if (!onTouchstart || loading || disabled || pending.value) {
-        return
-      }
-
-      attemptAutoLoading(onTouchstart(e))
-    }
-
-    return {
-      n,
-      classes,
-      pending,
-      handleClick,
-      handleTouchstart,
-    }
-  },
-})
-</script>
-
-<style lang="less">
-@import '../styles/common';
-@import '../styles/elevation';
-@import '../ripple/ripple';
-@import '../loading/loading';
-@import './button';
-</style>