@varlet/cli 2.0.6 → 2.1.0-alpha.1667210582672

package/lib/node/compiler/compileSiteEntry.js

@@ -0,0 +1,128 @@
+import slash from 'slash';
+import fse from 'fs-extra';
+import { DOCS_DIR_NAME, DIR_INDEX, EXAMPLE_DIR_NAME, LOCALE_DIR_NAME, ROOT_DOCS_DIR, ROOT_PAGES_DIR, SITE, SITE_DIR, SITE_MOBILE_ROUTES, SITE_PC_DIR, SITE_PC_ROUTES, SRC_DIR, } from '../shared/constant.js';
+import { glob, isDir, outputFileSyncOnChange } from '../shared/fsUtils.js';
+import { getVarletConfig } from '../config/varlet.config.js';
+import { get } from 'lodash-es';
+const { copy } = fse;
+const EXAMPLE_COMPONENT_NAME_RE = /\/([-\w]+)\/example\/index.vue/;
+const COMPONENT_DOCS_RE = /\/([-\w]+)\/docs\/([-\w]+)\.md/;
+const ROOT_DOCS_RE = /\/docs\/([-\w]+)\.([-\w]+)\.md/;
+const ROOT_LOCALE_RE = /\/pages\/([-\w]+)\/locale\/([-\w]+)\.ts/;
+export function getExampleRoutePath(examplePath) {
+    var _a;
+    return '/' + ((_a = examplePath.match(EXAMPLE_COMPONENT_NAME_RE)) === null || _a === void 0 ? void 0 : _a[1]);
+}
+export function getComponentDocRoutePath(componentDocsPath) {
+    var _a;
+    const [, routePath, language] = (_a = componentDocsPath.match(COMPONENT_DOCS_RE)) !== null && _a !== void 0 ? _a : [];
+    return `/${language}/${routePath}`;
+}
+export function getRootDocRoutePath(rootDocsPath) {
+    var _a;
+    const [, routePath, language] = (_a = rootDocsPath.match(ROOT_DOCS_RE)) !== null && _a !== void 0 ? _a : [];
+    return `/${language}/${routePath}`;
+}
+export function getRootRoutePath(rootLocalePath) {
+    var _a;
+    const [, routePath, language] = (_a = rootLocalePath.match(ROOT_LOCALE_RE)) !== null && _a !== void 0 ? _a : [];
+    return `/${language}/${routePath}`;
+}
+export function getRootFilePath(rootLocalePath) {
+    return rootLocalePath.replace(/locale\/.+/, DIR_INDEX);
+}
+export function findExamples() {
+    return glob(`${SRC_DIR}/**/${EXAMPLE_DIR_NAME}/${DIR_INDEX}`);
+}
+export function findComponentDocs() {
+    return glob(`${SRC_DIR}/**/${DOCS_DIR_NAME}/*.md`);
+}
+export function findRootDocs() {
+    return glob(`${ROOT_DOCS_DIR}/*.md`);
+}
+export async function findRootLocales() {
+    const defaultLanguage = get(await getVarletConfig(), 'defaultLanguage');
+    const userPages = await glob(`${ROOT_PAGES_DIR}/*`);
+    const baseLocales = await glob(`${SITE}/pc/pages/**/${LOCALE_DIR_NAME}/*.ts`);
+    const userLocales = await userPages.reduce(async (userLocales, page) => {
+        if (isDir(page)) {
+            const locales = await glob(`${page}/${LOCALE_DIR_NAME}/*.ts`);
+            if (!locales.length)
+                locales.push(`${page}/${LOCALE_DIR_NAME}/${defaultLanguage}.ts`);
+            (await userLocales).push(...locales);
+        }
+        return userLocales;
+    }, Promise.resolve([]));
+    // filter
+    const filterMap = new Map();
+    baseLocales.forEach((locale) => {
+        var _a;
+        const [, routePath, language] = (_a = locale.match(ROOT_LOCALE_RE)) !== null && _a !== void 0 ? _a : [];
+        filterMap.set(routePath + language, slash(`${SITE_PC_DIR}/pages/${routePath}/locale/${language}.ts`));
+    });
+    userLocales.forEach((locale) => {
+        var _a;
+        const [, routePath, language] = (_a = locale.match(ROOT_LOCALE_RE)) !== null && _a !== void 0 ? _a : [];
+        filterMap.set(routePath + language, locale);
+    });
+    return Promise.resolve(Array.from(filterMap.values()));
+}
+export async function buildMobileSiteRoutes() {
+    const examples = await findExamples();
+    const routes = examples.map((example) => `
+  {
+    path: '${getExampleRoutePath(example)}',
+    // @ts-ignore
+    component: () => import('${example}')
+  }`);
+    const source = `export default [\
+    ${routes.join(',')}
+]`;
+    await outputFileSyncOnChange(SITE_MOBILE_ROUTES, source);
+}
+export async function buildPcSiteRoutes() {
+    const [componentDocs, rootDocs, rootLocales] = await Promise.all([
+        findComponentDocs(),
+        findRootDocs(),
+        findRootLocales(),
+    ]);
+    const rootPagesRoutes = rootLocales.map((rootLocale) => `
+  {
+    path: '${getRootRoutePath(rootLocale)}',
+    // @ts-ignore
+    component: () => import('${getRootFilePath(rootLocale)}')
+  }\
+`);
+    const componentDocsRoutes = componentDocs.map((componentDoc) => `
+      {
+        path: '${getComponentDocRoutePath(componentDoc)}',
+        // @ts-ignore
+        component: () => import('${componentDoc}')
+      }`);
+    const rootDocsRoutes = rootDocs.map((rootDoc) => `
+      {
+        path: '${getRootDocRoutePath(rootDoc)}',
+        // @ts-ignore
+        component: () => import('${rootDoc}')
+      }`);
+    const layoutRoutes = `{
+    path: '/layout',
+    // @ts-ignore
+    component:()=> import('${slash(SITE_PC_DIR)}/Layout.vue'),
+    children: [
+      ${[...componentDocsRoutes, rootDocsRoutes].join(',')},
+    ]
+  }`;
+    const source = `export default [\
+  ${rootPagesRoutes.join(',')},
+  ${layoutRoutes}
+]`;
+    outputFileSyncOnChange(SITE_PC_ROUTES, source);
+}
+export async function buildSiteSource() {
+    return copy(SITE, SITE_DIR);
+}
+export async function buildSiteEntry() {
+    await getVarletConfig(true);
+    await Promise.all([buildMobileSiteRoutes(), buildPcSiteRoutes(), buildSiteSource()]);
+}

