@varlet/cli 1.27.7 → 1.27.9-alpha.1653036733481

package/generators/base/varlet.config.js

@@ -61,6 +61,8 @@ module.exports = {
       'zh-CN': '一个组件库',
     },
     header: {
+      darkMode: null,
+      versions: null,
       i18n: null,
       playground: null,
       github: 'https://github.com/varletjs/varlet',

package/lib/commands/create.js

@@ -64,7 +64,7 @@ function create(name) {
                     componentDir = (0, path_1.resolve)(constant_1.SRC_DIR, name);
                     testsDir = (0, path_1.resolve)(constant_1.SRC_DIR, name, constant_1.TESTS_DIR_NAME);
                     exampleDir = (0, path_1.resolve)(constant_1.SRC_DIR, name, constant_1.EXAMPLE_DIR_NAME);
-                    exampleLocalDir = (0, path_1.resolve)(constant_1.SRC_DIR, name, constant_1.EXAMPLE_DIR_NAME, constant_1.EXAMPLE_LOCALE_DIR_NAME);
+                    exampleLocalDir = (0, path_1.resolve)(constant_1.SRC_DIR, name, constant_1.EXAMPLE_DIR_NAME, constant_1.LOCALE_DIR_NAME);
                     docsDir = (0, path_1.resolve)(constant_1.SRC_DIR, name, constant_1.DOCS_DIR_NAME);
                     if ((0, fs_extra_1.pathExistsSync)(componentDir)) {
                         logger_1.default.error('component directory is existed');

package/lib/compiler/compileSiteEntry.d.ts

@@ -1,9 +1,12 @@
 export declare function getExampleRoutePath(examplePath: string): string;
 export declare function getComponentDocRoutePath(componentDocsPath: string): string;
 export declare function getRootDocRoutePath(rootDocsPath: string): string;
+export declare function getRootRoutePath(rootLocalePath: string): string;
+export declare function getRootFilePath(rootLocalePath: string): string;
 export declare function findExamples(): Promise<string[]>;
 export declare function findComponentDocs(): Promise<string[]>;
 export declare function findRootDocs(): Promise<string[]>;
+export declare function findRootLocales(): Promise<string[]>;
 export declare function buildMobileSiteRoutes(): Promise<void>;
 export declare function buildPcSiteRoutes(): Promise<void>;
 export declare function buildSiteSource(): Promise<void>;

package/lib/compiler/compileSiteEntry.js

@@ -60,15 +60,21 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildSiteEntry = exports.buildSiteSource = exports.buildPcSiteRoutes = exports.buildMobileSiteRoutes = exports.findRootDocs = exports.findComponentDocs = exports.findExamples = exports.getRootDocRoutePath = exports.getComponentDocRoutePath = exports.getExampleRoutePath = void 0;
+exports.buildSiteEntry = exports.buildSiteSource = exports.buildPcSiteRoutes = exports.buildMobileSiteRoutes = exports.findRootLocales = exports.findRootDocs = exports.findComponentDocs = exports.findExamples = exports.getRootFilePath = exports.getRootRoutePath = exports.getRootDocRoutePath = exports.getComponentDocRoutePath = exports.getExampleRoutePath = void 0;
 var constant_1 = require("../shared/constant");
 var fs_extra_1 = require("fs-extra");
+var slash_1 = __importDefault(require("slash"));
 var fsUtils_1 = require("../shared/fsUtils");
 var varlet_config_1 = require("../config/varlet.config");
+var lodash_1 = require("lodash");
 var EXAMPLE_COMPONENT_NAME_RE = /\/([-\w]+)\/example\/index.vue/;
 var COMPONENT_DOCS_RE = /\/([-\w]+)\/docs\/([-\w]+)\.md/;
 var ROOT_DOCS_RE = /\/docs\/([-\w]+)\.([-\w]+)\.md/;
+var ROOT_LOCALE_RE = /\/pages\/([-\w]+)\/locale\/([-\w]+)\.ts/;
 function getExampleRoutePath(examplePath) {
     var _a;
     return '/' + ((_a = examplePath.match(EXAMPLE_COMPONENT_NAME_RE)) === null || _a === void 0 ? void 0 : _a[1]);
@@ -86,8 +92,18 @@ function getRootDocRoutePath(rootDocsPath) {
     return "/".concat(language, "/").concat(routePath);
 }
 exports.getRootDocRoutePath = getRootDocRoutePath;
+function getRootRoutePath(rootLocalePath) {
+    var _a;
+    var _b = __read((_a = rootLocalePath.match(ROOT_LOCALE_RE)) !== null && _a !== void 0 ? _a : [], 3), routePath = _b[1], language = _b[2];
+    return "/".concat(language, "/").concat(routePath);
+}
+exports.getRootRoutePath = getRootRoutePath;
+function getRootFilePath(rootLocalePath) {
+    return rootLocalePath.replace(/locale\/.+/, constant_1.DIR_INDEX);
+}
+exports.getRootFilePath = getRootFilePath;
 function findExamples() {
-    return (0, fsUtils_1.glob)("".concat(constant_1.SRC_DIR, "/**/").concat(constant_1.EXAMPLE_DIR_NAME, "/").concat(constant_1.EXAMPLE_DIR_INDEX));
+    return (0, fsUtils_1.glob)("".concat(constant_1.SRC_DIR, "/**/").concat(constant_1.EXAMPLE_DIR_NAME, "/").concat(constant_1.DIR_INDEX));
 }
 exports.findExamples = findExamples;
 function findComponentDocs() {
@@ -98,6 +114,61 @@ function findRootDocs() {
     return (0, fsUtils_1.glob)("".concat(constant_1.ROOT_DOCS_DIR, "/*.md"));
 }
 exports.findRootDocs = findRootDocs;
+function findRootLocales() {
+    return __awaiter(this, void 0, void 0, function () {
+        var defaultLanguage, userPages, baseLocales, userLocales, filterMap;
+        var _this = this;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    defaultLanguage = (0, lodash_1.get)((0, varlet_config_1.getVarletConfig)(), 'defaultLanguage');
+                    return [4 /*yield*/, (0, fsUtils_1.glob)("".concat(constant_1.ROOT_PAGES_DIR, "/*"))];
+                case 1:
+                    userPages = _a.sent();
+                    return [4 /*yield*/, (0, fsUtils_1.glob)("".concat(constant_1.SITE, "/pc/pages/**/").concat(constant_1.LOCALE_DIR_NAME, "/*.ts"))];
+                case 2:
+                    baseLocales = _a.sent();
+                    return [4 /*yield*/, userPages.reduce(function (userLocales, page) { return __awaiter(_this, void 0, void 0, function () {
+                            var locales;
+                            var _a;
+                            return __generator(this, function (_b) {
+                                switch (_b.label) {
+                                    case 0:
+                                        if (!(0, fsUtils_1.isDir)(page)) return [3 /*break*/, 3];
+                                        return [4 /*yield*/, (0, fsUtils_1.glob)("".concat(page, "/").concat(constant_1.LOCALE_DIR_NAME, "/*.ts"))];
+                                    case 1:
+                                        locales = _b.sent();
+                                        if (!locales.length)
+                                            locales.push("".concat(page, "/").concat(constant_1.LOCALE_DIR_NAME, "/").concat(defaultLanguage, ".ts"));
+                                        return [4 /*yield*/, userLocales];
+                                    case 2:
+                                        (_a = (_b.sent())).push.apply(_a, __spreadArray([], __read(locales), false));
+                                        _b.label = 3;
+                                    case 3: return [2 /*return*/, userLocales];
+                                }
+                            });
+                        }); }, Promise.resolve([]))
+                        // filter
+                    ];
+                case 3:
+                    userLocales = _a.sent();
+                    filterMap = new Map();
+                    baseLocales.forEach(function (locale) {
+                        var _a;
+                        var _b = __read((_a = locale.match(ROOT_LOCALE_RE)) !== null && _a !== void 0 ? _a : [], 3), routePath = _b[1], language = _b[2];
+                        filterMap.set(routePath + language, (0, slash_1.default)("".concat(constant_1.SITE_PC_DIR, "/pages/").concat(routePath, "/locale/").concat(language, ".ts")));
+                    });
+                    userLocales.forEach(function (locale) {
+                        var _a;
+                        var _b = __read((_a = locale.match(ROOT_LOCALE_RE)) !== null && _a !== void 0 ? _a : [], 3), routePath = _b[1], language = _b[2];
+                        filterMap.set(routePath + language, locale);
+                    });
+                    return [2 /*return*/, Promise.resolve(Array.from(filterMap.values()))];
+            }
+        });
+    });
+}
+exports.findRootLocales = findRootLocales;
 function buildMobileSiteRoutes() {
     return __awaiter(this, void 0, void 0, function () {
         var examples, routes, source;
@@ -107,7 +178,7 @@ function buildMobileSiteRoutes() {
                 case 1:
                     examples = _a.sent();
                     routes = examples.map(function (example) { return "\n  {\n    path: '".concat(getExampleRoutePath(example), "',\n    // @ts-ignore\n    component: () => import('").concat(example, "')\n  }"); });
-                    source = "export default [  ".concat(routes.join(','), "\n]");
+                    source = "export default [    ".concat(routes.join(','), "\n]");
                     return [4 /*yield*/, (0, fsUtils_1.outputFileSyncOnChange)(constant_1.SITE_MOBILE_ROUTES, source)];
                 case 2:
                     _a.sent();
@@ -119,15 +190,21 @@ function buildMobileSiteRoutes() {
 exports.buildMobileSiteRoutes = buildMobileSiteRoutes;
 function buildPcSiteRoutes() {
     return __awaiter(this, void 0, void 0, function () {
-        var _a, componentDocs, rootDocs, componentDocsRoutes, rootDocsRoutes, source;
+        var _a, componentDocs, rootDocs, rootLocales, rootPagesRoutes, componentDocsRoutes, rootDocsRoutes, layoutRoutes, source;
         return __generator(this, function (_b) {
             switch (_b.label) {
-                case 0: return [4 /*yield*/, Promise.all([findComponentDocs(), findRootDocs()])];
+                case 0: return [4 /*yield*/, Promise.all([
+                        findComponentDocs(),
+                        findRootDocs(),
+                        findRootLocales(),
+                    ])];
                 case 1:
-                    _a = __read.apply(void 0, [_b.sent(), 2]), componentDocs = _a[0], rootDocs = _a[1];
-                    componentDocsRoutes = componentDocs.map(function (componentDoc) { return "\n  {\n    path: '".concat(getComponentDocRoutePath(componentDoc), "',\n    // @ts-ignore\n    component: () => import('").concat(componentDoc, "')\n  }"); });
-                    rootDocsRoutes = rootDocs.map(function (rootDoc) { return "\n  {\n    path: '".concat(getRootDocRoutePath(rootDoc), "',\n    // @ts-ignore\n    component: () => import('").concat(rootDoc, "')\n  }"); });
-                    source = "export default [  ".concat(__spreadArray(__spreadArray([], __read(componentDocsRoutes), false), [rootDocsRoutes], false).join(','), "\n]");
+                    _a = __read.apply(void 0, [_b.sent(), 3]), componentDocs = _a[0], rootDocs = _a[1], rootLocales = _a[2];
+                    rootPagesRoutes = rootLocales.map(function (rootLocale) { return "\n  {\n    path: '".concat(getRootRoutePath(rootLocale), "',\n    // @ts-ignore\n    component: () => import('").concat(getRootFilePath(rootLocale), "')\n  }"); });
+                    componentDocsRoutes = componentDocs.map(function (componentDoc) { return "\n      {\n        path: '".concat(getComponentDocRoutePath(componentDoc), "',\n        // @ts-ignore\n        component: () => import('").concat(componentDoc, "')\n      }"); });
+                    rootDocsRoutes = rootDocs.map(function (rootDoc) { return "\n      {\n        path: '".concat(getRootDocRoutePath(rootDoc), "',\n        // @ts-ignore\n        component: () => import('").concat(rootDoc, "')\n      }"); });
+                    layoutRoutes = "{\n    path: '/layout',\n    // @ts-ignore\n    component:()=> import('".concat((0, slash_1.default)(constant_1.SITE_PC_DIR), "/Layout.vue'),\n    children: [\n      ").concat(__spreadArray(__spreadArray([], __read(componentDocsRoutes), false), [rootDocsRoutes], false).join(','), ",\n    ]\n  }");
+                    source = "export default [  ".concat(rootPagesRoutes.join(','), ",\n  ").concat(layoutRoutes, "\n]");
                     (0, fsUtils_1.outputFileSyncOnChange)(constant_1.SITE_PC_ROUTES, source);
                     return [2 /*return*/];
             }

package/lib/shared/constant.d.ts

@@ -6,15 +6,16 @@ export declare const LIB_DIR: string;
 export declare const UMD_DIR: string;
 export declare const TYPES_DIR: string;
 export declare const ROOT_DOCS_DIR: string;
+export declare const ROOT_PAGES_DIR: string;
 export declare const ESLINT_EXTENSIONS: string[];
 export declare const VITE_RESOLVE_EXTENSIONS: string[];
 export declare const SCRIPTS_EXTENSIONS: string[];
 export declare const PUBLIC_DIR_INDEXES: string[];
 export declare const STYLE_DIR_NAME = "style";
 export declare const EXAMPLE_DIR_NAME = "example";
-export declare const EXAMPLE_LOCALE_DIR_NAME = "locale";
+export declare const LOCALE_DIR_NAME = "locale";
 export declare const DOCS_DIR_NAME = "docs";
-export declare const EXAMPLE_DIR_INDEX = "index.vue";
+export declare const DIR_INDEX = "index.vue";
 export declare const TESTS_DIR_NAME = "__tests__";
 export declare const GENERATORS_DIR: string;
 export declare const UI_PACKAGE_JSON: string;
@@ -23,6 +24,7 @@ export declare const SITE: string;
 export declare const SITE_OUTPUT_PATH: string;
 export declare const SITE_PUBLIC_PATH: string;
 export declare const SITE_DIR: string;
+export declare const SITE_PC_DIR: string;
 export declare const SITE_PC_ROUTES: string;
 export declare const SITE_MOBILE_ROUTES: string;
 export declare const SITE_CONFIG: string;

package/lib/shared/constant.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.JEST_STYLE_MOCK = exports.JEST_MEDIA_MOCK = exports.JEST_CONFIG = exports.HL_WEB_TYPES_JSON = exports.HL_ATTRIBUTES_JSON = exports.HL_TAGS_JSON = exports.HL_DIR = exports.HL_MD = exports.HL_TITLE_SLOTS_RE = exports.HL_TITLE_EVENTS_RE = exports.HL_TITLE_ATTRIBUTES_RE = exports.HL_API_RE = exports.HL_COMPONENT_NAME_RE = exports.SITE_CONFIG = exports.SITE_MOBILE_ROUTES = exports.SITE_PC_ROUTES = exports.SITE_DIR = exports.SITE_PUBLIC_PATH = exports.SITE_OUTPUT_PATH = exports.SITE = exports.CLI_PACKAGE_JSON = exports.UI_PACKAGE_JSON = exports.GENERATORS_DIR = exports.TESTS_DIR_NAME = exports.EXAMPLE_DIR_INDEX = exports.DOCS_DIR_NAME = exports.EXAMPLE_LOCALE_DIR_NAME = exports.EXAMPLE_DIR_NAME = exports.STYLE_DIR_NAME = exports.PUBLIC_DIR_INDEXES = exports.SCRIPTS_EXTENSIONS = exports.VITE_RESOLVE_EXTENSIONS = exports.ESLINT_EXTENSIONS = exports.ROOT_DOCS_DIR = exports.TYPES_DIR = exports.UMD_DIR = exports.LIB_DIR = exports.ES_DIR = exports.SRC_DIR = exports.VARLET_CONFIG = exports.CWD = void 0;
+exports.JEST_STYLE_MOCK = exports.JEST_MEDIA_MOCK = exports.JEST_CONFIG = exports.HL_WEB_TYPES_JSON = exports.HL_ATTRIBUTES_JSON = exports.HL_TAGS_JSON = exports.HL_DIR = exports.HL_MD = exports.HL_TITLE_SLOTS_RE = exports.HL_TITLE_EVENTS_RE = exports.HL_TITLE_ATTRIBUTES_RE = exports.HL_API_RE = exports.HL_COMPONENT_NAME_RE = exports.SITE_CONFIG = exports.SITE_MOBILE_ROUTES = exports.SITE_PC_ROUTES = exports.SITE_PC_DIR = exports.SITE_DIR = exports.SITE_PUBLIC_PATH = exports.SITE_OUTPUT_PATH = exports.SITE = exports.CLI_PACKAGE_JSON = exports.UI_PACKAGE_JSON = exports.GENERATORS_DIR = exports.TESTS_DIR_NAME = exports.DIR_INDEX = exports.DOCS_DIR_NAME = exports.LOCALE_DIR_NAME = exports.EXAMPLE_DIR_NAME = exports.STYLE_DIR_NAME = exports.PUBLIC_DIR_INDEXES = exports.SCRIPTS_EXTENSIONS = exports.VITE_RESOLVE_EXTENSIONS = exports.ESLINT_EXTENSIONS = exports.ROOT_PAGES_DIR = exports.ROOT_DOCS_DIR = exports.TYPES_DIR = exports.UMD_DIR = exports.LIB_DIR = exports.ES_DIR = exports.SRC_DIR = exports.VARLET_CONFIG = exports.CWD = void 0;
 var path_1 = require("path");
 exports.CWD = process.cwd();
 exports.VARLET_CONFIG = (0, path_1.resolve)(exports.CWD, 'varlet.config.js');
@@ -10,15 +10,16 @@ exports.LIB_DIR = (0, path_1.resolve)(exports.CWD, 'lib');
 exports.UMD_DIR = (0, path_1.resolve)(exports.CWD, 'umd');
 exports.TYPES_DIR = (0, path_1.resolve)(exports.CWD, 'types');
 exports.ROOT_DOCS_DIR = (0, path_1.resolve)(exports.CWD, 'docs');
+exports.ROOT_PAGES_DIR = (0, path_1.resolve)(exports.CWD, 'pages');
 exports.ESLINT_EXTENSIONS = ['.vue', '.ts', '.js', '.mjs', '.tsx', '.jsx'];
 exports.VITE_RESOLVE_EXTENSIONS = ['.vue', '.tsx', '.ts', '.jsx', '.js', '.less', '.css'];
 exports.SCRIPTS_EXTENSIONS = ['.tsx', '.ts', '.jsx', '.js'];
 exports.PUBLIC_DIR_INDEXES = ['index.vue', 'index.tsx', 'index.ts', 'index.jsx', 'index.js'];
 exports.STYLE_DIR_NAME = 'style';
 exports.EXAMPLE_DIR_NAME = 'example';
-exports.EXAMPLE_LOCALE_DIR_NAME = 'locale';
+exports.LOCALE_DIR_NAME = 'locale';
 exports.DOCS_DIR_NAME = 'docs';
-exports.EXAMPLE_DIR_INDEX = 'index.vue';
+exports.DIR_INDEX = 'index.vue';
 exports.TESTS_DIR_NAME = '__tests__';
 exports.GENERATORS_DIR = (0, path_1.resolve)(__dirname, '../../generators');
 exports.UI_PACKAGE_JSON = (0, path_1.resolve)(exports.CWD, 'package.json');
@@ -28,6 +29,7 @@ exports.SITE = (0, path_1.resolve)(__dirname, '../../site');
 exports.SITE_OUTPUT_PATH = (0, path_1.resolve)(exports.CWD, 'site');
 exports.SITE_PUBLIC_PATH = (0, path_1.resolve)(exports.CWD, 'public');
 exports.SITE_DIR = (0, path_1.resolve)(exports.CWD, '.varlet/site');
+exports.SITE_PC_DIR = (0, path_1.resolve)(exports.CWD, '.varlet/site/pc');
 exports.SITE_PC_ROUTES = (0, path_1.resolve)(exports.CWD, '.varlet/pc.routes.ts');
 exports.SITE_MOBILE_ROUTES = (0, path_1.resolve)(exports.CWD, '.varlet/mobile.routes.ts');
 exports.SITE_CONFIG = (0, path_1.resolve)(exports.CWD, '.varlet/site.config.json');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "1.27.7",
+  "version": "1.27.9-alpha.1653036733481",
   "description": "cli of varlet",
   "bin": {
     "varlet-cli": "./lib/index.js"
@@ -33,9 +33,9 @@
     "@babel/helper-plugin-utils": "^7.14.5",
     "@babel/preset-env": "^7.14.8",
     "@babel/preset-typescript": "^7.14.5",
-    "@varlet/icons": "1.27.7",
-    "@varlet/markdown-vite-plugin": "1.27.7",
-    "@varlet/touch-emulator": "1.27.7",
+    "@varlet/icons": "1.27.9-alpha.1653036733481",
+    "@varlet/markdown-vite-plugin": "1.27.9-alpha.1653036733481",
+    "@varlet/touch-emulator": "1.27.9-alpha.1653036733481",
     "@vitejs/plugin-vue": "2.2.0",
     "@vitejs/plugin-vue-jsx": "1.3.5",
     "@vue/babel-plugin-jsx": "1.1.1",
@@ -68,6 +68,7 @@
   "devDependencies": {
     "@types/babel__core": "^7.1.12",
     "@types/fs-extra": "^9.0.2",
+    "@types/glob": "^7.1.3",
     "@types/hash-sum": "^1.0.0",
     "@types/jest": "^26.0.15",
     "@types/lodash": "^4.14.174",
@@ -75,7 +76,7 @@
     "@types/semver": "^7.3.9"
   },
   "peerDependencies": {
-    "@varlet/touch-emulator": "1.27.7",
+    "@varlet/touch-emulator": "1.27.9-alpha.1653036733481",
     "@vue/test-utils": "^2.0.0-rc.6",
     "clipboard": "^2.0.6",
     "live-server": "^1.2.1",

package/site/components/button/Button.vue

@@ -7,7 +7,7 @@
       block ? 'var-site--flex var-site-button--block' : 'var-site--inline-flex',
       disabled ? 'var-site-button--disabled' : null,
       text ? `var-site-button--text-${type}` : `var-site-button--${type}`,
-      text ? 'var-site-button--text' : 'var-elevation--1',
+      text ? 'var-site-button--text' : 'var-site-elevation--1',
       text && disabled ? 'var-site-button--text-disabled' : null,
       round ? 'var-site-button--round' : null,
       outline ? 'var-site-button--outline' : null,

package/site/index.html

@@ -20,6 +20,14 @@
       font-style: normal;
       font-display: swap;
     }
+    body {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0px;
+      font-family: 'Roboto', sans-serif;
+      background: var(--site-config-color-body);
+      color: var(--site-config-color-text);
+    }
   </style>
   <script>
     if ('<%= baidu %>') {

package/site/mobile/App.vue

@@ -4,7 +4,7 @@
       <var-site-app-bar class="app-bar" title-position="left" :title="bigCamelizeComponentName">
         <template #left>
           <var-site-button v-if="showBackIcon" text round @click="back" color="transparent" text-color="#fff">
-            <var-site-icon name="chevron-left" :size="28" style="margin-top: 1px" />
+            <var-site-icon name="chevron-left" class="arrow-left" style="margin-top: 1px" />
           </var-site-button>
           <var-site-button
             v-if="!showBackIcon && github"
@@ -15,7 +15,7 @@
             color="transparent"
             text-color="#fff"
           >
-            <var-site-icon name="github" :size="28" style="margin-top: 1px" />
+            <var-site-icon name="github" class="github" style="margin-top: 1px" />
           </var-site-button>
         </template>
         <template #right>
@@ -31,21 +31,21 @@
             @click="toggleTheme"
           >
             <var-site-icon
-              size="24px"
+              class="theme"
               color="#fff"
               :name="currentThemes === 'themes' ? 'white-balance-sunny' : 'weather-night'"
             />
           </var-site-button>
           <var-site-button
-            style="padding-right: 6px"
+            class="i18n-button"
             text
             color="transparent"
             text-color="#fff"
             @click.stop="showMenu = true"
             v-if="languages"
           >
-            <var-site-icon name="translate" :size="24" />
-            <var-site-icon name="chevron-down" :size="22" />
+            <var-site-icon name="translate" class="i18n" />
+            <var-site-icon name="chevron-down" class="arrow-down" />
           </var-site-button>
         </template>
       </var-site-app-bar>
@@ -200,6 +200,7 @@ body {
   margin: 0;
   padding: 0;
   min-height: 100%;
+  font-size: 16px;
   font-family: 'Roboto', sans-serif;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: var(--site-config-color-bar);
@@ -246,7 +247,7 @@ header {
 }
 
 .router-view__block {
-  padding: 54px 12px 15px;
+  padding: 55px 12px 15px;
 }
 
 * {
@@ -263,4 +264,28 @@ header {
     background: var(--site-config-color-mobile-language-active-background);
   }
 }
+
+.arrow-left {
+  font-size: 28px !important;
+}
+
+.github {
+  font-size: 28px !important;
+}
+
+.theme {
+  font-size: 24px !important;
+}
+
+.i18n {
+  font-size: 24px !important;
+}
+
+.arrow-down {
+  font-size: 22px !important;
+}
+
+.i18n-button {
+  padding-right: 6px !important;
+}
 </style>

package/site/mobile/components/AppHome.vue

@@ -6,19 +6,17 @@
     </h1>
     <h2 class="varlet-home__desc">{{ description[lang] }}</h2>
   </div>
-  <var-site-cell
+
+  <div
+    class="varlet-home__cell"
     v-for="component in components"
     :key="component.text"
-    @click="toComponent(component)"
     v-ripple
+    @click="toComponent(component)"
   >
-    <template #extra>
-      <var-site-icon name="chevron-right" size="14" />
-    </template>
-    <template #default>
-      {{ component.text[lang] }}
-    </template>
-  </var-site-cell>
+    <span>{{ component.text[lang] }}</span>
+    <var-site-icon name="chevron-right" size="14" />
+  </div>
 </template>
 
 <script lang='ts'>
@@ -85,7 +83,7 @@ export default {
 
 .varlet-home__title {
   margin: 0 0 16px;
-  font-size: 32px;
+  font-size: 34px;
 }
 
 .varlet-home__title,
@@ -103,8 +101,8 @@ export default {
 }
 
 .varlet-home__image {
-  width: 32px;
-  height: 32px;
+  width: 36px;
+  height: 36px;
 }
 
 .varlet-home__image,
@@ -117,7 +115,13 @@ export default {
   margin-left: 16px;
 }
 
-.var-site-cell {
+.varlet-home__cell {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 40px;
+  padding: 10px 12px;
+  font-size: 15px;
   cursor: pointer;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   transition: all 0.3s;

package/site/mobile/components/styles/common.less

@@ -0,0 +1,64 @@
+@import './var';
+
+.var-site {
+  &--box {
+    box-sizing: border-box;
+
+    * {
+      box-sizing: border-box;
+    }
+  }
+
+  &--relative {
+    position: relative;
+  }
+
+  &--absolute {
+    position: absolute;
+  }
+
+  &--hidden {
+    overflow: hidden;
+  }
+
+  &--lock {
+    overflow: hidden;
+  }
+
+  &--block {
+    display: block;
+  }
+
+  &--inline-block {
+    display: inline-block;
+  }
+
+  &--flex {
+    display: flex;
+  }
+
+  &--inline-flex {
+    display: inline-flex;
+  }
+}
+
+:root {
+  --site-font-size-xs: @site-font-size-xs;
+  --site-font-size-sm: @site-font-size-sm;
+  --site-font-size-md: @site-font-size-md;
+  --site-font-size-lg: @site-font-size-lg;
+  --site-icon-size-xs: @site-icon-size-xs;
+  --site-icon-size-sm: @site-icon-size-sm;
+  --site-icon-size-md: @site-icon-size-md;
+  --site-icon-size-lg: @site-icon-size-lg;
+  --site-color-primary: @site-color-primary;
+  --site-color-info: @site-color-info;
+  --site-color-success: @site-color-success;
+  --site-color-warning: @site-color-warning;
+  --site-color-danger: @site-color-danger;
+  --site-color-disabled: @site-color-disabled;
+  --site-cubic-bezier: @site-cubic-bezier;
+  --site-shadow-key-umbra-opacity: @site-shadow-key-umbra-opacity;
+  --site-shadow-key-penumbra-opacity: @site-shadow-key-penumbra-opacity;
+  --site-shadow-key-ambient-opacity: @site-shadow-key-ambient-opacity;
+}

package/site/mobile/components/styles/elevation.less

@@ -0,0 +1,126 @@
+.var-site-elevation {
+  &--0 {
+    box-shadow: 0 0 0 0 var(--site-shadow-key-umbra-opacity), 0 0 0 0 var(--site-shadow-key-penumbra-opacity),
+      0 0 0 0 var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--1 {
+    box-shadow: 0 2px 1px -1px var(--site-shadow-key-umbra-opacity), 0 1px 1px 0 var(--site-shadow-key-penumbra-opacity),
+      0 1px 3px 0 var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--2 {
+    box-shadow: 0 3px 1px -2px var(--site-shadow-key-umbra-opacity), 0 2px 2px 0 var(--site-shadow-key-penumbra-opacity),
+      0 1px 5px 0 var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--3 {
+    box-shadow: 0 3px 3px -2px var(--site-shadow-key-umbra-opacity), 0 3px 4px 0 var(--site-shadow-key-penumbra-opacity),
+      0 1px 8px 0 var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--4 {
+    box-shadow: 0 2px 4px -1px var(--site-shadow-key-umbra-opacity), 0 4px 5px 0 var(--site-shadow-key-penumbra-opacity),
+      0 1px 10px 0 var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--5 {
+    box-shadow: 0 3px 5px -1px var(--site-shadow-key-umbra-opacity), 0 5px 8px 0 var(--site-shadow-key-penumbra-opacity),
+      0 1px 14px 0 var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--6 {
+    box-shadow: 0 3px 5px -1px var(--site-shadow-key-umbra-opacity), 0 6px 10px 0 var(--site-shadow-key-penumbra-opacity),
+      0 1px 18px 0 var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--7 {
+    box-shadow: 0 4px 5px -2px var(--site-shadow-key-umbra-opacity), 0 7px 10px 1px var(--site-shadow-key-penumbra-opacity),
+      0 2px 16px 1px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--8 {
+    box-shadow: 0 5px 5px -3px var(--site-shadow-key-umbra-opacity), 0 8px 10px 1px var(--site-shadow-key-penumbra-opacity),
+      0 3px 14px 2px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--9 {
+    box-shadow: 0 5px 6px -3px var(--site-shadow-key-umbra-opacity), 0 9px 12px 1px var(--site-shadow-key-penumbra-opacity),
+      0 3px 16px 2px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--10 {
+    box-shadow: 0 6px 6px -3px var(--site-shadow-key-umbra-opacity), 0 10px 14px 1px var(--site-shadow-key-penumbra-opacity),
+      0 4px 18px 3px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--11 {
+    box-shadow: 0 6px 7px -4px var(--site-shadow-key-umbra-opacity), 0 11px 15px 1px var(--site-shadow-key-penumbra-opacity),
+      0 4px 20px 3px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--12 {
+    box-shadow: 0 7px 8px -4px var(--site-shadow-key-umbra-opacity), 0 12px 17px 2px var(--site-shadow-key-penumbra-opacity),
+      0 5px 22px 4px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--13 {
+    box-shadow: 0 7px 8px -4px var(--site-shadow-key-umbra-opacity), 0 13px 19px 2px var(--site-shadow-key-penumbra-opacity),
+      0 5px 24px 4px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--14 {
+    box-shadow: 0 7px 9px -4px var(--site-shadow-key-umbra-opacity), 0 14px 21px 2px var(--site-shadow-key-penumbra-opacity),
+      0 5px 26px 4px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--15 {
+    box-shadow: 0 8px 9px -5px var(--site-shadow-key-umbra-opacity), 0 15px 22px 2px var(--site-shadow-key-penumbra-opacity),
+      0 6px 28px 5px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--16 {
+    box-shadow: 0 8px 10px -5px var(--site-shadow-key-umbra-opacity), 0 16px 24px 2px var(--site-shadow-key-penumbra-opacity),
+      0 6px 30px 5px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--17 {
+    box-shadow: 0 8px 11px -5px var(--site-shadow-key-umbra-opacity), 0 17px 26px 2px var(--site-shadow-key-penumbra-opacity),
+      0 6px 32px 5px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--18 {
+    box-shadow: 0 9px 11px -5px var(--site-shadow-key-umbra-opacity), 0 18px 28px 2px var(--site-shadow-key-penumbra-opacity),
+      0 7px 34px 6px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--19 {
+    box-shadow: 0 9px 12px -6px var(--site-shadow-key-umbra-opacity), 0 19px 29px 2px var(--site-shadow-key-penumbra-opacity),
+      0 7px 36px 6px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--20 {
+    box-shadow: 0 10px 13px -6px var(--site-shadow-key-umbra-opacity), 0 20px 31px 3px var(--site-shadow-key-penumbra-opacity),
+      0 8px 38px 7px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--21 {
+    box-shadow: 0 10px 13px -6px var(--site-shadow-key-umbra-opacity), 0 21px 33px 3px var(--site-shadow-key-penumbra-opacity),
+      0 8px 40px 7px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--22 {
+    box-shadow: 0 10px 14px -6px var(--site-shadow-key-umbra-opacity), 0 22px 35px 3px var(--site-shadow-key-penumbra-opacity),
+      0 8px 42px 7px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--23 {
+    box-shadow: 0 11px 14px -7px var(--site-shadow-key-umbra-opacity), 0 23px 36px 3px var(--site-shadow-key-penumbra-opacity),
+      0 9px 44px 8px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--24 {
+    box-shadow: 0 11px 15px -7px var(--site-shadow-key-umbra-opacity), 0 24px 38px 3px var(--site-shadow-key-penumbra-opacity),
+      0 9px 46px 8px var(--site-shadow-key-ambient-opacity);
+  }
+}