@varlet/cli 2.0.0-alpha.1663499244572 → 2.0.0-alpha.1664031123039

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

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

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

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