@varlet/cli 1.27.17 → 1.27.20-alpha.1660211980346

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",
@@ -95,5 +101,5 @@
     "Chrome >= 51",
     "iOS >= 10"
   ],
-  "packageManager": "pnpm@6.24.3"
+  "packageManager": "pnpm@7.9.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",
@@ -95,5 +101,5 @@
     "Chrome >= 51",
     "iOS >= 10"
   ],
-  "packageManager": "pnpm@6.24.3"
+  "packageManager": "pnpm@7.9.0"
 }

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/commands/release.js

@@ -228,17 +228,18 @@ function release(cmd) {
                         return [2 /*return*/];
                     }
                     updateVersion(expectVersion);
-                    if (!!isPreRelease) return [3 /*break*/, 7];
-                    return [4 /*yield*/, (0, changelog_1.changelog)()];
+                    return [4 /*yield*/, publish(isPreRelease)];
                 case 5:
                     _b.sent();
-                    return [4 /*yield*/, pushGit(expectVersion, cmd.remote)];
+                    if (!!isPreRelease) return [3 /*break*/, 8];
+                    return [4 /*yield*/, (0, changelog_1.changelog)()];
                 case 6:
                     _b.sent();
-                    _b.label = 7;
-                case 7: return [4 /*yield*/, publish(isPreRelease)];
-                case 8:
+                    return [4 /*yield*/, pushGit(expectVersion, cmd.remote)];
+                case 7:
                     _b.sent();
+                    _b.label = 8;
+                case 8:
                     logger_1.default.success("Release version ".concat(expectVersion, " successfully!"));
                     if (!isPreRelease) return [3 /*break*/, 13];
                     _b.label = 9;

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,
-            brotliSize: false,
+            reportCompressedSize: false,
             emptyOutDir: true,
             cssTarget: 'chrome61',
             rollupOptions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "1.27.17",
+  "version": "1.27.20-alpha.1660211980346",
   "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.17",
-    "@varlet/shared": "1.27.17",
-    "@varlet/markdown-vite-plugin": "1.27.17",
-    "@varlet/touch-emulator": "1.27.17",
+    "@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",
     "@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": "2.2.0",
-    "@vitejs/plugin-vue-jsx": "1.3.5",
+    "@vitejs/plugin-vue": "3.0.1",
+    "@vitejs/plugin-vue-jsx": "2.0.0",
     "@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": "2.9.5",
+    "vite": "3.0.4",
     "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.17",
+    "@varlet/touch-emulator": "1.27.20-alpha.1660211980346",
     "@vue/test-utils": "^2.0.0-rc.6",
     "clipboard": "^2.0.6",
     "live-server": "^1.2.1",
