@varlet/cli 1.27.17-alpha.1656907860130 → 1.27.17

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

@@ -1,128 +1,145 @@
-<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 description:Ref<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
-
-  description.value = get(config, 'pc.description')[lang] as string
-  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">{{ 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>
+<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" />
+          <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>

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

@@ -1,3 +1,5 @@
-export default {
-  started: 'GET STARTED'
-}
+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

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

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,75 @@
-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 { 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,
+  }
+}