@varlet/cli 1.27.16 → 1.27.18

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

@@ -15,6 +15,12 @@
     "UI"
   ],
   "license": "MIT",
+  "sideEffects": [
+    "es/**/style/*",
+    "lib/**/style/*",
+    "*.css",
+    "*.less"
+  ],
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "dev": "varlet-cli dev",
@@ -38,6 +44,7 @@
     "@varlet/icons": "workspace:*",
     "@varlet/stylelint-config": "workspace:*",
     "@varlet/touch-emulator": "workspace:*",
+    "@varlet/shared": "workspace:*",
     "@vue/test-utils": "2.0.0-rc.6",
     "clipboard": "^2.0.6",
     "eslint": "^7.30.0",

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

@@ -15,6 +15,12 @@
     "UI"
   ],
   "license": "MIT",
+  "sideEffects": [
+    "es/**/style/*",
+    "lib/**/style/*",
+    "*.css",
+    "*.less"
+  ],
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "dev": "varlet-cli dev",
@@ -38,6 +44,7 @@
     "@varlet/icons": "workspace:*",
     "@varlet/stylelint-config": "workspace:*",
     "@varlet/touch-emulator": "workspace:*",
+    "@varlet/shared": "workspace:*",
     "@vue/test-utils": "2.0.0-rc.6",
     "clipboard": "^2.0.6",
     "eslint": "^7.30.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "1.27.16",
+  "version": "1.27.18",
   "description": "cli of varlet",
   "bin": {
     "varlet-cli": "./lib/index.js"
@@ -28,10 +28,10 @@
     "url": "https://github.com/varletjs/varlet/issues"
   },
   "dependencies": {
-    "@varlet/icons": "1.27.16",
-    "@varlet/shared": "1.27.16",
-    "@varlet/markdown-vite-plugin": "1.27.16",
-    "@varlet/touch-emulator": "1.27.16",
+    "@varlet/icons": "1.27.18",
+    "@varlet/shared": "1.27.18",
+    "@varlet/markdown-vite-plugin": "1.27.18",
+    "@varlet/touch-emulator": "1.27.18",
     "@babel/core": "^7.14.8",
     "@babel/helper-plugin-utils": "^7.14.5",
     "@babel/preset-env": "^7.14.8",
@@ -60,7 +60,7 @@
     "slash": "^3.0.0",
     "ts-jest": "^26.5.1",
     "typescript": "^4.4.4",
-    "vite": "2.9.5",
+    "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.16",
+    "@varlet/touch-emulator": "1.27.18",
     "@vue/test-utils": "^2.0.0-rc.6",
     "clipboard": "^2.0.6",
     "live-server": "^1.2.1",

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

@@ -4,6 +4,7 @@
   height: 100vh;
   box-sizing: border-box;
   min-width: 1200px;
+  min-height: 460px;
   background: var(--site-config-color-home-page-background);
   overflow: hidden;
   display: flex;
@@ -120,11 +121,6 @@
     width: 35vw;
     min-width: 500px;
 
-    .description-container {
-      display: flex;
-      margin-bottom: 35px;
-    }
-
     .logo-container {
       margin-right: 20px;
     }
@@ -165,30 +161,71 @@
       margin-left: 10px;
     }
 
-    .base-title {
-      font-size: 84px;
-      line-height: 72px;
-      font-weight: 500;
-      margin-top: 8px;
-      animation: fade-in .75s forwards;
+    @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;
+      }
     }
 
-    .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 {
-      width: 90px;
-      height: 90px;
-      flex-shrink: 0;
-      margin-right: 25px;
-      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,19 +4,19 @@ 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 en_US from './locale/en-US'
 import zh_CN from './locale/zh-CN'
-import type { Ref } from 'vue'
+import type { Ref, ComputedRef } from 'vue'
 
 const route = useRoute()
 const router = useRouter()
 const packs = {
   'zh-CN': zh_CN,
-  'en-US': en_US
+  'en-US': en_US,
 } as any
 
 const github = get(config, 'pc.header.github')
@@ -24,16 +24,28 @@ 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 = () => {
-  const { language: lang } = getPCLocationInfo()
-  router.push(`/${lang}/home`)
+  router.push(`/${language.value}/home`)
 }
 
 const getThemesMessage = () => ({ action: 'themesChange', from: 'pc', data: currentThemes.value })
@@ -54,6 +66,7 @@ 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
 }
@@ -63,6 +76,8 @@ const toggleLanguages = () => {
 
   const { menuName } = getPCLocationInfo()
   const replaceStr = `/${lang === 'zh-CN' ? 'en-US' : 'zh-CN'}/${menuName}`
+
+  language.value = lang
   router.replace(replaceStr)
 }
 
@@ -87,16 +102,16 @@ watch(() => route.path, setLocale, { immediate: true })
     <div class="profile-container">
       <div class="container-box">
         <div class="description-container">
-          <animation-box class="logo" />
+          <animation-box class="logo-box" />
           <div class="base-title">{{ title }}</div>
         </div>
-        <div class="base-description">{{ pack.description }}</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" />
+              <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">
@@ -107,11 +122,16 @@ watch(() => route.path, setLocale, { immediate: true })
         <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>
+              <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-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>
@@ -121,5 +141,5 @@ watch(() => route.path, setLocale, { immediate: true })
 </template>
 
 <style lang="less" scoped>
-@import "./index";
+@import './index';
 </style>