@@ -88,6 +88,5 @@
   "scripts": {
     "dev": "tsc --watch",
     "build": "tsc"
-  },
-  "readme": "# @varlet/cli\n\n开箱即用的 `Vue3组件库` 快速成型工具，提供了一系列命令和工具去解决组件库开发上的问题\n\n### 特性\n\n- 1.开箱即用的组件库开发环境\n- 2.开箱即用的组件库编译工具，支持导出 `esm` 和 `umd` 两种模块代码\n- 3.基于配置文件的组件库文档站点,支持百度统计和主题定制\n- 4.支持 `单文件组件(sfc)` 和 `tsx,jsx` 两种风格的组件库编写风格\n- 5.开箱即用的代码检查工具\n- 6.开箱即用的单元测试工具\n- 7.开箱即用的代码发布工具,发布到 npm 和 github, 并自动生成更新日志\n- 8.支持 `Typescript`\n- 9.支持 `暗黑模式`\n- 10.基于 `pnpm`\n\n### 快速开始\n\n`@varlet/cli` 内置了 `单文件组件(sfc)` 和 `tsx, jsx` 两种风格的组件库项目模板，可以通过 `gen` 命令直接生成。\n帮助用户直接进入组件本身的开发，推荐使用 `pnpm` 作为包管理工具。\n\n```shell\n# 安装命令行工具\npnpm add @varlet/cli -g\n# 使用 gen 命令生成项目\nvarlet-cli gen 项目名\ncd 项目名\npnpm install\npnpm dev\n```\n\n然后通过简单修改一些组件库模板的基础信息，就可以开始组件库的开发了\n\n## 高级定制\n\n### 配置文件\n\n项目根目录下的 `varlet.config.js` 用来管理整个组件库项目的具体细节\n\n| 参数 | 说明 | 类型 | 默认值 |\n| ----- | -------------- | -------- | ---------- |\n| `host` | 开发服务器主机 | _number_ | `localhost` |\n| `port` | 开发服务器端口 | _number_ | `8080` |\n| `name` | 组件库全名\t| _string_ | `Varlet` |\n| `namespace` | 组件库命名空间, 会作为组件前缀 | _string_ | `var` |\n| `title` | 文档中组件库的标题 | _string_ | `VARLET` |\n| `logo` | 文档中组件库的logo | _string_ | `-` |\n| `defaultLanguage` | 文档默认语言 | _string_ | `zh-CN` |\n| `useMobile` | 是否显示右侧手机预览 | _boolean_ | `false` |\n| `themes` | 文档主题 | _SiteThemes_ | `-` |\n| `darkThemes` | 暗黑模式文档主题 | _SiteThemes_ | `-` |\n| `highlight` | 文档代码片段样式相关 | _SiteHighlight_ | `-` |\n| `analysis` | 文档统计相关 | _SiteAnalysis_ | `-` |\n| `pc` | pc端文档结构配置 | _SitePC_ | `-` |\n| `mobile` | mobile端文档结构配置 | _SiteMobile_ | `-` |\n| `moduleCompatible` | 模块兼容配置 | _Record<string, string>_ | `-` |\n\n#### 模块适配对象\n\n一些外部依赖可能需要进行模块语法的适配，以达到可以正确编译到 `commonjs` 和 `esmodule` 的目的，例如 `dayjs` 的 `esmodule` 写法是\n\n```js\nimport dayjs from 'dayjs/esm'\n```\n\n而为了构建 `commonjs` 时的写法是\n\n```js\nimport * as dayjs from 'dayjs'\n```\n\n在项目中我们拥抱 `esmodule` 模块使用第一种写法，并做如下配置进行适配\n\n```js\n// varlet.config.js\nmodule.exports = {\n  moduleCompatible: {\n    \"import dayjs from 'dayjs/esm'\\n\": \"import * as dayjs from 'dayjs'\\n\"\n  }\n}\n```\n\n#### SiteThemes\n\n主题变量相关，由于默认的主题变量可能时常修改，以 `varlet` 官方文档的主题为准\n\n| 参数 |\n| ----- |\n| `color-body` |\n| `color-bar` |\n| `color-sub-bar` |\n| `color-text` |\n| `color-sub-text` |\n| `color-border` |\n| `color-shadow` |\n| `color-introduce-border` |\n| `color-primary` |\n| `color-link` |\n| `color-type` |\n| `color-progress` |\n| `color-progress-track` |\n| `color-side-bar` |\n| `color-side-bar-active-background` |\n| `color-app-bar` |\n| `color-nav-button-hover-background` |\n| `color-mobile-cell-hover` |\n| `color-pc-language-active` |\n| `color-pc-language-active-background` |\n| `color-mobile-language-active` |\n| `color-mobile-language-active-background` |\n| `color-hl-background` |\n| `color-hl-code` |\n| `color-hl-border` |\n| `color-hl-group-a` |\n| `color-hl-group-b` |\n| `color-hl-group-c` |\n| `color-hl-group-d` |\n| `color-hl-group-e` |\n| `color-hl-group-f` |\n| `color-hl-group-g` |\n| `color-hl-group-h` |\n| `color-hl-group-i` |\n\n#### SiteHighlight\n\n代码片段高亮，基于[highlight.js](https://highlightjs.org/)\n\n| 参数 | 说明 | 类型 | 默认值 |\n| ----- | -------------- | -------- | ---------- |\n| `style` | highlight的css地址 | _string_ | `-` |\n\n#### SiteAnalysis\n\n统计埋点相关\n\n| 参数 | 说明 | 类型 | 默认值 |\n| ----- | -------------- | -------- | ---------- |\n| `baidu` | 百度统计脚本地址 | _string_ | `-` |\n\n#### SitePC, SiteMobile\n\n文档结构部分相关，示例配置如下\n\n```js\nmodule.exports = {\n  pc: {\n    redirect: '/home',\n    title: {\n      'zh-CN': '一个组件库',\n    },\n    header: {\n      darkMode: null,\n      i18n: null,\n      github: 'https://github.com/varletjs/varlet',\n    },\n    menu: [\n      {\n        text: {\n          'zh-CN': '开发指南',\n        },\n        // 侧边栏菜单目录\n        type: 1,\n      },\n      {\n        text: {\n          'zh-CN': '基本介绍',\n        },\n        doc: 'home',\n        // 索引项目根目录下的md文档\n        type: 3,\n      },\n      {\n        text: {\n          'zh-CN': '基础组件',\n        },\n        type: 1,\n      },\n      {\n        text: {\n          'zh-CN': 'Button 按钮',\n        },\n        doc: 'button',\n        // 索引组件根目录下的md文档\n        type: 2,\n      },\n    ],\n  },\n  mobile: {\n    redirect: '/home',\n    title: {\n      'zh-CN': '一个组件库',\n    },\n    header: {\n      darkMode: null,\n      i18n: null,\n      playground: null,\n      github: 'https://github.com/varletjs/varlet',\n    },\n  },\n}\n```\n\n### 命令相关\n\n#### 启动开发服务器\n\n```shell\nvarlet-cli dev\n```\n\n#### 构建文档站点\n\n```shell\nvarlet-cli build\n```\n\n#### 预览文档站点\n\n```shell\nvarlet-cli preview\n```\n\n#### 构建组件库代码\n\n```shell\nvarlet-cli compile\n```\n\n#### 执行所有的单元测试\n\n```shell\nvarlet-cli test\n```\n\n#### 以 watch 模式执行单元测试\n\n```shell\nvarlet-cli test -w\nor\nvarlet-cli test -wa\n```\n\n#### 检查代码\n\n```shell\nvarlet-cli lint\n```\n\n#### 校验提交信息\n\n```shell\nvarlet-cli commit-lint\n```\n\n#### 生成更新日志\n\n```shell\nvarlet-cli changelog\n```\n\n#### 发布组件库\n\n```shell\nvarlet-cli release\n```\n\n#### 生成一个项目模板\n```shell\nvarlet-cli gen <projectName>\n```\n\n### babel\n\n对 `babel` 进行配置，首先在 `package.json` 中指定目标浏览器\n\n```json\n{\n  \"browserslist\": [\n    \"Chrome >= 51\",\n    \"iOS >= 10\"\n  ]\n}\n```\n\n创建 `babel.config,js`\n\n```js\n// babel.config.js\nmodule.exports = {\n  presets: [\n    [\n      '@varlet/cli/preset',\n      {\n        loose: process.env.NODE_ENV === 'compile',\n      },\n    ],\n  ],\n}\n```\n\n### git 和 npm\n\n#### git-hook\n\n`simple-git-hooks`，`lint-staged` 配合 `eslint`，`stylelint`，`varlet-cli commit-lint` 做commit前的检查，`package.json` 配置如下\n\n```json\n{\n  \"simple-git-hooks\": {\n    \"pre-commit\": \"pnpm exec lint-staged --allow-empty --concurrent false\",\n    \"commit-msg\": \"npx --no-install varlet-cli commit-lint $1\"\n  },\n  \"lint-staged\": {\n    \"*.{ts,tsx,js,vue,less}\": \"prettier --write\",\n    \"*.{ts,tsx,js,vue}\": \"eslint --fix\",\n    \"*.{vue,css,less}\": \"stylelint --fix\"\n  },\n  \"eslintConfig\": {\n    \"root\": true,\n    \"ignorePatterns\": [\n      \"es/**\",\n      \"umd/**\",\n      \"site/**\",\n      \"public/**\",\n      \"src/*/__tests__/**\",\n      \".varlet/**\"\n    ],\n    \"extends\": [\n      \"@varlet\"\n    ]\n  },\n  \"stylelint\": {\n    \"extends\": [\n      \"@varlet/stylelint-config\"\n    ],\n    \"ignoreFiles\": [\n      \"es/**\",\n      \"umd/**\",\n      \"site/**\",\n      \"coverage/**\",\n      \"public/**\",\n      \"highlight/**\"\n    ]\n  }\n}\n```\n\n挂载钩子\n\n```shell\nnpx simple-git-hooks\n```\n\n创建 `.prettierignore`\n\n```text\n// .prettierignore\ncoverage/**\nes/**\numd/**\nsite/**\npublic/**\nsrc/*/__tests__/**\n*.md\n```\n\n### typescript\n\n创建 `tsconfig.json`\n\n```json\n{\n  \"compilerOptions\": {\n    \"strict\": true,\n    \"downlevelIteration\": true,\n    \"declaration\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"allowJs\": true,\n    \"lib\": [\"esnext\", \"dom\"],\n    \"allowSyntheticDefaultImports\": true,\n    \"jsx\": \"preserve\"\n  }\n}\n```\n\n#### 发布前注意\n\n1. `npm` 的仓库源必须指向 `npm` 官方镜像\n2. 执行 `npm login` 进行登录\n\n### Contributors\n\n<a href=\"https://github.com/varletjs/varlet/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=haoziqaq/varlet\" />\n</a>"
+  }
 }

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

