@varlet/cli 1.27.20-alpha.1660211980346 → 1.27.20

package/generators/config/default/base/package.json

@@ -101,5 +101,5 @@
     "Chrome >= 51",
     "iOS >= 10"
   ],
-  "packageManager": "pnpm@7.9.0"
+  "packageManager": "pnpm@6.24.3"
 }

package/generators/config/i18n/base/package.json

@@ -101,5 +101,5 @@
     "Chrome >= 51",
     "iOS >= 10"
   ],
-  "packageManager": "pnpm@7.9.0"
+  "packageManager": "pnpm@6.24.3"
 }

package/lib/commands/commitLint.js

@@ -11,7 +11,7 @@ function isVersion(message) {
 }
 function commitLint(gitParams) {
     var message = require('fs').readFileSync(gitParams, 'utf-8').trim();
-    var COMMIT_MESSAGE_RE = /^(revert|fix|feat|docs|perf|test|types|style|build|chore|release|refactor)(\(.+\))?!?: (.|\n)+/;
+    var COMMIT_MESSAGE_RE = /^(revert|fix|feat|docs|perf|test|types|style|build|chore|release|refactor)(\(.+\))?: (.|\n)+/;
     if (!isVersion(message) && !COMMIT_MESSAGE_RE.test(message)) {
         logger_1.default.error("Commit message invalid");
         logger_1.default.warning("The rules for commit messages are as follows\n\nExample:\n\nfeat: add a new feature\nfeat(ui/button): add a new feature in the ui/button scope\n\nfix: fix a bug\nfix(ui/button): fix a bug in the ui/button scope\n\ndocs: fix an error in the documentation\ndocs(ui/button): fix a documentation error in the ui/button scope\n\nAllowed types:\n- fix\n- feat\n- docs\n- perf\n- test\n- types\n- style\n- build\n- chore\n- release\n- refactor\n- revert\n\nCommit message reference: https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y\n\u53C2\u8003\u962E\u4E00\u5CF0Commit message\u7F16\u5199\u6307\u5357: https://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html");

package/lib/config/vite.config.js

@@ -64,7 +64,7 @@ function getBuildConfig(varletConfig) {
     var devConfig = getDevConfig(varletConfig);
     return __assign(__assign({}, devConfig), { base: './', build: {
             outDir: constant_1.SITE_OUTPUT_PATH,
-            reportCompressedSize: false,
+            brotliSize: false,
             emptyOutDir: true,
             cssTarget: 'chrome61',
             rollupOptions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "1.27.20-alpha.1660211980346",
+  "version": "1.27.20",
   "description": "cli of varlet",
   "bin": {
     "varlet-cli": "./lib/index.js"
@@ -28,16 +28,16 @@
     "url": "https://github.com/varletjs/varlet/issues"
   },
   "dependencies": {
-    "@varlet/icons": "1.27.20-alpha.1660211980346",
-    "@varlet/shared": "1.27.20-alpha.1660211980346",
-    "@varlet/markdown-vite-plugin": "1.27.20-alpha.1660211980346",
-    "@varlet/touch-emulator": "1.27.20-alpha.1660211980346",
+    "@varlet/icons": "1.27.20",
+    "@varlet/shared": "1.27.20",
+    "@varlet/markdown-vite-plugin": "1.27.20",
+    "@varlet/touch-emulator": "1.27.20",
     "@babel/core": "^7.14.8",
     "@babel/helper-plugin-utils": "^7.14.5",
     "@babel/preset-env": "^7.14.8",
     "@babel/preset-typescript": "^7.14.5",
-    "@vitejs/plugin-vue": "3.0.1",
-    "@vitejs/plugin-vue-jsx": "2.0.0",
+    "@vitejs/plugin-vue": "2.2.0",
+    "@vitejs/plugin-vue-jsx": "1.3.5",
     "@vue/babel-plugin-jsx": "1.1.1",
     "@vue/compiler-sfc": "3.2.25",
     "@vue/runtime-core": "3.2.25",
@@ -60,7 +60,7 @@
     "slash": "^3.0.0",
     "ts-jest": "^26.5.1",
     "typescript": "^4.4.4",
-    "vite": "3.0.4",
+    "vite": "2.9.14",
     "vite-plugin-html": "^2.1.0",
     "vue": "3.2.25",
     "vue-jest": "^5.0.0-alpha.8"
@@ -76,7 +76,7 @@
     "@types/semver": "^7.3.9"
   },
   "peerDependencies": {
-    "@varlet/touch-emulator": "1.27.20-alpha.1660211980346",
+    "@varlet/touch-emulator": "1.27.20",
     "@vue/test-utils": "^2.0.0-rc.6",
     "clipboard": "^2.0.6",
     "live-server": "^1.2.1",

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

@@ -1,124 +1,231 @@
-@keyframes logo-wave {
+.home-page {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  box-sizing: border-box;
+  min-width: 1200px;
+  min-height: 460px;
+  background: var(--site-config-color-home-page-background);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+@keyframes fade-in {
   0% {
-    transform: translate(8%, 8%);
+    opacity: 0;
+    transform: translateX(-100%);
   }
 
-  20% {
-    transform: translate(-8%, 8%);
+
+  to {
+    opacity: 1;
+    transform: translateX(0%);
   }
+}
 
-  40% {
-    transform: translate(-8%, -8%);
+@keyframes slash-1 {
+  from {
+    transform: rotate(90deg);
+    ;
   }
 
-  60% {
-    transform: translate(-2%, 8%);
+  to {
+    transform: rotate(10deg);
   }
+}
 
-  80% {
-    transform: translate(8%, -8%);
+@keyframes slash-2 {
+  from {
+    transform: rotate(90deg);
+    ;
   }
 
-  100% {
-    transform: translate(8%, 8%);
+  to {
+    transform: rotate(20deg);
   }
 }
 
-.varlet-doc-index {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-height: 100vh;
-  box-sizing: border-box;
-  background: var(--site-config-color-index-page-background);
-
-  &__layout {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 100px;
-    max-width: 1200px;
+@keyframes slash-3 {
+  from {
+    transform: rotate(90deg);
+    ;
   }
 
-  &__logo {
-    width: 100%;
-    height: 100%;
-    flex-shrink: 0;
-    z-index: 2;
+  to {
+    transform: rotate(30deg);
   }
+}
 
-  &__logo-container {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    width: 160px;
-    height: 160px;
+@keyframes slash-4 {
+  from {
+    transform: rotate(90deg);
+    ;
   }
 
-  &__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;
+  to {
+    transform: rotate(40deg);
   }
+}
 
-  &__title {
-    font-size: 54px;
-    margin-top: 60px;
+@keyframes slash-5 {
+  from {
+    transform: rotate(90deg);
+    ;
   }
 
-  &__description {
-    width: 700px;
-    font-size: 16px;
-    line-height: 28px;
-    letter-spacing: 1px;
-    margin-top: 30px;
-    text-align: center;
-    color: var(--site-config-color-index-page-second-text-color);
+  to {
+    transform: rotate(50deg);
   }
+}
 
-  &__link-button-group {
-    display: flex;
-    justify-content: space-around;
-    margin-top: 30px;
-  }
+.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);
+}
 
-  &__link-button {
-    height: 44px;
-    font-size: 18px;
-    transition: all .25s;
-    margin: 0 10px;
-  }
+.box-1 {
+  animation: slash-1 .75s forwards;
+}
 
-  &__link-button-text {
-    margin-right: 4px;
-  }
+.box-2 {
+  animation: slash-2 .75s forwards;
+}
 
-  &__features {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    margin-top: 60px;
-  }
+.box-3 {
+  animation: slash-3 .75s forwards;
+}
 
-  &__feature {
-    width: 280px;
-    margin: 10px;
-    padding: 20px;
-    border-radius: 4px;
-    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);
-  }
+.box-4 {
+  animation: slash-4 .75s forwards;
+}
 
-  &__feature-description {
-    color: var(--site-config-color-index-page-second-text-color);
-    font-size: 14px;
-    margin-top: 10px;
-  }
+.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;
+
+    .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;
+    }
+
+    @media all and (max-width: 2560px) {
+      .description-container {
+        display: flex;
+        margin-bottom: 40px;
+      }
+
+      .base-title {
+        font-size: 110px;
+        line-height: 72px;
+        font-weight: 500;
+        margin-top: 21px;
+        animation: fade-in .75s forwards;
+      }
+
+      .base-description {
+        font-size: 20px;
+        line-height: 38px;
+        padding-left: 4px;
+        font-weight: 500;
+        margin-bottom: 43px;
+        letter-spacing: 1px;
+        animation: fade-in .75s forwards;
+      }
+
+      .logo-box {
+        width: 120px;
+        height: 120px;
+        flex-shrink: 0;
+        margin-right: 30px;
+        z-index: 2;
+      }
+    }
+
+    @media all and (max-width: 1920px) {
+
+      .description-container {
+        display: flex;
+        margin-bottom: 35px;
+      }
+
+      .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-box {
+        width: 90px;
+        height: 90px;
+        flex-shrink: 0;
+        margin-right: 25px;
+        z-index: 2;
+      }
+    }
+  }
+}

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

@@ -4,14 +4,20 @@ 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 { 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 type { Ref } from 'vue'
+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')
@@ -20,7 +26,19 @@ 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 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)
@@ -41,7 +59,7 @@ const setCurrentThemes = (themes: 'themes' | 'darkThemes') => {
 const toggleTheme = () => {
   setCurrentThemes(currentThemes.value === 'darkThemes' ? 'themes' : 'darkThemes')
   window.postMessage(getThemesMessage(), '*')
-  ;(document.getElementById('mobile') as HTMLIFrameElement)?.contentWindow!.postMessage(getThemesMessage(), '*')
+    ; (document.getElementById('mobile') as HTMLIFrameElement)?.contentWindow!.postMessage(getThemesMessage(), '*')
 }
 
 const setLocale = () => {
@@ -49,6 +67,7 @@ const setLocale = () => {
   if (!lang) return
 
   language.value = lang
+  pack.value = packs[lang]
   document.title = get(config, 'pc.title')[lang] as string
 }
 
@@ -74,41 +93,47 @@ 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-site-button class="varlet-doc-index__link-button" text outline @click="goGithub">
-          <var-site-icon name="github" size="24px" />
-        </var-site-button>
-        <var-site-button class="varlet-doc-index__link-button" text outline v-if="darkMode" @click="toggleTheme">
-          <var-site-icon size="24px" :name="currentThemes === 'themes' ? 'white-balance-sunny' : 'weather-night'" />
-        </var-site-button>
-        <var-site-button
-          class="varlet-doc-index__link-button"
-          text
-          outline
-          v-if="languages"
-          @click="toggleLanguages"
-        >
-          <var-site-icon name="translate" size="24px" />
-        </var-site-button>
-        <var-site-button class="varlet-doc-index__link-button" type="primary" @click="getStar">
-          <span class="varlet-doc-index__link-button-text">{{ indexPage.started[language] }}</span>
-          <var-site-icon style="transform: rotate(-90deg)" name="arrow-down" size="24px" />
-        </var-site-button>
-      </div>
+  <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="varlet-doc-index__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 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>

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

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

package/varlet.default.config.js

@@ -20,81 +20,6 @@ module.exports = {
   pc: {
     menu: [],
     redirect: '/index',
-    indexPage: {
-      description: {
-        'zh-CN':
-          'Varlet 是一个基于 Vue3 开发的 Material 风格移动端组件库，全面拥抱 Vue3 生态，由社区团队维护。支持 Typescript、按需引入、暗黑模式、主题定制、国际化，并提供 VSCode 插件保障良好的开发体验',
-        'en-US':
-          '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',
-      },
-      started: {
-        'zh-CN': '起步',
-        'en-US': 'GET STARTED',
-      },
-      features: [
-        {
-          name: {
-            'zh-CN': '组件丰富',
-            'en-US': 'Rich components',
-          },
-          description: {
-            'zh-CN': '提供50个高质量通用组件',
-            'en-US': 'Provide 50 high quality general purpose components',
-          },
-        },
-        {
-          name: {
-            'zh-CN': '按需引入',
-            'en-US': 'On-Demand',
-          },
-          description: {
-            'zh-CN': '每一个组件都可单独引入，并有着良好的 tree-shaking 优化',
-            'en-US': 'Each component can be imported separately and has good tree-shaking optimization',
-          },
-        },
-        {
-          name: {
-            'zh-CN': '国人开发',
-            'en-US': 'Developed by Chinese',
-          },
-          description: {
-            'zh-CN': '由国人开发，完善的中英文文档和后勤保障',
-            'en-US': 'Complete Chinese and English documentation and logistics support',
-          },
-        },
-        {
-          name: {
-            'zh-CN': '国际化',
-            'en-US': 'Locale',
-          },
-          description: {
-            'zh-CN': '内置国际化 API，默认支持中英两国语言',
-            'en-US': 'Built-in i18n API, which supports both Chinese and English languages by default',
-          },
-        },
-        {
-          name: {
-            'zh-CN': '开发工具支持',
-            'en-US': 'IDE Code Support',
-          },
-          description: {
-            'zh-CN': '支持 webstorm，vscode 组件属性高亮, 提供vscode插件为开发提升效率',
-            'en-US':
-              'Supports to highlight the component syntax for webstorm and vscode, and provides a separate helper plugin for vscode',
-          },
-        },
-        {
-          name: {
-            'zh-CN': 'Typescript + SSR',
-            'en-US': 'Typescript + SSR',
-          },
-          description: {
-            'zh-CN': '对 TypeScript 使用者十分友好，并且支持服务端渲染',
-            'en-US': 'Develop with TypeScript, and support SSR',
-          },
-        },
-      ],
-    },
     title: {
       'zh-CN': '面向 Vue3 的 Material 风格移动端组件库',
       'en-US': 'Material design mobile components built for Vue3',
@@ -135,10 +60,11 @@ module.exports = {
   },
   themes: {
     'color-body': '#fff',
-    'color-index-page-background': '#fff',
-    'color-index-page-feature-background': '#fff',
-    'color-index-page-logo-mask-background': 'linear-gradient(-45deg, #8baff8 50%, #84e0ff 50%)',
-    'color-index-page-second-text-color': 'rgba(60, 60, 60, .7)',
+    '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',
@@ -176,10 +102,11 @@ module.exports = {
   },
   darkThemes: {
     'color-body': '#121212',
-    'color-index-page-background': '#272727',
-    'color-index-page-feature-background': '#303030',
-    'color-index-page-logo-mask-background': 'linear-gradient(-45deg, #729dfc 50%, #6859f4 50%)',
-    'color-index-page-second-text-color': 'rgba(255, 255, 255, .75)',
+    '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',