package/lib/node/compiler/compileStyle.js

@@ -0,0 +1,39 @@
+import fse from 'fs-extra';
+import less from 'less';
+import { replaceExt, smartAppendFileSync } from '../shared/fsUtils.js';
+import { parse, resolve } from 'path';
+const { render } = less;
+const { readFileSync, removeSync, writeFileSync } = fse;
+export const EMPTY_SPACE_RE = /[\s]+/g;
+export const EMPTY_LINE_RE = /[\n\r]*/g;
+export const IMPORT_CSS_RE = /(?<!['"`])import\s+['"](\.{1,2}\/.+\.css)['"]\s*;?(?!\s*['"`])/g;
+export const IMPORT_LESS_RE = /(?<!['"`])import\s+['"](\.{1,2}\/.+\.less)['"]\s*;?(?!\s*['"`])/g;
+export const REQUIRE_CSS_RE = /(?<!['"`])require\(\s*['"](\.{1,2}\/.+\.css)['"]\s*\);?(?!\s*['"`])/g;
+export const REQUIRE_LESS_RE = /(?<!['"`])require\(\s*['"](\.{1,2}\/.+\.less)['"]\s*\);?(?!\s*['"`])/g;
+export const STYLE_IMPORT_RE = /@import\s+['"](.+)['"]\s*;/g;
+export const clearEmptyLine = (s) => s.replace(EMPTY_LINE_RE, '').replace(EMPTY_SPACE_RE, ' ');
+export function normalizeStyleDependency(styleImport, reg) {
+    let relativePath = styleImport.replace(reg, '$1');
+    relativePath = relativePath.replace(/(\.less)|(\.css)/, '');
+    if (relativePath.startsWith('./')) {
+        return '.' + relativePath;
+    }
+    return '../' + relativePath;
+}
+export function extractStyleDependencies(file, code, styleReg) {
+    var _a;
+    const styleImports = (_a = code.match(styleReg)) !== null && _a !== void 0 ? _a : [];
+    const cssFile = resolve(parse(file).dir, './style/index.js');
+    const modules = process.env.BABEL_MODULE;
+    styleImports.forEach((styleImport) => {
+        const normalizedPath = normalizeStyleDependency(styleImport, styleReg);
+        smartAppendFileSync(cssFile, modules === 'commonjs' ? `require('${normalizedPath}.css')\n` : `import '${normalizedPath}.css'\n`);
+    });
+    return code.replace(styleReg, '');
+}
+export async function compileLess(file) {
+    const source = readFileSync(file, 'utf-8');
+    const { css } = await render(source, { filename: file });
+    removeSync(file);
+    writeFileSync(replaceExt(file, '.css'), clearEmptyLine(css), 'utf-8');
+}

package/lib/node/compiler/compileTemplateHighlight.js

@@ -0,0 +1,133 @@
+import fse from 'fs-extra';
+import { SRC_DIR, HL_MD, HL_API_RE, HL_COMPONENT_NAME_RE, HL_TITLE_ATTRIBUTES_RE, HL_TITLE_EVENTS_RE, HL_TITLE_SLOTS_RE, HL_WEB_TYPES_JSON, HL_DIR, HL_TAGS_JSON, HL_ATTRIBUTES_JSON, CLI_PACKAGE_JSON, } from '../shared/constant.js';
+import { resolve } from 'path';
+import { isDir, isMD } from '../shared/fsUtils.js';
+import { get } from 'lodash-es';
+import { getVarletConfig } from '../config/varlet.config.js';
+const { ensureDir, readdirSync, readFileSync, readJSONSync, writeFile } = fse;
+const TABLE_HEAD_RE = /\s*\|.*\|\s*\n\s*\|.*---+\s*\|\s*\n+/;
+const TABLE_FOOT_RE = /(\|\s*$)|(\|\s*\n(?!\s*\|))/;
+export const replaceDot = (s) => s.replace(/`/g, '');
+export const replaceUnderline = (s) => s.replace(/_/g, '');
+export function parseTable(table) {
+    const rows = table.split('\n').filter(Boolean);
+    return rows.map((row) => {
+        const cols = row.split('|');
+        cols.shift();
+        cols.pop();
+        return cols.map((col) => col.replace(/__varlet_axis__/g, '|').trim());
+    });
+}
+export function compileTable(md, titleRe) {
+    const apiMatched = md.match(HL_API_RE);
+    if (!apiMatched) {
+        return '';
+    }
+    md = md.slice(apiMatched.index + apiMatched[0].length);
+    const titleMatched = md.match(titleRe);
+    if (!titleMatched) {
+        return '';
+    }
+    md = md.slice(titleMatched.index + titleMatched[0].length);
+    const tableHeadMatched = md.match(TABLE_HEAD_RE);
+    if (!tableHeadMatched) {
+        return '';
+    }
+    md = md.slice(tableHeadMatched.index + tableHeadMatched[0].length);
+    const tableFootMatched = md.match(TABLE_FOOT_RE);
+    if (!tableFootMatched) {
+        return '';
+    }
+    md = md.slice(0, tableFootMatched.index + tableFootMatched[0].length);
+    return md.replace(/\\\|/g, '__varlet_axis__').trim();
+}
+export function compileTags(table, tags, componentName, varletConfig) {
+    tags[`${get(varletConfig, 'namespace')}-${componentName}`] = {
+        attributes: table.attributesTable.map((row) => replaceDot(row[0])),
+    };
+}
+export function compileAttributes(table, attributes, componentName, varletConfig) {
+    table.attributesTable.forEach((row) => {
+        const attrNamespace = `${get(varletConfig, 'namespace')}-${componentName}/${replaceDot(row[0])}`;
+        attributes[attrNamespace] = {
+            type: replaceUnderline(row[2]),
+            description: `${row[1]} 默认值：${replaceDot(row[3])}`,
+        };
+    });
+}
+export function compileWebTypes(table, webTypes, componentName, varletConfig) {
+    const { attributesTable, eventsTable, slotsTable } = table;
+    const attributes = attributesTable.map((row) => ({
+        name: replaceDot(row[0]),
+        description: row[1],
+        default: replaceDot(row[3]),
+        value: {
+            type: replaceUnderline(row[2]),
+            kind: 'expression',
+        },
+    }));
+    const events = eventsTable.map((row) => ({
+        name: replaceDot(row[0]),
+        description: row[1],
+    }));
+    const slots = slotsTable.map((row) => ({
+        name: replaceDot(row[0]),
+        description: row[1],
+    }));
+    webTypes.contributions.html.tags.push({
+        name: `${get(varletConfig, 'namespace')}-${componentName}`,
+        attributes,
+        events,
+        slots,
+    });
+}
+export function compileMD(path, tags, attributes, webTypes, varletConfig) {
+    if (!path.endsWith(HL_MD)) {
+        return;
+    }
+    const md = readFileSync(path, 'utf-8');
+    const componentName = path.match(HL_COMPONENT_NAME_RE)[2];
+    const attributesTable = parseTable(compileTable(md, HL_TITLE_ATTRIBUTES_RE));
+    const eventsTable = parseTable(compileTable(md, HL_TITLE_EVENTS_RE));
+    const slotsTable = parseTable(compileTable(md, HL_TITLE_SLOTS_RE));
+    const table = {
+        attributesTable,
+        eventsTable,
+        slotsTable,
+    };
+    compileWebTypes(table, webTypes, componentName, varletConfig);
+    compileTags(table, tags, componentName, varletConfig);
+    compileAttributes(table, attributes, componentName, varletConfig);
+}
+export function compileDir(path, tags, attributes, webTypes, varletConfig) {
+    const dir = readdirSync(path);
+    dir.forEach((filename) => {
+        const filePath = resolve(path, filename);
+        isDir(filePath) && compileDir(filePath, tags, attributes, webTypes, varletConfig);
+        isMD(filePath) && compileMD(filePath, tags, attributes, webTypes, varletConfig);
+    });
+}
+export async function compileTemplateHighlight() {
+    await ensureDir(HL_DIR);
+    const varletConfig = await getVarletConfig();
+    const tags = {};
+    const attributes = {};
+    const webTypes = {
+        $schema: 'https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json',
+        framework: 'vue',
+        version: readJSONSync(CLI_PACKAGE_JSON).version,
+        name: get(varletConfig, 'title'),
+        contributions: {
+            html: {
+                tags: [],
+                'types-syntax': 'typescript',
+            },
+        },
+    };
+    compileDir(SRC_DIR, tags, attributes, webTypes, varletConfig);
+    await Promise.all([
+        writeFile(HL_WEB_TYPES_JSON, JSON.stringify(webTypes, null, 2)),
+        writeFile(HL_TAGS_JSON, JSON.stringify(tags, null, 2)),
+        writeFile(HL_ATTRIBUTES_JSON, JSON.stringify(attributes, null, 2)),
+    ]);
+}

package/lib/node/compiler/compileTypes.js

@@ -0,0 +1,45 @@
+import fse from 'fs-extra';
+import { TYPES_DIR, UI_PACKAGE_JSON } from '../shared/constant.js';
+import { bigCamelize } from '@varlet/shared';
+import { resolve, relative } from 'path';
+import { getVarletConfig } from '../config/varlet.config.js';
+import { get } from 'lodash-es';
+const { ensureDir, writeFileSync, readdir, writeFile, readJSONSync } = fse;
+export function generateReference(moduleDir) {
+    writeFileSync(resolve(moduleDir, 'index.d.ts'), `\
+export * from '${relative(moduleDir, TYPES_DIR)}'
+`);
+}
+export async function compileTypes() {
+    const varletConfig = await getVarletConfig();
+    const namespace = get(varletConfig, 'namespace');
+    const { name } = readJSONSync(UI_PACKAGE_JSON);
+    await ensureDir(TYPES_DIR);
+    const dir = await readdir(TYPES_DIR);
+    const ignoreEntryDir = dir.filter((filename) => filename !== 'index.d.ts' && filename !== 'global.d.ts');
+    const exports = [];
+    const declares = [];
+    ignoreEntryDir.forEach((filename) => {
+        const componentName = filename.slice(0, filename.indexOf('.d.ts'));
+        exports.push(`export * from './${componentName}'`);
+        if (!componentName.startsWith(namespace)) {
+            declares.push(`${bigCamelize(namespace)}${bigCamelize(componentName)}: typeof import('${name}')['_${bigCamelize(componentName)}Component']`);
+        }
+    });
+    const globalDeclares = `\
+declare module 'vue' {
+  export interface GlobalComponents {
+    ${declares.join('\n    ')}
+  }
+}`;
+    const template = `\
+import type { App } from 'vue'
+
+export const install: (app: App) => void
+
+${exports.join('\n')}
+
+${globalDeclares}
+`;
+    await Promise.all([writeFile(resolve(TYPES_DIR, 'index.d.ts'), template)]);
+}

package/lib/{config → node/config}/varlet.config.d.ts

@@ -1,4 +1,4 @@
-interface VarletConfig {
+export interface VarletConfig {
     /**
      * @default `Varlet`
      * UI library name.
@@ -19,7 +19,9 @@ interface VarletConfig {
      * Local dev server port
      */
     port?: number;
+    title?: string;
     logo?: string;
+    themeKey?: string;
     defaultLanguage?: 'zh-CN' | 'en-US';
     /**
      * @default `false`
@@ -38,7 +40,6 @@ interface VarletConfig {
     mobile?: Record<string, any>;
     moduleCompatible?: Record<string, string>;
 }
-export declare function defineConfig(conf: VarletConfig): VarletConfig;
+export declare function defineConfig(config: VarletConfig): VarletConfig;
 export declare function mergeStrategy(value: any, srcValue: any, key: string): any[] | undefined;
-export declare function getVarletConfig(emit?: boolean): any;
-export {};
+export declare function getVarletConfig(emit?: boolean): Promise<Required<VarletConfig>>;

package/lib/node/config/varlet.config.js

@@ -0,0 +1,27 @@
+import fse from 'fs-extra';
+import { mergeWith } from 'lodash-es';
+import { VARLET_CONFIG, SITE_CONFIG } from '../shared/constant.js';
+import { outputFileSyncOnChange } from '../shared/fsUtils.js';
+import { isArray } from '@varlet/shared';
+import { pathToFileURL } from 'url';
+const { pathExistsSync, statSync } = fse;
+export function defineConfig(config) {
+    return config;
+}
+export function mergeStrategy(value, srcValue, key) {
+    if (key === 'features' && isArray(srcValue)) {
+        return srcValue;
+    }
+}
+export async function getVarletConfig(emit = false) {
+    const defaultConfig = (await import('./varlet.default.config.js')).default;
+    const config = pathExistsSync(VARLET_CONFIG)
+        ? (await import(`${pathToFileURL(VARLET_CONFIG).href}?_t=${statSync(VARLET_CONFIG).mtimeMs}`)).default
+        : {};
+    const mergedConfig = mergeWith(defaultConfig, config, mergeStrategy);
+    if (emit) {
+        const source = JSON.stringify(mergedConfig, null, 2);
+        outputFileSyncOnChange(SITE_CONFIG, source);
+    }
+    return mergedConfig;
+}

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

@@ -0,0 +1,2 @@
+declare const _default: import("./varlet.config.js").VarletConfig;
+export default _default;

package/lib/node/config/varlet.default.config.js

@@ -0,0 +1,264 @@
+import { defineConfig } from './varlet.config.js';
+export default defineConfig({
+    name: 'Varlet',
+    namespace: 'var',
+    host: 'localhost',
+    port: 8080,
+    title: 'VARLET',
+    logo: 'https://varlet.gitee.io/varlet-ui/varlet_icon.png',
+    defaultLanguage: 'zh-CN',
+    highlight: {
+        /**
+         * @see https://highlightjs.org/
+         */
+        style: '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/styles/nord.min.css',
+    },
+    analysis: {
+        baidu: '',
+    },
+    useMobile: false,
+    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': 'Theme customization',
+                    },
+                    description: {
+                        'zh-CN': '内置亮色和暗色两种主题，支持组件的样式自定义',
+                        'en-US': 'Built-in light and dark themes, support style customization of components',
+                    },
+                },
+                {
+                    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': '支持 Typescript',
+                        'en-US': 'Support typescript',
+                    },
+                    description: {
+                        'zh-CN': '使用 Typescript 构建，提供良好的组件类型系统',
+                        'en-US': 'Built with typescript, which provides a nice components type system',
+                    },
+                },
+                {
+                    name: {
+                        'zh-CN': '服务端渲染',
+                        'en-US': 'Server-side rendering',
+                    },
+                    description: {
+                        'zh-CN': '对服务端渲染支持良好，并对 Nuxt 进行了适配',
+                        'en-US': 'Good support for server-side rendering and adaptation to Nuxt',
+                    },
+                },
+                {
+                    name: {
+                        'zh-CN': '国人开发',
+                        'en-US': 'Developed by Chinese',
+                    },
+                    description: {
+                        'zh-CN': '由国人开发，完善的中英文文档和后勤保障',
+                        'en-US': 'Complete Chinese and English documentation and logistics support',
+                    },
+                },
+                {
+                    name: {
+                        'zh-CN': 'IDE 支持',
+                        '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': '组件库快速成型工具',
+                        'en-US': 'Component library toolchain',
+                    },
+                    description: {
+                        'zh-CN': '开源了搭建本组件库的所有工具链，提供快速开发组件库的能力',
+                        'en-US': 'Open-sourced the toolchain for building this component library, providing the ability to rapidly develop the component library',
+                    },
+                },
+            ],
+            contributors: {
+                label: {
+                    'zh-CN': '贡献者',
+                    'en-US': 'Contributors',
+                },
+                link: 'https://github.com/varletjs/varlet/graphs/contributors',
+                image: 'https://contrib.rocks/image?repo=varletjs/varlet',
+            },
+            license: {
+                'zh-CN': '组件库基于 MIT 协议，您可以自由的使用和分享',
+                'en-US': 'Released under the MIT License, You can use and share freely.',
+            },
+            copyright: {
+                'zh-CN': 'Copyright © 2022 varletjs 组织成员以及 varlet 的贡献者们',
+                'en-US': 'Copyright © 2022 varletjs member and varlet contributors.',
+            },
+        },
+        title: {
+            'zh-CN': '面向 Vue3 的 Material 风格移动端组件库',
+            'en-US': 'Material design mobile components built for Vue3',
+        },
+        header: {
+            i18n: {
+                'zh-CN': '中文',
+                'en-US': 'English',
+            },
+            versions: null,
+            github: 'https://github.com/varletjs/varlet',
+            playground: 'https://varlet.gitee.io/varlet-ui-playground',
+            darkMode: true,
+        },
+        clipboard: {
+            'zh-CN': '代码已复制到剪切板',
+            'en-US': 'The code has been copied to the clipboard',
+        },
+        fold: {
+            defaultFold: false,
+            foldHeight: 50,
+        },
+    },
+    mobile: {
+        redirect: '/home',
+        title: {
+            'zh-CN': '面向 Vue3 的 Material 风格移动端组件库',
+            'en-US': 'Material design mobile components built for Vue3',
+        },
+        header: {
+            i18n: {
+                'zh-CN': '中文',
+                'en-US': 'English',
+            },
+            github: 'https://github.com/varletjs/varlet',
+            darkMode: true,
+        },
+    },
+    themeKey: 'VARLET_THEME',
+    lightTheme: {
+        'color-body': '#fff',
+        'color-index-page-background': '#f2f2f2',
+        '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-index-page-divider-color': '#ddd',
+        'color-bar': '#fff',
+        'color-sub-bar': '#f5f5f5',
+        'color-text': '#555',
+        'color-sub-text': '#888',
+        'color-border': 'rgba(0, 0, 0, 0.12)',
+        'color-shadow': '#eee',
+        'color-introduce-border': '#2196f3',
+        'color-primary': '#2196f3',
+        'color-link': '#00c48f',
+        'color-type': '#00c48f',
+        'color-progress': '#1d92e9',
+        'color-progress-track': 'transparent',
+        'color-side-bar': '#3a7afe',
+        'color-side-bar-active-background': '#3a7afe1a',
+        'color-app-bar': '#3a7afe',
+        'color-nav-button-hover-background': 'rgba(0, 0, 0, 0.08)',
+        'color-mobile-cell-hover': '#3a7afe',
+        'color-pc-language-active': '#3a7afe',
+        'color-pc-language-active-background': '#edf5ff',
+        'color-pc-github-active-background': '#212121',
+        'color-mobile-language-active': '#3a7afe',
+        'color-mobile-language-active-background': '#edf5ff',
+        'color-hl-background': '#fafafa',
+        'color-hl-code': '#58727e',
+        'color-hl-border': '#f3f3f3',
+        'color-hl-group-a': '#7c7c7c',
+        'color-hl-group-b': '#2196f3',
+        'color-hl-group-c': '#ff9422',
+        'color-hl-group-d': '#58c193',
+        'color-hl-group-e': '#ff9422',
+        'color-hl-group-f': '#ff9422',
+        'color-hl-group-g': '#ff9422',
+        'color-hl-group-h': '#06a6e9',
+        'color-hl-group-i': '#f23733',
+    },
+    darkTheme: {
+        'color-body': '#121212',
+        'color-index-page-background': '#1e1e1e',
+        '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-index-page-divider-color': 'rgba(84, 84, 84, .8)',
+        'color-bar': '#1e1e1e',
+        'color-sub-bar': '#272727',
+        'color-text': '#fff',
+        'color-sub-text': '#aaa',
+        'color-border': '#333',
+        'color-shadow': '#121212',
+        'color-introduce-border': '#555',
+        'color-primary': '#96cbfe',
+        'color-link': '#A8FFC4',
+        'color-type': '#A8FFC4',
+        'color-progress': '#5580f8',
+        'color-progress-track': 'transparent',
+        'color-side-bar': '#4a7afe',
+        'color-side-bar-active-background': '#4a7afe1a',
+        'color-app-bar': '#272727',
+        'color-nav-button-hover-background': 'rgba(255, 255, 255, 0.08)',
+        'color-mobile-cell-hover': '#4a7afe',
+        'color-pc-language-active': '#4a7afe',
+        'color-pc-language-active-background': '#4a7afe20',
+        'color-pc-github-active-background': '#303030',
+        'color-mobile-language-active': '#4a7afe',
+        'color-mobile-language-active-background': '#4a7afe20',
+        'color-hl-background': '#272727',
+        'color-hl-code': '#fff',
+        'color-hl-border': '#272727',
+        'color-hl-group-a': '#7c7c7c',
+        'color-hl-group-b': '#96cbfe',
+        'color-hl-group-c': '#ff7b1e',
+        'color-hl-group-d': '#A8FFC4',
+        'color-hl-group-e': '#ff7b1e',
+        'color-hl-group-f': '#ff7b1e',
+        'color-hl-group-g': '#ff7b1e',
+        'color-hl-group-h': '#14a6e9',
+        'color-hl-group-i': '#ed4648',
+    },
+});