@varlet/cli 1.27.20 → 2.0.0-alpha.1663499244572

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

@@ -1,145 +1,130 @@
-<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, computed } 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, ComputedRef } 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 language: Ref<string> = ref(get(config, 'defaultLanguage'))
-const languages: Ref<Record<string, string>> = ref(get(config, 'pc.header.i18n'))
-const pack: Ref<Record<string, string>> = ref({})
-
-const description: ComputedRef<string> = computed(() => {
-  const { indexPage = {} } = get(config, 'pc')
-
-  return indexPage?.description?.[language.value] || pack.value.description
-})
-
-const started: ComputedRef<string> = computed(() => {
-  const { indexPage = {} } = get(config, 'pc')
-
-  return indexPage?.started?.[language.value] || pack.value.started
-})
-
-const goGithub = () => {
-  window.open(github)
-}
-
-const getStar = () => {
-  router.push(`/${language.value}/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
-
-  language.value = lang
-  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}`
-
-  language.value = lang
-  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-box" />
-          <div class="base-title">{{ title }}</div>
-        </div>
-        <div class="base-description">{{ 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>{{ 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>
+<script setup lang="ts">
+import AnimationBox from '../../components/AnimationBox.vue'
+import config from '@config'
+import { get } from 'lodash-es'
+import { ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { getBrowserTheme, setTheme, Theme } from "../../../utils";
+import { getPCLocationInfo, watchTheme } from '@varlet/cli/site/utils'
+import type { Ref } from 'vue'
+
+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 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>> = get(config, 'pc.indexPage')
+
+const goGithub = () => {
+  window.open(github)
+}
+
+const getStar = () => {
+  router.push(`/${language.value}/home`)
+}
+
+const getThemeMessage = () => ({ action: 'theme-change', from: 'pc', data: currentTheme.value })
+
+const setCurrentTheme = (theme: Theme) => {
+  currentTheme.value = theme
+  setTheme(config, currentTheme.value)
+  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
+
+  language.value = 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}`
+
+  language.value = lang
+  router.replace(replaceStr)
+}
+
+setTheme(config, currentTheme.value)
+
+window.postMessage(getThemeMessage(), '*')
+
+watchTheme((theme, from) => {
+  from === 'mobile' && setCurrentTheme(theme)
+})
+
+watch(() => route.path, setLocale, { immediate: true })
+</script>
+
+<template>
+  <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__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>
+      </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>
+          <div class="varlet-doc-index__feature-description">{{ feature.description[language] }}</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>
+
+        <a class="varlet-doc-index__contributors-link" :href="indexPage.contributors.link">
+          <img class="varlet-doc-index__contributors-image" :src="indexPage.contributors.image">
+        </a>
+      </div>
+
+      <div class="varlet-doc-index__footer">
+        <div class="varlet-doc-index__license">{{ indexPage.license[language] }}</div>
+        <div class="varlet-doc-index__copyright">{{ indexPage.copyright[language] }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+@import './index';
+</style>

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

@@ -1,5 +1 @@
-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',
-}
+// this file used to generate route path ('/en-US/index')

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

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

package/site/tsconfig.json

@@ -1,11 +1,11 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "strict": true,
-    "downlevelIteration": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "jsx": "preserve",
-    "lib": ["esnext", "dom"]
-  }
-}
+{
+  "compilerOptions": {
+    "target": "es5",
+    "strict": true,
+    "downlevelIteration": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "lib": ["esnext", "dom"]
+  }
+}

package/site/useProgress.ts

@@ -1,75 +1,72 @@
-import Progress from './components/progress'
-import { reactive } from 'vue'
-import config from '@config'
-import { getBrowserThemes, mountInstance, watchThemes } from './utils'
-import { get } from 'lodash-es'
-
-function getColor(themes?: 'themes' | 'darkThemes') {
-  const themesKey = get(config, 'themesKey')
-
-  return get(config, `${themes ?? getBrowserThemes(themesKey)}.color-progress`)
-}
-
-function getTrackColor(themes?: 'themes' | 'darkThemes') {
-  const themesKey = get(config, 'themesKey')
-
-  return get(config, `${themes ?? getBrowserThemes(themesKey)}.color-progress-track`)
-}
-
-export function useProgress() {
-  let timer: number
-  let currentThemes: 'themes' | 'darkThemes'
-  const trackColor = getTrackColor()
-  const color = getColor()
-
-  const props = reactive({
-    style: {
-      position: 'fixed',
-      width: '100%',
-      left: 0,
-      top: 0,
-      zIndex: 10086,
-    },
-    trackColor,
-    color,
-    lineWidth: 3,
-    value: 0,
-  })
-
-  watchThemes((themes) => {
-    currentThemes = themes
-    props.trackColor = getTrackColor(themes)
-    props.color = props.value === 100 ? getTrackColor(themes) : getColor(themes)
-  }, false)
-
-  const changeValue = () => {
-    timer = window.setTimeout(() => {
-      if (props.value >= 95) return
-      let num = Math.random()
-
-      if (props.value < 70) num = Math.round(5 * Math.random())
-
-      props.value += num
-      changeValue()
-    }, 200)
-  }
-
-  const start = () => {
-    props.value = 0
-    setTimeout(() => (props.color = getColor(currentThemes)), 200)
-    changeValue()
-  }
-
-  const end = () => {
-    props.value = 100
-    setTimeout(() => (props.color = getTrackColor(currentThemes)), 300)
-    window.clearTimeout(timer)
-  }
-
-  mountInstance(Progress, props)
-
-  return {
-    start,
-    end,
-  }
-}
+import Progress from './components/progress'
+import config from '@config'
+import { reactive } from 'vue'
+import { getBrowserTheme, mountInstance, Theme, watchTheme } from "./utils";
+import { get } from 'lodash-es'
+
+function getColor(theme?: Theme) {
+  return get(config, `${theme ?? getBrowserTheme()}.color-progress`)
+}
+
+function getTrackColor(theme?: Theme) {
+  return get(config, `${theme ?? getBrowserTheme()}.color-progress-track`)
+}
+
+export function useProgress() {
+  let timer: number
+  let currentTheme: Theme
+
+  const trackColor = getTrackColor()
+  const color = getColor()
+
+  const props = reactive({
+    style: {
+      position: 'fixed',
+      width: '100%',
+      left: 0,
+      top: 0,
+      zIndex: 10086,
+    },
+    trackColor,
+    color,
+    lineWidth: 3,
+    value: 0,
+  })
+
+  watchTheme((theme) => {
+    currentTheme = theme
+    props.trackColor = getTrackColor(theme)
+    props.color = props.value === 100 ? getTrackColor(theme) : getColor(theme)
+  }, false)
+
+  const changeValue = () => {
+    timer = window.setTimeout(() => {
+      if (props.value >= 95) return
+      let num = Math.random()
+
+      if (props.value < 70) num = Math.round(5 * Math.random())
+
+      props.value += num
+      changeValue()
+    }, 200)
+  }
+
+  const start = () => {
+    props.value = 0
+    setTimeout(() => (props.color = getColor(currentTheme)), 200)
+    changeValue()
+  }
+
+  const end = () => {
+    props.value = 100
+    setTimeout(() => (props.color = getTrackColor(currentTheme)), 300)
+    window.clearTimeout(timer)
+  }
+
+  mountInstance(Progress, props)
+
+  return {
+    start,
+    end,
+  }
+}