@varlet/cli 3.2.11 → 3.2.12-alpha.1717078222679

package/README.md

@@ -45,6 +45,7 @@ Also refer to `@varlet/ui` [varlet.config.mjs](https://github.com/varletjs/varle
 | `namespace` | Component library namespace, will be used as component prefix | _string_ | `var` |
 | `host` | Development server host | _number_ | `localhost` |
 | `port` | Development server port | _number_ | `8080` |
+| `proxy` | Development server proxy | _Record<string, string \| ProxyOptions>_ | `-` |
 | `title` | The title of the component library in the document | _string_ | `VARLET` |
 | `logo` | The logo of the component library in the document | _string_ | `-` |
 | `alias` | Path alias (root is src folder when use relative path) | _Record<string, string>_ | `-` |

package/README.zh-CN.md

@@ -45,6 +45,7 @@ varlet-cli gen
 | `namespace` | 组件库命名空间, 会作为组件前缀 | _string_ | `var` |
 | `host` | 开发服务器主机 | _number_ | `localhost` |
 | `port` | 开发服务器端口 | _number_ | `8080` |
+| `proxy` | 开发服务器代理 | _Record<string, string \| ProxyOptions>_ | `-` |
 | `title` | 文档中组件库的标题 | _string_ | `VARLET` |
 | `logo` | 文档中组件库的 logo | _string_ | `-` |
 | `alias` | 路径别名 (使用相对路径时，根路径为 src 文件夹) | _Record<string, string>_ | `-` |

package/lib/node/config/varlet.config.d.ts

@@ -1,5 +1,6 @@
 import { type VIConfig } from '@varlet/icon-builder';
 import { type CopyOptions } from '@varlet/vite-plugins';
+import { ProxyOptions } from 'vite';
 export interface VarletConfigIcons extends VIConfig {
     /**
      * @default true
@@ -38,6 +39,17 @@ export interface VarletConfigPcHeader {
         }[];
     }[];
 }
+export interface VarletConfigPcAd {
+    id?: string;
+    logo?: string;
+    logoHeight?: string;
+    description?: Record<string, string>;
+    descriptionBackground?: string;
+    descriptionTextColor?: string;
+    link?: Record<string, string>;
+    background?: string;
+    textColor?: string;
+}
 export interface VarletConfigMobileHeader {
     i18n?: Record<string, string>;
     github?: string;
@@ -82,6 +94,7 @@ export interface VarletConfigPc {
     redirect?: string;
     clipboard?: Record<string, string>;
     indexPage?: VarletConfigPcIndexPage;
+    ad?: VarletConfigPcAd;
     header?: VarletConfigPcHeader;
     menu?: VarletConfigPcMenu[];
     htmlInject?: VarletConfigHtmlInject;
@@ -119,6 +132,7 @@ export interface VarletConfig {
      * Local dev server port
      */
     port?: number;
+    proxy?: Record<string, string | ProxyOptions>;
     title?: string;
     logo?: string;
     themeKey?: string;

package/lib/node/config/vite.config.js

@@ -42,6 +42,7 @@ export function getDevConfig(varletConfig) {
         server: {
             port: get(varletConfig, 'port'),
             host: host === 'localhost' ? '0.0.0.0' : host,
+            proxy: get(varletConfig, 'proxy', {}),
         },
         publicDir: SITE_PUBLIC_PATH,
         plugins: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "3.2.11",
+  "version": "3.2.12-alpha.1717078222679",
   "type": "module",
   "description": "cli of varlet",
   "bin": {
@@ -64,8 +64,8 @@
     "semver": "^7.3.5",
     "sharp": "0.31.1",
     "typescript": "^5.1.5",
-    "@varlet/shared": "3.2.11",
-    "@varlet/vite-plugins": "3.2.11"
+    "@varlet/shared": "3.2.12-alpha.1717078222679",
+    "@varlet/vite-plugins": "3.2.12-alpha.1717078222679"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.1",
@@ -80,9 +80,9 @@
     "@types/semver": "^7.3.9",
     "@types/sharp": "0.31.1",
     "rimraf": "^5.0.1",
-    "@varlet/ui": "3.2.11",
-    "@varlet/touch-emulator": "3.2.11",
-    "@varlet/icons": "3.2.11"
+    "@varlet/ui": "3.2.12-alpha.1717078222679",
+    "@varlet/icons": "3.2.12-alpha.1717078222679",
+    "@varlet/touch-emulator": "3.2.12-alpha.1717078222679"
   },
   "peerDependencies": {
     "@vue/runtime-core": "3.4.21",
@@ -95,9 +95,9 @@
     "lodash-es": "^4.17.21",
     "vue": "3.4.21",
     "vue-router": "4.2.0",
-    "@varlet/ui": "3.2.11",
-    "@varlet/icons": "3.2.11",
-    "@varlet/touch-emulator": "3.2.11"
+    "@varlet/icons": "3.2.12-alpha.1717078222679",
+    "@varlet/ui": "3.2.12-alpha.1717078222679",
+    "@varlet/touch-emulator": "3.2.12-alpha.1717078222679"
   },
   "scripts": {
     "dev": "tsc --watch",

package/site/pc/Layout.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import config from '@config'
+import AppAd from './components/AppAd.vue'
 import AppMobile from './components/AppMobile.vue'
 import AppHeader from './components/AppHeader.vue'
 import AppSidebar from './components/AppSidebar.vue'
@@ -23,7 +24,7 @@ const doc: Ref<HTMLElement | null> = ref(null)
 const route = useRoute()
 
 const getComponentNameByMenuName = (menuName: string) => {
-  const currentMenu = menu.value.find(menu => menu.doc === menuName)
+  const currentMenu = menu.value.find((menu) => menu.doc === menuName)
   return currentMenu?.type === MenuTypes.COMPONENT ? menuName : mobileRedirect.slice(1)
 }
 
@@ -31,9 +32,7 @@ const init = () => {
   const { menuName } = getPCLocationInfo()
 
   nextTick(() => {
-    const children = document
-      .querySelector('.varlet-site-sidebar')!
-      .getElementsByClassName('var-cell')
+    const children = document.querySelector('.varlet-site-sidebar')!.getElementsByClassName('var-cell')
     const index = menu.value.findIndex((item) => item.doc === menuName)
 
     if (index !== -1) {
@@ -90,7 +89,7 @@ watch(
     menuName.value = _menuName
     hash.value = _hash
     language.value = lang
-    useMobile.value = menu.value.find(item => item.doc === _menuName)?.useMobile ?? get(config, 'useMobile')
+    useMobile.value = menu.value.find((item) => item.doc === _menuName)?.useMobile ?? get(config, 'useMobile')
     document.title = get(config, 'pc.title')[lang] as string
   },
   { immediate: true }
@@ -99,22 +98,15 @@ watch(
 
 <template>
   <div class="varlet-site">
-    <app-header :language="language"/>
+    <app-ad :language="language" />
+
+    <app-header :language="language" />
 
     <div class="varlet-site-content">
-      <app-sidebar
-        :language="language"
-        :menu="menu"
-        :menu-name="menuName"
-        @change="handleSidebarChange"
-      />
+      <app-sidebar :language="language" :menu="menu" :menu-name="menuName" @change="handleSidebarChange" />
 
-      <div
-        class="varlet-site-doc-container"
-        ref="doc"
-        :class="[!useMobile && 'varlet-site-doc-container--pc-only']"
-      >
-        <router-view/>
+      <div class="varlet-site-doc-container" ref="doc" :class="[!useMobile && 'varlet-site-doc-container--pc-only']">
+        <router-view />
       </div>
 
       <app-mobile
@@ -127,13 +119,15 @@ watch(
     </div>
   </div>
 
-  <var-popup
-    position="right"
-    :show="context.showPlayground"
-    @click-overlay="confirmClose"
-  >
+  <var-popup position="right" :show="context.showPlayground" @click-overlay="confirmClose">
     <div class="varlet-site-playground-container">
-      <iframe v-if="context.showPlayground" id="playground" class="varlet-site-playground-iframe" :src="context.playgroundURL" allow="clipboard-write">
+      <iframe
+        v-if="context.showPlayground"
+        id="playground"
+        class="varlet-site-playground-iframe"
+        :src="context.playgroundURL"
+        allow="clipboard-write"
+      >
       </iframe>
     </div>
   </var-popup>
@@ -143,51 +137,69 @@ watch(
 .hljs {
   background: var(--site-config-color-hl-background) !important;
   padding: 0 !important;
-  transition: all .25s
+  transition: all 0.25s;
 }
 
 .hljs code {
   line-height: 31px;
 }
 
-.hljs-comment, .hljs-meta, .hljs-quote {
-  color: var(--site-config-color-hl-group-a)
+.hljs-comment,
+.hljs-meta,
+.hljs-quote {
+  color: var(--site-config-color-hl-group-a);
 }
 
-.hljs-keyword, .hljs-name, .hljs-selector-tag, .hljs-tag {
-  color: var(--site-config-color-hl-group-b)
+.hljs-keyword,
+.hljs-name,
+.hljs-selector-tag,
+.hljs-tag {
+  color: var(--site-config-color-hl-group-b);
 }
 
-.hljs-attribute, .hljs-selector-id {
-  color: var(--site-config-color-hl-group-c)
+.hljs-attribute,
+.hljs-selector-id {
+  color: var(--site-config-color-hl-group-c);
 }
 
-.hljs-addition, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-string {
-  color: var(--site-config-color-hl-group-d)
+.hljs-addition,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-string {
+  color: var(--site-config-color-hl-group-d);
 }
 
 .hljs-subst {
-  color: var(--site-config-color-hl-group-e)
+  color: var(--site-config-color-hl-group-e);
 }
 
-.hljs-link, .hljs-regexp {
-  color: var(--site-config-color-hl-group-f)
+.hljs-link,
+.hljs-regexp {
+  color: var(--site-config-color-hl-group-f);
 }
 
-.hljs-doctag, .hljs-section, .hljs-title, .hljs-type {
-  color: var(--site-config-color-hl-group-g)
+.hljs-doctag,
+.hljs-section,
+.hljs-title,
+.hljs-type {
+  color: var(--site-config-color-hl-group-g);
 }
 
-.hljs-bullet, .hljs-literal, .hljs-symbol, .hljs-template-variable, .hljs-variable {
-  color: var(--site-config-color-hl-group-h)
+.hljs-bullet,
+.hljs-literal,
+.hljs-symbol,
+.hljs-template-variable,
+.hljs-variable {
+  color: var(--site-config-color-hl-group-h);
 }
 
-.hljs-deletion, .hljs-number {
-  color: var(--site-config-color-hl-group-i)
+.hljs-deletion,
+.hljs-number {
+  color: var(--site-config-color-hl-group-i);
 }
 
 .var-popup__content {
-  background-color: rgba(0, 0, 0, 0)
+  background-color: rgba(0, 0, 0, 0);
 }
 </style>
 
@@ -197,7 +209,7 @@ watch(
   font-family: inherit;
   padding: 0;
   white-space: pre-wrap;
-}
+};
 
 iframe {
   display: block;
@@ -246,12 +258,10 @@ iframe {
 
   &-site {
     min-width: 1200px;
-    padding: 60px 0 0;
 
     &-content {
       display: flex;
       background: var(--site-config-color-body);
-      margin-left: 246px;
       min-height: calc(100vh - 60px);
     }
 
@@ -283,7 +293,6 @@ iframe {
         }
       }
 
-
       a {
         color: var(--site-config-color-link);
         -webkit-font-smoothing: antialiased;
@@ -346,7 +355,8 @@ iframe {
         }
       }
 
-      ul,ol {
+      ul,
+      ol {
         padding: 0 0 0 18px;
       }
 
@@ -439,7 +449,7 @@ iframe {
         background: var(--site-config-color-bar);
         padding: 20px;
         margin-bottom: 30px;
-        box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),  0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+        box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
 
         &:first-child {
           margin-top: 30px;

package/site/pc/components/AppAd.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import config from '@config'
+import { get } from 'lodash-es'
+import { ref } from 'vue'
+
+defineProps({
+  language: {
+    type: String,
+    required: true,
+  },
+})
+
+const ad = ref(get(config, 'pc.ad'))
+const storageKey = `varlet-site-ad-closed-${ad.value?.id}`
+const isClose = ref(localStorage.getItem(storageKey) == 'true')
+
+function handleClose() {
+  localStorage.setItem(`varlet-site-ad-closed-${ad.value?.id}`, 'true')
+  isClose.value = true
+}
+</script>
+
+<template>
+  <a
+    class="varlet-site-ad varlet-site-ad--animation"
+    :href="ad?.link[language]"
+    target="_blank"
+    :class="{ 'varlet-site-ad--close': isClose || !ad }"
+    :style="{ background: ad?.background, color: ad?.textColor }"
+  >
+    <img class="varlet-site-ad__logo" :style="{ height: ad?.logoHeight }" :src="ad.logo" v-if="ad.logo" />
+    <div
+      class="varlet-site-ad__description"
+      :style="{ background: ad?.descriptionBackground, color: ad?.descriptionTextColor }"
+      v-if="ad.description"
+    >
+      <span>{{ ad.description[language] }}</span>
+      <var-icon style="margin-left: 4px" name="chevron-right" :size="24" />
+    </div>
+    <var-button class="varlet-site-ad__close-button" text round @click.prevent="handleClose">
+      <var-icon name="window-close" :size="20" />
+    </var-button>
+  </a>
+</template>
+
+<style lang="less">
+.varlet-site-ad {
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 52px;
+  color: #fff;
+  text-decoration: unset;
+  overflow: hidden;
+
+  @keyframes varlet-site-ad-animation {
+    from {
+      transform: translateX(-100%);
+    }
+
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  &__logo {
+    height: 36px;
+    border-radius: 8px;
+    transition: all 0.2s;
+
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
+
+  &__description {
+    display: flex;
+    align-items: center;
+    height: 32px;
+    border-radius: 100px;
+    padding: 0 18px;
+    margin-left: 12px;
+    font-size: 15px;
+    background: #d0bcff;
+    color: #381e72;
+    transition: all 0.2s;
+    transform-origin: left;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+
+  &__close-button {
+    position: absolute;
+    top: 50%;
+    right: 35px;
+    transform: translateY(-50%);
+  }
+
+  &--close {
+    height: 0;
+  }
+
+  &--animation {
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+      pointer-events: none;
+      animation: varlet-site-ad-animation 8s infinite;
+      background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.2), hsla(0, 0%, 100%, 0));
+      transition: 0.25s background-color;
+    }
+  }
+}
+</style>

package/site/pc/components/AppHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="varlet-site-header">
     <div class="varlet-site-header__lead">
-      <img class="varlet-site-header__logo" :src="config.logo" @click="backRoot"/>
+      <img class="varlet-site-header__logo" :src="config.logo" @click="backRoot" />
       <div class="varlet-site-header__title" v-if="title" @click="backRoot">{{ title }}</div>
     </div>
 
@@ -12,8 +12,8 @@
         @mouseleave="isOpenVersionsMenu = false"
         v-if="isShowVersion"
       >
-        <span style="font-size: 16px;">{{ currentVersion }}</span>
-        <var-icon name="chevron-down"/>
+        <span style="font-size: 16px">{{ currentVersion }}</span>
+        <var-icon name="chevron-down" />
         <transition name="fade">
           <div
             class="varlet-site-header__animation-list varlet-site-header__animation-versions var-elevation--5"
@@ -27,20 +27,27 @@
               :class="{ 'varlet-site-header__animation-list--active': currentVersion === i.label }"
               @click="open(i.link)"
             >
-            {{ i.label }}
+              {{ i.label }}
             </var-cell>
           </div>
         </transition>
       </div>
 
-      <a class="varlet-site-header__link" style="margin-right: 8px;" target="_blank" :href="changelog" v-ripple v-if="changelog">
-        <var-icon name="history" :size="28"/>
+      <a
+        class="varlet-site-header__link"
+        style="margin-right: 8px"
+        target="_blank"
+        :href="changelog"
+        v-ripple
+        v-if="changelog"
+      >
+        <var-icon name="history" :size="28" />
       </a>
       <a class="varlet-site-header__link" target="_blank" :href="playground" v-ripple v-if="playground">
-        <var-icon name="code-json" :size="24"/>
+        <var-icon name="code-json" :size="24" />
       </a>
       <a class="varlet-site-header__link" target="_blank" :href="github" v-ripple v-if="github">
-        <var-icon name="github" :size="28"/>
+        <var-icon name="github" :size="28" />
       </a>
       <div
         class="varlet-site-header__theme"
@@ -49,7 +56,7 @@
         v-if="themes.length > 1"
       >
         <var-icon name="palette" :size="28" />
-        <var-icon name="chevron-down"/>
+        <var-icon name="chevron-down" />
         <transition name="fade">
           <div
             class="varlet-site-header__animation-list var-elevation--5"
@@ -62,7 +69,7 @@
               :key="t.value"
               :class="{ 'varlet-site-header__animation-list--active': currentTheme === t.value }"
               @click="() => toggleTheme(t.value as Theme)"
-            >{{ t[language as keyof typeof t] }}
+              >{{ t[language as keyof typeof t] }}
             </var-cell>
           </div>
         </transition>
@@ -73,8 +80,8 @@
         @mouseleave="isOpenLanguageMenu = false"
         v-if="languages"
       >
-        <var-icon name="translate" :size="26"/>
-        <var-icon name="chevron-down"/>
+        <var-icon name="translate" :size="26" />
+        <var-icon name="chevron-down" />
         <transition name="fade">
           <div
             class="varlet-site-header__animation-list var-elevation--5"
@@ -87,12 +94,11 @@
               :key="key"
               :class="{ 'varlet-site-header__animation-list--active': language === key }"
               @click="handleLanguageChange(key)"
-            >{{ value }}
+              >{{ value }}
             </var-cell>
           </div>
         </transition>
       </div>
-
     </div>
   </div>
 </template>
@@ -111,16 +117,18 @@ export default defineComponent({
   props: {
     language: {
       type: String,
-    }
+    },
   },
   setup() {
     const title: Ref<string> = ref(get(config, 'title'))
     const logo: Ref<string> = ref(get(config, 'logo'))
     const languages: Ref<Record<string, string>> = ref(get(config, 'pc.header.i18n'))
     const currentVersion: Ref<string> = ref(get(config, 'pc.header.currentVersion'))
-    const versions = get(config, 'pc.header.versions') 
+    const versions = get(config, 'pc.header.versions')
     const isShowVersion: Ref<boolean> = ref(!!versions)
-    const versionItems: Ref<Array<Record<string, any>>> = ref((versions ?? []).find((i: any) => window.location.host.includes(i.name))?.items ?? versions?.[0]?.items ?? [])
+    const versionItems: Ref<Array<Record<string, any>>> = ref(
+      (versions ?? []).find((i: any) => window.location.host.includes(i.name))?.items ?? versions?.[0]?.items ?? []
+    )
     const playground: Ref<string> = ref(get(config, 'pc.header.playground'))
     const github: Ref<string> = ref(get(config, 'pc.header.github'))
     const themes: Ref<Record<string, any>> = ref(get(config, 'pc.header.themes'))
@@ -163,7 +171,8 @@ export default defineComponent({
     }
 
     const notifyThemeChange = (target: 'mobile' | 'window') => {
-      const contentWindow = target === 'window' ? window : (document.getElementById(target) as HTMLIFrameElement | undefined)?.contentWindow
+      const contentWindow =
+        target === 'window' ? window : (document.getElementById(target) as HTMLIFrameElement | undefined)?.contentWindow
       if (!contentWindow) {
         return
       }
@@ -218,7 +227,7 @@ export default defineComponent({
 
 <style lang="less">
 .varlet-site-header {
-  position: fixed;
+  position: sticky;
   top: 0;
   left: 0;
   display: flex;

package/site/pc/components/AppMobile.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="varlet-site-mobile varlet-site-mobile--375">
     <div class="varlet-site-mobile-content">
-      <iframe id="mobile" :src="`${getMobileIndex()}#/${componentName}?language=${language}&platform=pc&replace=${replace}${hash ? `#${hash}` : ''}`"></iframe>
+      <iframe
+        id="mobile"
+        :src="`${getMobileIndex()}#/${componentName}?language=${language}&platform=pc&replace=${replace}${
+          hash ? `#${hash}` : ''
+        }`"
+      ></iframe>
     </div>
   </div>
 </template>
@@ -13,23 +18,23 @@ export default {
   name: 'AppMobile',
   props: {
     componentName: {
-      type: String
+      type: String,
     },
     language: {
-      type: String
+      type: String,
     },
     replace: {
-      type: String
+      type: String,
     },
     hash: {
-      type: String
-    }
+      type: String,
+    },
   },
   setup() {
     return {
-      getMobileIndex
+      getMobileIndex,
     }
-  }
+  },
 }
 </script>
 
@@ -43,6 +48,7 @@ export default {
   overflow: hidden;
   box-shadow: 0 0 14px 6px var(--site-config-color-shadow);
   border-radius: 2px;
+  margin-top: 20px;
 
   @media screen and (min-width: 1600px) {
     &--375 {

package/site/pc/components/AppSidebar.vue

@@ -62,11 +62,10 @@ const changeRoute = (item: Menu) => {
 
 .varlet-site-sidebar {
   padding: 0 0 15px;
-  position: fixed;
+  position: sticky;
   width: 246px;
+  height: 100vh;
   top: 60px;
-  bottom: 0;
-  left: 0;
   z-index: 6;
   overflow-y: scroll;
   box-shadow: 0 8px 12px var(--site-config-color-shadow);

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

@@ -1,17 +1,11 @@
 <script setup lang="ts">
 import config from '@config'
 import AppHeader from '../../components/AppHeader.vue'
+import AppAd from '../../components/AppAd.vue'
 import { get } from 'lodash-es'
 import { ref, watch, type Ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import {
-  getPCLocationInfo,
-  watchTheme,
-  onThemeChange,
-  getBrowserTheme,
-  setTheme,
-  type Theme
-} from '@varlet/cli/client'
+import { getPCLocationInfo, watchTheme, onThemeChange, getBrowserTheme, setTheme, type Theme } from '@varlet/cli/client'
 
 const route = useRoute()
 const router = useRouter()
@@ -59,20 +53,25 @@ watchTheme((theme, from) => {
 
 onThemeChange()
 
-watch(() => route.path, () => {
-  language.value = getPCLocationInfo().language
-  setLocale()
-}, { immediate: true })
+watch(
+  () => route.path,
+  () => {
+    language.value = getPCLocationInfo().language
+    setLocale()
+  },
+  { immediate: true }
+)
 </script>
 
 <template>
-  <app-header :language="language" />
   <div class="varlet-doc-index">
+    <app-ad :language="language" />
+    <app-header :language="language" />
     <div class="varlet-doc-index__layout">
       <div class="varlet-doc-index__main-container">
         <div class="varlet-doc-index__logo-container">
           <div class="varlet-doc-index__logo-background-mask"></div>
-          <img class="varlet-doc-index__logo" :src="config.logo" alt="">
+          <img class="varlet-doc-index__logo" :src="config.logo" alt="" />
         </div>
         <div class="varlet-doc-index__info-container">
           <div class="varlet-doc-index__title">{{ title }}</div>
@@ -80,7 +79,7 @@ watch(() => route.path, () => {
 
           <var-space size="large">
             <var-button class="varlet-doc-index__link-button" type="primary" style="line-height: 1.2" @click="getStar">
-            {{ indexPage.started[language] }}
+              {{ indexPage.started[language] }}
             </var-button>
             <var-button class="varlet-doc-index__github-button" style="line-height: 1.2" @click="toGithub">
               {{ indexPage.viewOnGithub[language] }}
@@ -88,7 +87,7 @@ watch(() => route.path, () => {
           </var-space>
         </div>
       </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>
@@ -101,13 +100,25 @@ watch(() => route.path, () => {
 
         <div class="varlet-doc-index__team-members-container">
           <div class="varlet-doc-index__team-member" v-for="member in indexPage.teamMembers.members">
-            <img class="varlet-doc-index__team-member-avatar" :src="member.avatar">
+            <img class="varlet-doc-index__team-member-avatar" :src="member.avatar" />
             <div class="varlet-doc-index__team-member-name">{{ member.name[language] }}</div>
             <div class="varlet-doc-index__team-member-title">{{ member.title[language] }}</div>
             <div class="varlet-doc-index__team-member-description">{{ member.description[language] }}</div>
             <div class="varlet-doc-index__team-member-social">
-              <var-icon class="varlet-doc-index__team-member-social-icon" name="github" :size="24" @click="to(member.github)" v-if="member.github" />
-              <var-icon class="varlet-doc-index__team-member-social-icon" name="twitter" :size="24" @click="to(member.twitter)" v-if="member.twitter" />
+              <var-icon
+                class="varlet-doc-index__team-member-social-icon"
+                name="github"
+                :size="24"
+                @click="to(member.github)"
+                v-if="member.github"
+              />
+              <var-icon
+                class="varlet-doc-index__team-member-social-icon"
+                name="twitter"
+                :size="24"
+                @click="to(member.twitter)"
+                v-if="member.twitter"
+              />
             </div>
           </div>
         </div>
@@ -117,7 +128,7 @@ watch(() => route.path, () => {
         <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">
+          <img class="varlet-doc-index__contributors-image" :src="indexPage.contributors.image" />
         </a>
       </div>
 
@@ -125,7 +136,7 @@ watch(() => route.path, () => {
         <div class="varlet-doc-index__sponsors-title">{{ indexPage.sponsors.label[language] }}</div>
 
         <a class="varlet-doc-index__sponsors-link" :href="indexPage.sponsors.link">
-          <img class="varlet-doc-index__sponsors-image" :src="indexPage.sponsors.image">
+          <img class="varlet-doc-index__sponsors-image" :src="indexPage.sponsors.image" />
         </a>
       </div>
 
@@ -173,7 +184,7 @@ watch(() => route.path, () => {
   box-sizing: border-box;
   background: var(--site-config-color-index-page-background);
   padding-bottom: 100px;
-  min-width: 1050px;
+  min-width: 1200px;
 
   &__layout {
     display: flex;
@@ -181,7 +192,7 @@ watch(() => route.path, () => {
     align-items: center;
     padding: 170px 0;
     max-width: 1200px;
-    transition: all .2s;
+    transition: all 0.2s;
   }
 
   &__main-container {
@@ -215,7 +226,7 @@ watch(() => route.path, () => {
     bottom: -40px;
     right: -40px;
     background: var(--site-config-color-index-page-logo-mask-background);
-    transition: background-color .2s;
+    transition: background-color 0.2s;
     filter: blur(45px);
     border-radius: 50%;
     animation: logo-wave 6s infinite linear;
@@ -240,7 +251,7 @@ watch(() => route.path, () => {
     width: 170px !important;
     height: 48px !important;
     font-size: 19px !important;
-    transition: all .2s !important;
+    transition: all 0.2s !important;
     margin-top: 38px !important;
   }
 
@@ -248,7 +259,7 @@ watch(() => route.path, () => {
     width: 170px !important;
     height: 48px !important;
     font-size: 19px !important;
-    transition: all .2s !important;
+    transition: all 0.2s !important;
     margin-top: 38px !important;
   }
 
@@ -275,7 +286,8 @@ watch(() => route.path, () => {
     line-height: 1.7;
   }
 
-  &__contributors, &__team-members {
+  &__contributors,
+  &__team-members {
     width: 100%;
     display: flex;
     flex-direction: column;
@@ -283,14 +295,15 @@ watch(() => route.path, () => {
     margin-top: 90px;
   }
 
-  &__contributors-title, &__team-members-title {
+  &__contributors-title,
+  &__team-members-title {
     padding-top: 24px;
     line-height: 32px;
     font-size: 24px;
     border-top: 2px solid var(--site-config-color-index-page-divider-color);
     color: var(--site-config-color-index-page-second-text-color);
     letter-spacing: 1px;
-    transition: all .2s;
+    transition: all 0.2s;
   }
 
   &__team-members-container {
@@ -311,7 +324,6 @@ watch(() => route.path, () => {
     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);
 
-
     &-avatar {
       width: 80px;
       height: 80px;
@@ -324,7 +336,8 @@ watch(() => route.path, () => {
       margin-top: 20px;
     }
 
-    &-title, &-description {
+    &-title,
+    &-description {
       color: var(--site-config-color-index-page-second-text-color);
       font-size: 14px;
       margin-top: 10px;
@@ -338,7 +351,7 @@ watch(() => route.path, () => {
       &-icon {
         margin: 10px 6px 0;
         transition: all 0.25s !important;
-        
+
         &:hover {
           opacity: 0.7;
           transform: scale(1.25);
@@ -373,7 +386,7 @@ watch(() => route.path, () => {
     border-top: 2px solid var(--site-config-color-index-page-divider-color);
     color: var(--site-config-color-index-page-second-text-color);
     letter-spacing: 1px;
-    transition: all .2s;
+    transition: all 0.2s;
   }
 
   &__sponsors-link {
@@ -400,7 +413,7 @@ watch(() => route.path, () => {
     color: var(--site-config-color-index-page-second-text-color);
     font-size: 14px;
     line-height: 26px;
-    transition: all .2s;
+    transition: all 0.2s;
   }
 }
 </style>