@@ -1,194 +1,124 @@
-.home-page {
-  position: relative;
-  width: 100vw;
-  height: 100vh;
-  box-sizing: border-box;
-  min-width: 1200px;
-  background: var(--site-config-color-home-page-background);
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-}
-
-@keyframes fade-in {
+@keyframes logo-wave {
   0% {
-    opacity: 0;
-    transform: translateX(-100%);
+    transform: translate(8%, 8%);
   }
 
-
-  to {
-    opacity: 1;
-    transform: translateX(0%);
+  20% {
+    transform: translate(-8%, 8%);
   }
-}
 
-@keyframes slash-1 {
-  from {
-    transform: rotate(90deg);
-    ;
+  40% {
+    transform: translate(-8%, -8%);
   }
 
-  to {
-    transform: rotate(10deg);
+  60% {
+    transform: translate(-2%, 8%);
   }
-}
 
-@keyframes slash-2 {
-  from {
-    transform: rotate(90deg);
-    ;
+  80% {
+    transform: translate(8%, -8%);
   }
 
-  to {
-    transform: rotate(20deg);
+  100% {
+    transform: translate(8%, 8%);
   }
 }
 
-@keyframes slash-3 {
-  from {
-    transform: rotate(90deg);
-    ;
+.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;
   }
 
-  to {
-    transform: rotate(30deg);
+  &__logo {
+    width: 100%;
+    height: 100%;
+    flex-shrink: 0;
+    z-index: 2;
   }
-}
 
-@keyframes slash-4 {
-  from {
-    transform: rotate(90deg);
-    ;
+  &__logo-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    width: 160px;
+    height: 160px;
   }
 
-  to {
-    transform: rotate(40deg);
+  &__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;
   }
-}
 
-@keyframes slash-5 {
-  from {
-    transform: rotate(90deg);
-    ;
+  &__title {
+    font-size: 54px;
+    margin-top: 60px;
   }
 
-  to {
-    transform: rotate(50deg);
+  &__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);
   }
-}
 
-.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);
-}
-
-.box-1 {
-  animation: slash-1 .75s forwards;
-}
-
-.box-2 {
-  animation: slash-2 .75s forwards;
-}
+  &__link-button-group {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 30px;
+  }
 
-.box-3 {
-  animation: slash-3 .75s forwards;
-}
+  &__link-button {
+    height: 44px;
+    font-size: 18px;
+    transition: all .25s;
+    margin: 0 10px;
+  }
 
-.box-4 {
-  animation: slash-4 .75s forwards;
-}
+  &__link-button-text {
+    margin-right: 4px;
+  }
 
-.box-5 {
-  animation: slash-5 .75s forwards;
-}
+  &__features {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-top: 60px;
+  }
 
-.profile-container {
-  height: 100vh;
-  padding-left: 10vw;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  &__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);
+  }
 
-  .container-box {
-    width: 35vw;
-    min-width: 500px;
-
-    .description-container {
-      display: flex;
-      margin-bottom: 35px;
-    }
-
-    .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;
-    }
-
-    .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 {
-      width: 90px;
-      height: 90px;
-      flex-shrink: 0;
-      margin-right: 25px;
-      z-index: 2;
-    }
+  &__feature-description {
+    color: var(--site-config-color-index-page-second-text-color);
+    font-size: 14px;
+    margin-top: 10px;
   }
 }

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

@@ -4,20 +4,14 @@ 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 { 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, ComputedRef } from 'vue'
+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')
@@ -26,19 +20,7 @@ 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 indexPage: Ref<Record<string, any>> = get(config, 'pc.indexPage')
 
 const goGithub = () => {
   window.open(github)
@@ -59,7 +41,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 = () => {
@@ -67,7 +49,6 @@ const setLocale = () => {
   if (!lang) return
 
   language.value = lang
-  pack.value = packs[lang]
   document.title = get(config, 'pc.title')[lang] as string
 }
 
@@ -93,47 +74,41 @@ 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="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="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 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>
       </div>
     </div>

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

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

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

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

package/varlet.default.config.js

@@ -20,6 +20,81 @@ 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',
@@ -60,11 +135,10 @@ module.exports = {
   },
   themes: {
     'color-body': '#fff',
-    '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-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-bar': '#fff',
     'color-sub-bar': '#f5f5f5',
     'color-text': '#555',
@@ -102,11 +176,10 @@ module.exports = {
   },
   darkThemes: {
     'color-body': '#121212',
-    '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-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-bar': '#1e1e1e',
     'color-sub-bar': '#272727',
     'color-text': '#fff',