Match-id-bc804e27c47473b985e5ff38051dbe1b463948f8

2023-07-28 16:27:55 +08:00 · 2023-07-28 16:27:55 +08:00 · ffe7783ce1
parent 65df4422f3
commit ffe7783ce1
615 changed files with 43178 additions and 168 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,74 +0,0 @@
-/*
- * Copyright (c) 2020 Huawei Technologies Co.,Ltd.
- *
- * InulaJS is licensed under Mulan PSL v2.
- * You can use this software according to the terms and conditions of the Mulan PSL v2.
- * You may obtain a copy of Mulan PSL v2 at:
- *
- *          http://license.coscl.org.cn/MulanPSL2
- *
- * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
- * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
- * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
- * See the Mulan PSL v2 for more details.
- */
-
-module.exports = {
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'prettier',
-  ],
-  root: true,
-
-  plugins: ['jest', 'no-for-of-loops', 'no-function-declare-after-return', 'react', '@typescript-eslint'],
-
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaVersion: 8,
-    sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true,
-      modules: true,
-      experimentalObjectRestSpread: true,
-    },
-  },
-  env: {
-    browser: true,
-    jest: true,
-    node: true,
-    es6: true,
-  },
-  rules: {
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/explicit-module-boundary-types': 'off',
-    '@typescript-eslint/no-non-null-assertion': 'off',
-    '@typescript-eslint/no-empty-function': 'off',
-    semi: ['warn', 'always'],
-    quotes: ['warn', 'single'],
-    'accessor-pairs': 'off',
-    'brace-style': ['error', '1tbs'],
-    'func-style': ['warn', 'declaration', { allowArrowFunctions: true }],
-    'max-lines-per-function': 'off',
-    'object-curly-newline': 'off',
-    // 尾随逗号
-    'comma-dangle': ['error', 'only-multiline'],
-
-    'no-constant-condition': 'off',
-    'no-for-of-loops/no-for-of-loops': 'error',
-    'no-function-declare-after-return/no-function-declare-after-return': 'error',
-  },
-  globals: {
-    isDev: true,
-    isTest: true,
-  },
-  overrides: [
-    {
-      files: ['scripts/__tests__/**/*.js'],
-      globals: {
-        container: true,
-      },
-    },
-  ],
-};
--- a/.gitignore
+++ b/.gitignore
@ -1,7 +1,5 @@
-node_modules
-build/
+/node_modules
 .idea
 .vscode
 package-lock.json
-libs/**/dist
-scripts/*.ejs
+pnpm-lock.yaml
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1 +0,0 @@
-
--- a/app_define.json
+++ b/app_define.json
@ -1 +0,0 @@
-{"fileVersion":"1","name":"Inula","serviceId":"067e5bef6cd240ae9460229d107a99a6","description":"","version":"1.0.0","type":"microService","processes":{"Inula":{"subscribes":[]}}}
--- a/libs/inula/README.md
+++ b/libs/inula/README.md
@ -1 +0,0 @@
-# `inula`
--- a/libs/inula/package.json
+++ b/libs/inula/package.json
@ -1,17 +0,0 @@
-{
-  "name": "inulajs",
-  "description": "InulaJS is a JavaScript framework library.",
-  "keywords": [
-    "inula"
-  ],
-  "version": "0.0.52",
-  "homepage": "",
-  "bugs": "",
-  "main": "index.js",
-  "repository": {},
-  "engines": {
-    "node": ">=0.10.0"
-  },
-  "dependencies": {},
-  "types": "@types/index.d.ts"
-}
--- a/package.json
+++ b/package.json
@ -3,19 +3,9 @@
  "description": "InulaJS is a JavaScript framework library.",
  "version": "0.0.52",
  "private": true,
-  "workspaces": [
-    "libs/*"
-  ],
  "scripts": {
    "lint": "eslint . --ext .ts --fix",
-    "prettier": "prettier -w libs/**/*.ts",
-    "build": "rollup --config ./scripts/rollup/rollup.config.js",
-    "build:watch": "rollup --watch --config ./scripts/rollup/rollup.config.js",
-    "build:inula3rdLib-dev": "npm run build & node ./scripts/gen3rdLib.js build:inula3rdLib-dev",
-    "build-types": "tsc -p libs/inula/index.ts --emitDeclarationOnly --declaration --declarationDir ./build/inula/@types --skipLibCheck || echo \\\"WARNING: TSC exited with status $?\\\"",
-    "debug-test": "yarn test --debug",
-    "test": "jest --config=jest.config.js",
-    "watch-test": "yarn test --watch --dev"
+    "prettier": "prettier -w libs/**/*.ts"
  },
  "devDependencies": {
    "@babel/core": "7.16.7",
@ -69,6 +59,5 @@
  "engines": {
    "node": ">=10.x",
    "npm": ">=7.x"
-  },
-  "dependencies": {}
+  }
 }
--- a/packages/create-inula/.editorconfig
+++ b/packages/create-inula/.editorconfig
--- a/packages/create-inula/.gitignore
+++ b/packages/create-inula/.gitignore
@ -0,0 +1,5 @@
+/node_modules
+.idea
+.vscode
+package-lock.json
+/build
--- a/packages/create-inula/bin/cli.js
+++ b/packages/create-inula/bin/cli.js
@ -0,0 +1,3 @@
+#! /usr/bin/env node
+
+require('../index.js');
--- a/packages/create-inula/index.js
+++ b/packages/create-inula/index.js
@ -0,0 +1,21 @@
+#! /usr/bin/env node
+
+const yParser = require('yargs-parser');
+const run = require('./lib/run');
+
+// args 为文件名后所有输入
+const args = yParser(process.argv.slice(2));
+
+const name = args._[0] || '';
+
+const { type } = args;
+delete args.type;
+
+(async () => {
+  await run({
+    name,
+    type,
+    args,
+  });
+  process.exit(0);
+})();
--- a/packages/create-inula/lib/BasicGenerator.js
+++ b/packages/create-inula/lib/BasicGenerator.js
@ -0,0 +1,154 @@
+const fs = require('fs');
+const path = require('path');
+const Generator = require('yeoman-generator');
+const { globSync } = require('glob');
+const { statSync } = require('fs');
+const { basename } = require('path');
+const _ = require('lodash');
+_.extend(Generator.prototype, require('yeoman-generator/lib/actions/install'));
+
+function noop() {
+  return true;
+}
+
+class BasicGenerator extends Generator {
+  constructor(opts) {
+    super(opts);
+    this.opts = opts;
+    this.name = basename(opts.env.cwd);
+  }
+
+  isTsFile(f) {
+    return f.endsWith('.ts') || f.endsWith('.tsx') || !!/(tsconfig\.json)/g.test(f);
+  }
+
+  /**
+   * 拷贝文件
+   * @param {string} src 源文件路径
+   * @param {string} dest 目标文件路径
+   * @param {function} filter 过滤函数
+   */
+  copyFile(src, dest, filter = () => true) {
+    if (src.indexOf('package.json') !== -1 && fs.existsSync(dest)) {
+      this.mergePackage(filePath, destFilePath);
+      return;
+    }
+    const readStream = fs.createReadStream(src);
+    const writeStream = fs.createWriteStream(dest);
+    readStream.pipe(writeStream);
+    readStream.on('error', err => console.error(err));
+    writeStream.on('error', err => console.error(err));
+    // writeStream.on('finish', () => console.log(`Copied ${src} to ${dest}`));
+  }
+
+  /**
+   * 拷贝文件夹
+   * @param {string} src 源文件夹路径
+   * @param {string} dest 目标文件夹路径
+   * @param {function} filter 过滤函数
+   */
+  copyFolder(src, dest, filter = () => true) {
+    if (!fs.existsSync(dest)) {
+      fs.mkdirSync(dest, { recursive: true });
+    }
+    const files = fs.readdirSync(src);
+    for (const file of files) {
+      const srcPath = path.join(src, file);
+      const destPath = path.join(dest, file);
+      const stats = fs.statSync(srcPath);
+      if (stats.isFile() && filter(srcPath)) {
+        this.copyFile(srcPath, destPath);
+      } else if (stats.isDirectory()) {
+        this.copyFolder(srcPath, destPath, filter);
+      }
+    }
+  }
+
+  writeFiles(src, dest, { context, filterFiles = noop }) {
+    const files = globSync('**/*', {
+      cwd: src,
+      dot: true,
+    })
+      .filter(filterFiles)
+      .forEach(file => {
+        const filePath = path.join(src, file);
+        if (statSync(filePath).isFile()) {
+          this.fs.copyTpl(filePath, path.join(dest, file), context);
+        }
+      });
+  }
+
+  copyFiles({ src, dest, context, filterFiles = noop }) {
+    const files = globSync('**/*', {
+      cwd: src,
+      dot: true,
+    })
+      .filter(filterFiles)
+      .forEach(file => {
+        const filePath = path.resolve(src, file);
+        const destFilePath = path.resolve(dest, file);
+        if (statSync(filePath).isFile()) {
+          if (file === 'package.json' && fs.existsSync(destFilePath)) {
+            this.mergePackage(filePath, destFilePath);
+          } else {
+            this.fs.copyTpl(filePath, path.resolve(dest, file.replace(/^_/, '.')), context);
+          }
+        }
+      });
+  }
+
+  mergePackage(src, dest) {
+    if (fs.existsSync(dest)) {
+      const existing = JSON.parse(fs.readFileSync(dest, 'utf8'));
+      const newPackage = JSON.parse(fs.readFileSync(src, 'utf8'));
+      const pkg = Object.assign({}, existing, newPackage);
+      fs.writeFileSync(dest, JSON.stringify(pkg, null, 2) + '\n');
+    }
+  }
+
+  traverseDirCapture(dir, dirCallback, fileCallback) {
+    for (const filename of fs.readdirSync(dir)) {
+      const fullpath = path.resolve(dir, filename);
+      if (fs.lstatSync(fullpath).isDirectory()) {
+        dirCallback(fullpath);
+        if (fs.existsSync(fullpath)) {
+          this.traverseDirCapture(fullpath, dirCallback, fileCallback);
+        }
+        continue;
+      }
+      fileCallback(fullpath);
+    }
+  }
+
+  traverseDirBubble(dir, dirCallback, fileCallback) {
+    for (const filename of fs.readdirSync(dir)) {
+      const fullpath = path.resolve(dir, filename);
+      if (fs.lstatSync(fullpath).isDirectory()) {
+        this.traverseDirBubble(fullpath, dirCallback, fileCallback);
+        dirCallback(fullpath);
+        continue;
+      }
+      fileCallback(fullpath);
+    }
+  }
+
+  emptyDir(dir) {
+    if (!fs.existsSync(dir)) {
+      return;
+    }
+
+    this.traverseDirBubble(
+      dir,
+      dir => fs.rmdirSync(dir),
+      file => fs.unlinkSync(file)
+    );
+  }
+
+  prompt(questions) {
+    process.send && process.send({ type: 'prompt' });
+    process.emit('message', { type: 'prompt' });
+    return super.prompt(questions);
+  }
+}
+
+module.exports = BasicGenerator;
--- a/packages/create-inula/lib/generators/InulaJS-antd/index.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/index.js
@ -0,0 +1,30 @@
+const debug = require('debug')('create-umi:generator');
+const BasicGenerator = require('../../BasicGenerator');
+const fs = require('fs');
+
+class Generator extends BasicGenerator {
+  prompting() {
+    return this.prompt([
+      {
+        type: 'list',
+        name: 'bundlerType',
+        message: 'Please select the build type',
+        choices: ['webpack', 'vite'],
+      },
+    ]).then(props => {
+      this.prompts = props;
+      console.log('finish prompting');
+    });
+  }
+  writing() {
+    const src = this.templatePath(this.prompts.bundlerType);
+    const dest = this.destinationPath();
+    this.writeFiles(src, dest, {
+      context: {
+        ...this.prompts,
+      },
+    });
+  }
+}
+
+module.exports = Generator;
--- a/packages/create-inula/lib/generators/InulaJS-antd/meta.json
+++ b/packages/create-inula/lib/generators/InulaJS-antd/meta.json
@ -0,0 +1,3 @@
+{
+  "description": "inula-antd template."
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/.gitignore
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/index.html
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/index.html
@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+    <script type="module" src="/src/admin/main.jsx"></script>
+  </head>
+  <body></body>
+</html>
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/mock/_utils.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/mock/_utils.js
@ -0,0 +1,58 @@
+/**
+ * Query objects that specify keys and values in an array where all values are objects.
+ * @param   {array}         array   An array where all values are objects, like [{key:1},{key:2}].
+ * @param   {string}        key     The key of the object that needs to be queried.
+ * @param   {string}        value   The value of the object that needs to be queried.
+ * @return  {object|undefined}   Return frist object when query success.
+ */
+export function queryArray(array, key, value) {
+  if (!Array.isArray(array)) {
+    return;
+  }
+  return array.filter(_ => _[key] === value);
+}
+
+export function randomNumber(min, max) {
+  return Math.floor(Math.random() * (max - min) + min);
+}
+
+export function randomAvatar() {
+  const avatarList = [
+    'photo-1549492864-2ec7d66ffb04.jpeg',
+    'photo-1480535339474-e083439a320d.jpeg',
+    'photo-1523419409543-a5e549c1faa8.jpeg',
+    'photo-1519648023493-d82b5f8d7b8a.jpeg',
+    'photo-1523307730650-594bc63f9d67.jpeg',
+    'photo-1522962506050-a2f0267e4895.jpeg',
+    'photo-1489779162738-f81aed9b0a25.jpeg',
+    'photo-1534308143481-c55f00be8bd7.jpeg',
+    'photo-1519336555923-59661f41bb45.jpeg',
+    'photo-1551438632-e8c7d9a5d1b7.jpeg',
+    'photo-1525879000488-bff3b1c387cf.jpeg',
+    'photo-1487412720507-e7ab37603c6f.jpeg',
+    'photo-1510227272981-87123e259b17.jpeg',
+  ];
+  return `//image.zuiidea.com/${
+    avatarList[randomNumber(0, avatarList.length - 1)]
+  }?imageView2/1/w/200/h/200/format/webp/q/75|imageslim`;
+}
+
+export const Constant = {
+  ApiPrefix: '/api/v1',
+  NotFound: {
+    message: 'Not Found',
+    documentation_url: '',
+  },
+  Color: {
+    green: '#64ea91',
+    blue: '#8fc9fb',
+    purple: '#d897eb',
+    red: '#f69899',
+    yellow: '#f8c82e',
+    peach: '#f797d6',
+    borderBase: '#e5e5e5',
+    borderSplit: '#f4f4f4',
+    grass: '#d6fbb5',
+    sky: '#c1e0fc',
+  },
+};
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/mock/dashboard.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/mock/dashboard.js
@ -0,0 +1,142 @@
+import { Constant } from './_utils';
+import Mock from 'mockjs';
+
+const { ApiPrefix, Color } = Constant;
+
+const Dashboard = Mock.mock({
+  'sales|8': [
+    {
+      'name|+1': 2008,
+      'Clothes|200-500': 1,
+      'Food|180-400': 1,
+      'Electronics|300-550': 1,
+    },
+  ],
+  cpu: {
+    'usage|50-600': 1,
+    space: 825,
+    'cpu|40-90': 1,
+    'data|20': [
+      {
+        'cpu|20-80': 1,
+      },
+    ],
+  },
+  browser: [
+    {
+      name: 'Google Chrome',
+      percent: 43.3,
+      status: 1,
+    },
+    {
+      name: 'Mozilla Firefox',
+      percent: 33.4,
+      status: 2,
+    },
+    {
+      name: 'Apple Safari',
+      percent: 34.6,
+      status: 3,
+    },
+    {
+      name: 'Internet Explorer',
+      percent: 12.3,
+      status: 4,
+    },
+    {
+      name: 'Opera Mini',
+      percent: 3.3,
+      status: 1,
+    },
+    {
+      name: 'Chromium',
+      percent: 2.53,
+      status: 1,
+    },
+  ],
+  user: {
+    name: 'github',
+    sales: 3241,
+    sold: 3556,
+  },
+  'completed|12': [
+    {
+      'name|+1': 2008,
+      'Task complete|200-1000': 1,
+      'Cards Complete|200-1000': 1,
+    },
+  ],
+  'comments|5': [
+    {
+      name: '@last',
+      'status|1-3': 1,
+      content: '@sentence',
+      avatar() {
+        return Mock.Random.image('48x48', Mock.Random.color(), '#757575', 'png', this.name.substr(0, 1));
+      },
+      date() {
+        return `2016-${Mock.Random.date('MM-dd')} ${Mock.Random.time('HH:mm:ss')}`;
+      },
+    },
+  ],
+  'recentSales|36': [
+    {
+      'id|+1': 1,
+      name: '@last',
+      'status|1-4': 1,
+      date() {
+        return `${Mock.Random.integer(2015, 2016)}-${Mock.Random.date('MM-dd')} ${Mock.Random.time('HH:mm:ss')}`;
+      },
+      'price|10-200.1-2': 1,
+    },
+  ],
+  quote: {
+    name: 'Joho Doe',
+    title: 'Graphic Designer',
+    content:
+      "I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best.",
+    avatar: '//cdn.antd-admin.zuiidea.com/bc442cf0cc6f7940dcc567e465048d1a8d634493198c4-sPx5BR_fw236',
+  },
+  numbers: [
+    {
+      icon: 'pay-circle-o',
+      color: Color.green,
+      title: 'Online Review',
+      number: 2781,
+    },
+    {
+      icon: 'team',
+      color: Color.blue,
+      title: 'New Customers',
+      number: 3241,
+    },
+    {
+      icon: 'message',
+      color: Color.purple,
+      title: 'Active Projects',
+      number: 253,
+    },
+    {
+      icon: 'shopping-cart',
+      color: Color.red,
+      title: 'Referrals',
+      number: 4324,
+    },
+  ],
+});
+
+// module.exports = {
+//   [`get ${ApiPrefix}/dashboard`](req, res) {
+//     res.json(Dashboard);
+//   },
+// };
+
+export default [
+  {
+    url: `${ApiPrefix}/dashboard`,
+    method: 'get',
+    response: () => {
+      return Dashboard;
+    },
+  },
+];
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/mock/route.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/mock/route.js
@ -0,0 +1,41 @@
+import { Constant } from './_utils';
+
+const { ApiPrefix } = Constant;
+
+const database = [
+  {
+    id: '1',
+    icon: 'dashboard',
+    name: 'Dashboard',
+    zh: {
+      name: '仪表盘',
+    },
+    'pt-br': {
+      name: 'Dashboard',
+    },
+    route: '/dashboard',
+  },
+  {
+    id: '2',
+    breadcrumbParentId: '',
+    name: 'User Management',
+    zh: {
+      name: '用户管理',
+    },
+    'pt-br': {
+      name: 'Usuário',
+    },
+    icon: 'user',
+    route: '/user',
+  },
+];
+
+export default [
+  {
+    url: `${ApiPrefix}/routes`,
+    method: 'get',
+    response: () => {
+      return database;
+    },
+  },
+];
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/mock/user.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/mock/user.js
@ -0,0 +1,155 @@
+import { Constant } from './_utils';
+import Mock from 'mockjs';
+import qs from 'qs';
+import { randomAvatar } from './_utils';
+import url from 'url';
+
+const { ApiPrefix } = Constant;
+
+let usersListData = Mock.mock({
+  'data|80-100': [
+    {
+      id: '@id',
+      name: '@name',
+      nickName: '@last',
+      phone: /^1[34578]\d{9}$/,
+      'age|11-99': 1,
+      address: '@county(true)',
+      isMale: '@boolean',
+      email: '@email',
+      createTime: '@datetime',
+      avatar() {
+        return randomAvatar();
+      },
+    },
+  ],
+});
+
+let database = usersListData.data;
+
+const EnumRoleType = {
+  ADMIN: 'admin',
+  DEFAULT: 'guest',
+  DEVELOPER: 'developer',
+};
+
+const userPermission = {
+  DEFAULT: {
+    visit: ['1', '2', '21', '7', '5', '51', '52', '53'],
+    role: EnumRoleType.DEFAULT,
+  },
+  ADMIN: {
+    role: EnumRoleType.ADMIN,
+  },
+  DEVELOPER: {
+    role: EnumRoleType.DEVELOPER,
+  },
+};
+
+const adminUsers = [
+  {
+    id: 0,
+    username: 'admin',
+    password: 'admin',
+    permissions: userPermission.ADMIN,
+    avatar: randomAvatar(),
+  },
+  {
+    id: 1,
+    username: 'guest',
+    password: 'guest',
+    permissions: userPermission.DEFAULT,
+    avatar: randomAvatar(),
+  },
+  {
+    id: 2,
+    username: '吴彦祖',
+    password: '123456',
+    permissions: userPermission.DEVELOPER,
+    avatar: randomAvatar(),
+  },
+];
+
+const queryArray = (array, key, keyAlias = 'key') => {
+  if (!(array instanceof Array)) {
+    return null;
+  }
+  let data;
+
+  for (let item of array) {
+    if (item[keyAlias] === key) {
+      data = item;
+      break;
+    }
+  }
+
+  if (data) {
+    return data;
+  }
+  return null;
+};
+
+const NOTFOUND = {
+  message: 'Not Found',
+  documentation_url: 'http://localhost:8000/request',
+};
+
+export default [
+  {
+    url: `${ApiPrefix}/user`,
+    method: 'get',
+    response: () => {
+      return {
+        success: true,
+        user: adminUsers[0],
+      };
+    },
+  },
+  {
+    url: `${ApiPrefix}/users`,
+    method: 'get',
+    response: req => {
+      const { query } = url.parse(req.url, true);
+      let { pageSize, page, ...other } = query;
+      pageSize = pageSize || 10;
+      page = page || 1;
+
+      let newData = database;
+      for (let key in other) {
+        if ({}.hasOwnProperty.call(other, key)) {
+          newData = newData.filter(item => {
+            if ({}.hasOwnProperty.call(item, key)) {
+              if (key === 'address') {
+                return other[key].every(iitem => item[key].indexOf(iitem) > -1);
+              } else if (key === 'createTime') {
+                const start = new Date(other[key][0]).getTime();
+                const end = new Date(other[key][1]).getTime();
+                const now = new Date(item[key]).getTime();
+
+                if (start && end) {
+                  return now >= start && now <= end;
+                }
+                return true;
+              }
+              return String(item[key]).trim().indexOf(decodeURI(other[key]).trim()) > -1;
+            }
+            return true;
+          });
+        }
+      }
+      return {
+        data: newData.slice((page - 1) * pageSize, page * pageSize),
+        total: newData.length,
+      };
+    },
+  },
+  {
+    url: `${ApiPrefix}/users/delete`,
+    method: 'post',
+    response: req => {
+      const { ids = [] } = req.body;
+      database = database.filter(item => !ids.some(_ => _ === item.id));
+    },
+  },
+  {},
+];
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/package.json
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/package.json
@ -0,0 +1,80 @@
+{
+  "name": "my-react-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.0.1",
+    "@babel/plugin-proposal-export-default-from": "^7.18.6",
+    "@babel/plugin-transform-react-jsx": "^7.21.0",
+    "@babel/runtime": "7.6.2",
+    "inula": "0.0.52",
+    "antd": "^4.0.0",
+    "axios": "^0.21.0",
+    "classnames": "^2.2.6",
+    "echarts": "^5.0.0",
+    "history": "^5.3.0",
+    "lodash": "^4.17.11",
+    "moment": "2.24.0",
+    "nprogress": "^0.2.0",
+    "path-to-regexp": "^6.1.0",
+    "prop-types": "^15.7.0",
+    "qs": "^6.10.0",
+    "react-countup": "^4.2.0",
+    "react-dom": "17.0.2",
+    "react-draft-wysiwyg": "^1.13.0",
+    "react-helmet": "^6.0.0",
+    "react-intl": "^6.3.2",
+    "react-perfect-scrollbar": "^1.5.0",
+    "react-router": "^6.10.0",
+    "react-router-dom": "^6.10.0",
+    "recharts": "^2.0.0",
+    "store": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "7.18.6",
+    "@babel/core": "^7.18.6",
+    "@babel/eslint-parser": "7.18.2",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/plugin-syntax-dynamic-import": "7.8.3",
+    "@babel/plugin-syntax-jsx": "^7.18.6",
+    "@babel/plugin-transform-flow-strip-types": "^7.18.6",
+    "@babel/plugin-transform-runtime": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@babel/runtime": "7.18.6",
+    "@babel/types": "7.18.6",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^3.1.0",
+    "@vitejs/plugin-react-refresh": "^1.3.5",
+    "babel-loader": "8.2.5",
+    "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
+    "cross-env": "7.0.3",
+    "css-loader": "^4.3.0",
+    "eslint": "^7.0.0",
+    "express-interceptor": "1.2.0",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "less": "^4.1.3",
+    "less-vars-to-js": "^1.3.0",
+    "mockjs": "^1.1.0",
+    "prettier": "^2.0.0",
+    "react-router": "5.2.0",
+    "react-router-dom": "5.0.1",
+    "style-loader": "^3.2.2",
+    "ts-loader": "^9.3.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.1",
+    "typescript": "^4.2.3",
+    "url-loader": "^4.1.1",
+    "vite": "^4.2.1",
+    "vite-plugin-mock": "^2.9.6",
+    "vite-plugin-require-transform": "^1.0.12"
+  }
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/america.svg
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/america.svg
@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<rect style="fill:#F0F0F0;" width="512" height="512"/>
+<g>
+	<rect y="64" style="fill:#D80027;" width="512" height="64"/>
+	<rect y="192" style="fill:#D80027;" width="512" height="64"/>
+	<rect y="320" style="fill:#D80027;" width="512" height="64"/>
+	<rect y="448" style="fill:#D80027;" width="512" height="64"/>
+</g>
+<rect style="fill:#2E52B2;" width="256" height="275.69"/>
+<g>
+	<polygon style="fill:#F0F0F0;" points="51.518,115.318 45.924,132.529 27.826,132.529 42.469,143.163 36.875,160.375 
+		51.518,149.741 66.155,160.375 60.56,143.163 75.203,132.529 57.106,132.529 	"/>
+	<polygon style="fill:#F0F0F0;" points="57.106,194.645 51.518,177.434 45.924,194.645 27.826,194.645 42.469,205.279 
+		36.875,222.49 51.518,211.857 66.155,222.49 60.56,205.279 75.203,194.645 	"/>
+	<polygon style="fill:#F0F0F0;" points="51.518,53.202 45.924,70.414 27.826,70.414 42.469,81.047 36.875,98.259 51.518,87.625 
+		66.155,98.259 60.56,81.047 75.203,70.414 57.106,70.414 	"/>
+	<polygon style="fill:#F0F0F0;" points="128.003,115.318 122.409,132.529 104.311,132.529 118.954,143.163 113.36,160.375 
+		128.003,149.741 142.64,160.375 137.045,143.163 151.689,132.529 133.591,132.529 	"/>
+	<polygon style="fill:#F0F0F0;" points="133.591,194.645 128.003,177.434 122.409,194.645 104.311,194.645 118.954,205.279 
+		113.36,222.49 128.003,211.857 142.64,222.49 137.045,205.279 151.689,194.645 	"/>
+	<polygon style="fill:#F0F0F0;" points="210.076,194.645 204.489,177.434 198.894,194.645 180.797,194.645 195.44,205.279 
+		189.845,222.49 204.489,211.857 219.125,222.49 213.531,205.279 228.174,194.645 	"/>
+	<polygon style="fill:#F0F0F0;" points="204.489,115.318 198.894,132.529 180.797,132.529 195.44,143.163 189.845,160.375 
+		204.489,149.741 219.125,160.375 213.531,143.163 228.174,132.529 210.076,132.529 	"/>
+	<polygon style="fill:#F0F0F0;" points="128.003,53.202 122.409,70.414 104.311,70.414 118.954,81.047 113.36,98.259 
+		128.003,87.625 142.64,98.259 137.045,81.047 151.689,70.414 133.591,70.414 	"/>
+	<polygon style="fill:#F0F0F0;" points="204.489,53.202 198.894,70.414 180.797,70.414 195.44,81.047 189.845,98.259 
+		204.489,87.625 219.125,98.259 213.531,81.047 228.174,70.414 210.076,70.414 	"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/china.svg
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/china.svg
@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-49 141 512 512" style="enable-background:new -49 141 512 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#D80027;}
+	.st1{fill:#FFDA44;}
+</style>
+<rect x="-49" y="141" class="st0" width="512" height="512"/>
+
+<g>
+	<polygon class="st1" points="91.1,296.8 113.2,364.8 184.7,364.8 126.9,406.9 149,474.9 91.1,432.9 33.2,474.9 55.4,406.9 
+		-2.5,364.8 69,364.8 	"/>
+	<polygon class="st1" points="254.5,537.5 237.6,516.7 212.6,526.4 227.1,503.9 210.2,483 236.1,489.9 250.7,467.4 252.1,494.2 
+		278.1,501.1 253,510.7 	"/>
+	<polygon class="st1" points="288.1,476.5 296.1,450.9 274.2,435.4 301,435 308.9,409.4 317.6,434.8 344.4,434.5 322.9,450.5 
+		331.5,475.9 309.6,460.4 	"/>
+	<polygon class="st1" points="333.4,328.9 321.6,353 340.8,371.7 314.3,367.9 302.5,391.9 297.9,365.5 271.3,361.7 295.1,349.2 
+		290.5,322.7 309.7,341.4 	"/>
+	<polygon class="st1" points="255.2,255.9 253.2,282.6 278.1,292.7 252,299.1 250.1,325.9 236,303.1 209.9,309.5 227.2,289 
+		213,266.3 237.9,276.4 	"/>
+</g>
+</svg>
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/favicon.ico
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/favicon.ico
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/logo.svg
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/logo.svg
@ -0,0 +1,24 @@
+
+<svg width="169px" height="141px" viewBox="0 0 169 141" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="54.0428975%" y1="4.39752391%" x2="54.0428975%" y2="108.456714%" id="linearGradient-1">
+            <stop stop-color="#29CDFF" offset="0%"></stop>
+            <stop stop-color="#148EFF" offset="62.3089445%"></stop>
+            <stop stop-color="#0A60FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="14.2201464%" x2="50%" y2="113.263844%" id="linearGradient-2">
+            <stop stop-color="#FA816E" offset="0%"></stop>
+            <stop stop-color="#F74A5C" offset="65.9092442%"></stop>
+            <stop stop-color="#F51D2C" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(0.000000, -5.000000)">
+            <rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(83.718923, 75.312358) rotate(-24.000000) translate(-83.718923, -75.312358) " x="68.7189234" y="0.312357954" width="30" height="150" rx="15"></rect>
+            <rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(129.009910, 75.580213) rotate(-24.000000) translate(-129.009910, -75.580213) " x="114.00991" y="0.580212739" width="30" height="150" rx="15"></rect>
+            <circle id="Oval" fill="url(#linearGradient-2)" cx="25" cy="120" r="25"></circle>
+        </g>
+    </g>
+</svg>
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/logo/logo@128.png
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/logo/logo@128.png
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/logo/logo@144.png
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/logo/logo@144.png
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/logo/logo@152.png
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/logo/logo@152.png
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/logo/logo@192.png
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/logo/logo@192.png
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/logo/logo@384.png
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/logo/logo@384.png
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/logo/logo@512.png
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/logo/logo@512.png
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/logo/logo@72.png
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/logo/logo@72.png
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/logo/logo@96.png
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/logo/logo@96.png
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/portugal.svg
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/portugal.svg
@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<rect style="fill:#D80027;" width="512" height="512"/>
+<polygon style="fill:#6DA544;" points="196.641,0 196.641,264.348 196.641,512 0,512 0,0 "/>
+<circle style="fill:#FFDA44;" cx="196.641" cy="256" r="96"/>
+<path style="fill:#D80027;" d="M142.638,208v60c0,29.823,24.178,54,54,54s54-24.178,54-54v-60H142.638z"/>
+<path style="fill:#F0F0F0;" d="M196.638,286c-9.925,0-18-8.075-18-18v-24.001h36V268C214.638,277.925,206.563,286,196.638,286z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/vite.svg
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/assets/react.svg
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/assets/react.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/DropOption/DropOption.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/DropOption/DropOption.js
@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { BarsOutlined, DownOutlined } from '@ant-design/icons';
+import { Dropdown, Button, Menu } from 'antd';
+
+const DropOption = ({ onMenuClick, menuOptions = [], buttonStyle, dropdownProps }) => {
+  const menu = menuOptions.map(item => <Menu.Item key={item.key}>{item.name}</Menu.Item>);
+  return (
+    <Dropdown overlay={<Menu onClick={onMenuClick}>{menu}</Menu>} {...dropdownProps}>
+      <Button style={{ border: 'none', ...buttonStyle }}>
+        <BarsOutlined style={{ marginRight: 2 }} />
+        <DownOutlined />
+      </Button>
+    </Dropdown>
+  );
+};
+
+DropOption.propTypes = {
+  onMenuClick: PropTypes.func,
+  menuOptions: PropTypes.array.isRequired,
+  buttonStyle: PropTypes.object,
+  dropdownProps: PropTypes.object,
+};
+
+export default DropOption;
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/DropOption/package.json
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/DropOption/package.json
@ -0,0 +1,6 @@
+{
+  "name": "DropOption",
+  "version": "0.0.0",
+  "private": true,
+  "main": "DropOption.js"
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Editor/Editor.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Editor/Editor.js
@ -0,0 +1,17 @@
+import React from 'react';
+import { Editor } from 'react-draft-wysiwyg';
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
+import styles from './Editor.module.less';
+
+const DraftEditor = props => {
+  return (
+    <Editor
+      toolbarClassName={styles.toolbar}
+      wrapperClassName={styles.wrapper}
+      editorClassName={styles.editor}
+      {...props}
+    />
+  );
+};
+
+export default DraftEditor;
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Editor/Editor.module.less
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Editor/Editor.module.less
@ -0,0 +1,106 @@
+.wrapper {
+  height: 500px;
+
+  :global {
+    .rdw-dropdownoption-default {
+      padding: 6px;
+    }
+
+    .rdw-dropdown-optionwrapper {
+      box-sizing: content-box;
+      width: 100%;
+      border-radius: 0 0 2px 2px;
+      &:hover {
+        box-shadow: none;
+      }
+    }
+
+    .rdw-inline-wrapper {
+      flex-wrap: wrap;
+      margin-bottom: 0;
+
+      .rdw-option-wrapper {
+        margin-bottom: 6px;
+      }
+    }
+
+    .rdw-option-active {
+      box-shadow: 1px 1px 0 #e8e8e8 inset;
+    }
+
+    .rdw-colorpicker-option {
+      box-shadow: none;
+    }
+
+    .rdw-colorpicker-modal,
+    .rdw-embedded-modal,
+    .rdw-emoji-modal,
+    .rdw-image-modal,
+    .rdw-link-modal {
+      box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
+    }
+
+    .rdw-colorpicker-modal,
+    .rdw-embedded-modal,
+    .rdw-link-modal {
+      height: auto;
+    }
+
+    .rdw-emoji-modal {
+      width: 214px;
+    }
+
+    .rdw-colorpicker-modal {
+      width: auto;
+    }
+
+    .rdw-embedded-modal-btn,
+    .rdw-image-modal-btn,
+    .rdw-link-modal-btn {
+      height: 32px;
+      margin-top: 12px;
+    }
+
+    .rdw-embedded-modal-input,
+    .rdw-embedded-modal-size-input,
+    .rdw-link-modal-input {
+      padding: 2px 6px;
+      height: 32px;
+    }
+
+    .rdw-dropdown-selectedtext {
+      color: #000;
+    }
+
+    .rdw-dropdown-wrapper,
+    .rdw-option-wrapper {
+      min-width: 36px;
+      transition: all 0.2s ease;
+      height: 30px;
+
+      &:active {
+        box-shadow: 1px 1px 0 #e8e8e8 inset;
+      }
+
+      &:hover {
+        box-shadow: 1px 1px 0 #e8e8e8;
+      }
+    }
+
+    .rdw-dropdown-wrapper {
+      min-width: 60px;
+    }
+
+    .rdw-editor-main {
+      box-sizing: border-box;
+    }
+  }
+
+  .editor {
+    border: 1px solid #f1f1f1;
+    padding: 5px;
+    border-radius: 2px;
+    height: auto;
+    min-height: 200px;
+  }
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Editor/package.json
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Editor/package.json
@ -0,0 +1,6 @@
+{
+  "name": "Editor",
+  "version": "0.0.0",
+  "private": true,
+  "main": "Editor.js"
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Ellipsis/index.d.ts
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Ellipsis/index.d.ts
@ -0,0 +1,21 @@
+import React from 'react';
+import { TooltipProps } from 'antd/lib/tooltip';
+
+export interface EllipsisTooltipProps extends TooltipProps {
+  title?: undefined;
+  overlayStyle?: undefined;
+}
+
+export interface EllipsisProps {
+  tooltip?: boolean | EllipsisTooltipProps;
+  length?: number;
+  lines?: number;
+  style?: React.CSSProperties;
+  className?: string;
+  fullWidthRecognition?: boolean;
+}
+
+export function getStrFullLength(str: string): number;
+export function cutStrByFullLength(str: string, maxLength: number): string;
+
+export default class Ellipsis extends React.Component<EllipsisProps, any> {}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Ellipsis/index.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Ellipsis/index.js
@ -0,0 +1,262 @@
+import React, { Component } from 'react';
+import { Tooltip } from 'antd';
+import classNames from 'classnames';
+import styles from './index.module.less';
+
+/* eslint react/no-did-mount-set-state: 0 */
+/* eslint no-param-reassign: 0 */
+
+const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined;
+
+const TooltipOverlayStyle = {
+  overflowWrap: 'break-word',
+  wordWrap: 'break-word',
+};
+
+export const getStrFullLength = (str = '') =>
+  str.split('').reduce((pre, cur) => {
+    const charCode = cur.charCodeAt(0);
+    if (charCode >= 0 && charCode <= 128) {
+      return pre + 1;
+    }
+    return pre + 2;
+  }, 0);
+
+export const cutStrByFullLength = (str = '', maxLength) => {
+  let showLength = 0;
+  return str.split('').reduce((pre, cur) => {
+    const charCode = cur.charCodeAt(0);
+    if (charCode >= 0 && charCode <= 128) {
+      showLength += 1;
+    } else {
+      showLength += 2;
+    }
+    if (showLength <= maxLength) {
+      return pre + cur;
+    }
+    return pre;
+  }, '');
+};
+
+const getTooltip = ({ tooltip, overlayStyle, title, children }) => {
+  if (tooltip) {
+    const props = tooltip === true ? { overlayStyle, title } : { ...tooltip, overlayStyle, title };
+    return <Tooltip {...props}>{children}</Tooltip>;
+  }
+  return children;
+};
+
+const EllipsisText = ({ text, length, tooltip, fullWidthRecognition, ...other }) => {
+  if (typeof text !== 'string') {
+    throw new Error('Ellipsis children must be string.');
+  }
+  const textLength = fullWidthRecognition ? getStrFullLength(text) : text.length;
+  if (textLength <= length || length < 0) {
+    return <span {...other}>{text}</span>;
+  }
+  const tail = '...';
+  let displayText;
+  if (length - tail.length <= 0) {
+    displayText = '';
+  } else {
+    displayText = fullWidthRecognition ? cutStrByFullLength(text, length) : text.slice(0, length);
+  }
+
+  const spanAttrs = tooltip ? {} : { ...other };
+  return getTooltip({
+    tooltip,
+    overlayStyle: TooltipOverlayStyle,
+    title: text,
+    children: (
+      <span {...spanAttrs}>
+        {displayText}
+        {tail}
+      </span>
+    ),
+  });
+};
+
+export default class Ellipsis extends Component {
+  state = {
+    text: '',
+    targetCount: 0,
+  };
+
+  componentDidMount() {
+    if (this.node) {
+      this.computeLine();
+    }
+  }
+
+  componentDidUpdate(perProps) {
+    const { lines } = this.props;
+    if (lines !== perProps.lines) {
+      this.computeLine();
+    }
+  }
+
+  computeLine = () => {
+    const { lines } = this.props;
+    if (lines && !isSupportLineClamp) {
+      const text = this.shadowChildren.innerText || this.shadowChildren.textContent;
+      const lineHeight = parseInt(getComputedStyle(this.root).lineHeight, 10);
+      const targetHeight = lines * lineHeight;
+      this.content.style.height = `${targetHeight}px`;
+      const totalHeight = this.shadowChildren.offsetHeight;
+      const shadowNode = this.shadow.firstChild;
+
+      if (totalHeight <= targetHeight) {
+        this.setState({
+          text,
+          targetCount: text.length,
+        });
+        return;
+      }
+
+      // bisection
+      const len = text.length;
+      const mid = Math.ceil(len / 2);
+
+      const count = this.bisection(targetHeight, mid, 0, len, text, shadowNode);
+
+      this.setState({
+        text,
+        targetCount: count,
+      });
+    }
+  };
+
+  bisection = (th, m, b, e, text, shadowNode) => {
+    const suffix = '...';
+    let mid = m;
+    let end = e;
+    let begin = b;
+    shadowNode.innerHTML = text.substring(0, mid) + suffix;
+    let sh = shadowNode.offsetHeight;
+
+    if (sh <= th) {
+      shadowNode.innerHTML = text.substring(0, mid + 1) + suffix;
+      sh = shadowNode.offsetHeight;
+      if (sh > th || mid === begin) {
+        return mid;
+      }
+      begin = mid;
+      if (end - begin === 1) {
+        mid = 1 + begin;
+      } else {
+        mid = Math.floor((end - begin) / 2) + begin;
+      }
+      return this.bisection(th, mid, begin, end, text, shadowNode);
+    }
+    if (mid - 1 < 0) {
+      return mid;
+    }
+    shadowNode.innerHTML = text.substring(0, mid - 1) + suffix;
+    sh = shadowNode.offsetHeight;
+    if (sh <= th) {
+      return mid - 1;
+    }
+    end = mid;
+    mid = Math.floor((end - begin) / 2) + begin;
+    return this.bisection(th, mid, begin, end, text, shadowNode);
+  };
+
+  handleRoot = n => {
+    this.root = n;
+  };
+
+  handleContent = n => {
+    this.content = n;
+  };
+
+  handleNode = n => {
+    this.node = n;
+  };
+
+  handleShadow = n => {
+    this.shadow = n;
+  };
+
+  handleShadowChildren = n => {
+    this.shadowChildren = n;
+  };
+
+  render() {
+    const { text, targetCount } = this.state;
+    const { children, lines, length, className, tooltip, fullWidthRecognition, ...restProps } = this.props;
+
+    const cls = classNames(styles.ellipsis, className, {
+      [styles.lines]: lines && !isSupportLineClamp,
+      [styles.lineClamp]: lines && isSupportLineClamp,
+    });
+
+    if (!lines && !length) {
+      return (
+        <span className={cls} {...restProps}>
+          {children}
+        </span>
+      );
+    }
+
+    // length
+    if (!lines) {
+      return (
+        <EllipsisText
+          className={cls}
+          length={length}
+          text={children || ''}
+          tooltip={tooltip}
+          fullWidthRecognition={fullWidthRecognition}
+          {...restProps}
+        />
+      );
+    }
+
+    const id = `antd-pro-ellipsis-${`${new Date().getTime()}${Math.floor(Math.random() * 100)}`}`;
+
+    // support document.body.style.webkitLineClamp
+    if (isSupportLineClamp) {
+      const style = `#${id}{-webkit-line-clamp:${lines};-webkit-box-orient: vertical;}`;
+
+      const node = (
+        <div id={id} className={cls} {...restProps}>
+          <style>{style}</style>
+          {children}
+        </div>
+      );
+
+      return getTooltip({
+        tooltip,
+        overlayStyle: TooltipOverlayStyle,
+        title: children,
+        children: node,
+      });
+    }
+
+    const childNode = (
+      <span ref={this.handleNode}>
+        {targetCount > 0 && text.substring(0, targetCount)}
+        {targetCount > 0 && targetCount < text.length && '...'}
+      </span>
+    );
+
+    return (
+      <div {...restProps} ref={this.handleRoot} className={cls}>
+        <div ref={this.handleContent}>
+          {getTooltip({
+            tooltip,
+            overlayStyle: TooltipOverlayStyle,
+            title: text,
+            children: childNode,
+          })}
+          <div className={styles.shadow} ref={this.handleShadowChildren}>
+            {children}
+          </div>
+          <div className={styles.shadow} ref={this.handleShadow}>
+            <span>{text}</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Ellipsis/index.md
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Ellipsis/index.md
@ -0,0 +1,17 @@
+---
+title: Ellipsis
+subtitle: 文本自动省略号
+cols: 1
+order: 10
+---
+
+文本过长自动处理省略号，支持按照文本长度和最大行数两种方式截取。
+
+## API
+
+| 参数                 | 说明                                             | 类型    | 默认值 |
+| -------------------- | ------------------------------------------------ | ------- | ------ |
+| tooltip              | 移动到文本展示完整内容的提示                     | boolean | -      |
+| length               | 在按照长度截取下的文本最大字符数，超过则截取省略 | number  | -      |
+| lines                | 在按照行数截取下最大的行数，超过则截取省略       | number  | `1`    |
+| fullWidthRecognition | 是否将全角字符的长度视为 2 来计算字符串长度      | boolean | -      |
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Ellipsis/index.module.less
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Ellipsis/index.module.less
@ -0,0 +1,24 @@
+.ellipsis {
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  word-break: break-all;
+}
+
+.lines {
+  position: relative;
+  .shadow {
+    position: absolute;
+    z-index: -999;
+    display: block;
+    color: transparent;
+    opacity: 0;
+  }
+}
+
+.lineClamp {
+  position: relative;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Ellipsis/index.test.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Ellipsis/index.test.js
@ -0,0 +1,13 @@
+import { getStrFullLength, cutStrByFullLength } from './index';
+
+describe('test calculateShowLength', () => {
+  it('get full length', () => {
+    expect(getStrFullLength('一二，a,')).toEqual(8);
+  });
+  it('cut str by full length', () => {
+    expect(cutStrByFullLength('一二，a,', 7)).toEqual('一二，a');
+  });
+  it('cut str when length small', () => {
+    expect(cutStrByFullLength('一22三', 5)).toEqual('一22');
+  });
+});
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/FilterItem/FilterItem.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/FilterItem/FilterItem.js
@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './FilterItem.module.less';
+
+const FilterItem = ({ label = '', children }) => {
+  const labelArray = label.split('');
+  return (
+    <div className={styles.filterItem}>
+      {labelArray.length > 0 && (
+        <div className={styles.labelWrap}>
+          {labelArray.map((item, index) => (
+            <span className="labelText" key={index}>
+              {item}
+            </span>
+          ))}
+        </div>
+      )}
+      <div className={styles.item}>{children}</div>
+    </div>
+  );
+};
+
+FilterItem.propTypes = {
+  label: PropTypes.string,
+  children: PropTypes.element.isRequired,
+};
+
+export default FilterItem;
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/FilterItem/FilterItem.module.less
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/FilterItem/FilterItem.module.less
@ -0,0 +1,17 @@
+.filterItem {
+  display: flex;
+  justify-content: space-between;
+
+  .labelWrap {
+    width: 64px;
+    line-height: 28px;
+    margin-right: 12px;
+    justify-content: space-between;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .item {
+    flex: 1;
+  }
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/FilterItem/package.json
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/FilterItem/package.json
@ -0,0 +1,6 @@
+{
+  "name": "FilterItem",
+  "version": "0.0.0",
+  "private": true,
+  "main": "FilterItem.js"
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/GlobalFooter/index.d.ts
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/GlobalFooter/index.d.ts
@ -0,0 +1,14 @@
+import React from 'react';
+export interface GlobalFooterProps {
+  links?: Array<{
+    key?: string;
+    title: React.ReactNode;
+    href: string;
+    blankTarget?: boolean;
+  }>;
+  copyright?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export default class GlobalFooter extends React.Component<GlobalFooterProps, any> {}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/GlobalFooter/index.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/GlobalFooter/index.js
@ -0,0 +1,23 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.module.less';
+
+const GlobalFooter = ({ className, links, copyright }) => {
+  const clsString = classNames(styles.globalFooter, className);
+  return (
+    <footer className={clsString}>
+      {links && (
+        <div className={styles.links}>
+          {links.map(link => (
+            <a key={link.key} title={link.key} target={link.blankTarget ? '_blank' : '_self'} href={link.href}>
+              {link.title}
+            </a>
+          ))}
+        </div>
+      )}
+      {copyright && <div className={styles.copyright}>{copyright}</div>}
+    </footer>
+  );
+};
+
+export default GlobalFooter;
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/GlobalFooter/index.md
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/GlobalFooter/index.md
@ -0,0 +1,15 @@
+---
+title: GlobalFooter
+subtitle: 全局页脚
+cols: 1
+order: 7
+---
+
+页脚属于全局导航的一部分，作为对顶部导航的补充，通过传递数据控制展示内容。
+
+## API
+
+| 参数      | 说明     | 类型                                                             | 默认值 |
+| --------- | -------- | ---------------------------------------------------------------- | ------ |
+| links     | 链接数据 | array<{ title: ReactNode, href: string, blankTarget?: boolean }> | -      |
+| copyright | 版权信息 | ReactNode                                                        | -      |
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/GlobalFooter/index.module.less
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/GlobalFooter/index.module.less
@ -0,0 +1,29 @@
+@import '../../../../node_modules/antd/lib/style/themes/default.less';
+
+.globalFooter {
+  margin: 48px 0 24px 0;
+  padding: 0 16px;
+  text-align: center;
+
+  .links {
+    margin-bottom: 8px;
+
+    a {
+      color: @text-color-secondary;
+      transition: all 0.3s;
+
+      &:not(:last-child) {
+        margin-right: 40px;
+      }
+
+      &:hover {
+        color: @text-color;
+      }
+    }
+  }
+
+  .copyright {
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+  }
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Layout/Bread.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Layout/Bread.js
@ -0,0 +1,51 @@
+import React, { Fragment } from 'react';
+import { Breadcrumb } from 'antd';
+import { Link } from 'react-router-dom';
+import { t } from 'utils/intl';
+import iconMap from 'utils/iconMap';
+
+import { pathToRegexp } from 'path-to-regexp';
+import { queryAncestors } from 'utils';
+import styles from './Bread.module.less';
+import { withRouter } from 'react-router-dom';
+
+function Bread({ routeList, history }) {
+  const generateBreadcrumbs = paths => {
+    return paths.map((item, key) => {
+      const content = item && (
+        <Fragment>
+          {item.icon && <span style={{ marginRight: 4 }}>{iconMap[item.icon]}</span>}
+          {item.name}
+        </Fragment>
+      );
+
+      return (
+        item && (
+          <Breadcrumb.Item key={key}>
+            {paths.length - 1 !== key ? <Link to={item.route || '#'}>{content}</Link> : content}
+          </Breadcrumb.Item>
+        )
+      );
+    });
+  };
+
+  // Find a route that matches the pathname.
+  const currentRoute = routeList.find(_ => _.route && pathToRegexp(_.route).exec(history.location.pathname));
+
+  // Find the breadcrumb navigation of the current route match and all its ancestors.
+  const paths =
+    history.location.pathname === '/'
+      ? [routeList[0]]
+      : currentRoute
+      ? queryAncestors(routeList, currentRoute, 'breadcrumbParentId').reverse()
+      : [
+          {
+            id: 404,
+            name: t`Not Found`,
+          },
+        ];
+
+  return <Breadcrumb className={styles.bread}>{generateBreadcrumbs(paths)}</Breadcrumb>;
+}
+
+export default withRouter(Bread);
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Layout/Bread.module.less
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Layout/Bread.module.less
@ -0,0 +1,16 @@
+.bread {
+  margin-bottom: 24px !important;
+
+  :global {
+    .ant-breadcrumb {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+@media (max-width: 767px) {
+  .bread {
+    margin-bottom: 12px !important;
+  }
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Layout/Header.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Layout/Header.js
@ -0,0 +1,116 @@
+import React, { Fragment } from 'react';
+import { Menu, Layout, Avatar, Popover, List } from 'antd';
+import { Ellipsis } from 'components';
+import { RightOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import { Trans } from 'utils/intl';
+import { getLocale, setLocale } from 'utils';
+import moment from 'moment';
+import classnames from 'classnames';
+import config from 'config';
+import styles from './Header.module.less';
+
+const { SubMenu } = Menu;
+
+function Header({ fixed, avatar, username, collapsed, notifications, onCollapseChange, onAllNotificationsRead }) {
+  const rightContent = [
+    <Menu key="user" mode="horizontal">
+      <SubMenu
+        title={
+          <Fragment>
+            <span style={{ color: '#999', marginRight: 4 }}>
+              <Trans>Hi,</Trans>
+            </span>
+            <span>{username}</span>
+            <Avatar style={{ marginLeft: 8 }} src={avatar} />
+          </Fragment>
+        }
+      ></SubMenu>
+    </Menu>,
+  ];
+
+  if (config.i18n) {
+    const { languages } = config.i18n;
+    const language = getLocale();
+    const currentLanguage = languages.find(item => item.key === language);
+
+    rightContent.unshift(
+      <Menu
+        key="language"
+        selectedKeys={[currentLanguage.key]}
+        onClick={data => {
+          setLocale(data.key);
+        }}
+        mode="horizontal"
+      >
+        <SubMenu title={<Avatar size="small" src={currentLanguage.flag} />}>
+          {languages.map(item => (
+            <Menu.Item key={item.key}>
+              <Avatar size="small" style={{ marginRight: 8 }} src={item.flag} />
+              {item.title}
+            </Menu.Item>
+          ))}
+        </SubMenu>
+      </Menu>
+    );
+  }
+
+  rightContent.unshift(
+    <Popover
+      placement="bottomRight"
+      trigger="click"
+      key="notifications"
+      overlayClassName={styles.notificationPopover}
+      getPopupContainer={() => document.querySelector('#primaryLayout')}
+      content={
+        <div className={styles.notification}>
+          <List
+            itemLayout="horizontal"
+            dataSource={notifications}
+            locale={{
+              emptyText: <Trans>You have viewed all notifications.</Trans>,
+            }}
+            renderItem={item => (
+              <List.Item className={styles.notificationItem}>
+                <List.Item.Meta
+                  title={
+                    <Ellipsis tooltip lines={1}>
+                      {item.title}
+                    </Ellipsis>
+                  }
+                  description={moment(item.date).fromNow()}
+                />
+                <RightOutlined style={{ fontSize: 10, color: '#ccc' }} />
+              </List.Item>
+            )}
+          />
+          {notifications.length ? (
+            <div onClick={onAllNotificationsRead} className={styles.clearButton}>
+              <Trans>Clear notifications</Trans>
+            </div>
+          ) : null}
+        </div>
+      }
+    >
+      {/* <Badge count={notifications.length} dot offset={[-10, 10]} className={styles.iconButton}>
+        <BellOutlined className={styles.iconFont} />
+      </Badge> */}
+    </Popover>
+  );
+
+  return (
+    <Layout.Header
+      className={classnames(styles.header, {
+        [styles.fixed]: fixed,
+        [styles.collapsed]: collapsed,
+      })}
+      id="layoutHeader"
+    >
+      <div className={styles.button} onClick={onCollapseChange.bind(this, !collapsed)}>
+        {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+      </div>
+      <div className={styles.rightContainer}>{rightContent}</div>
+    </Layout.Header>
+  );
+}
+
+export default Header;
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Layout/Header.module.less
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Layout/Header.module.less
@ -0,0 +1,154 @@
+@import '../../themes/vars.less';
+
+.header {
+  padding: 0 !important;
+  box-shadow: @shadow-2;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  height: 72px !important;
+  z-index: 9;
+  align-items: center;
+  background-color: #fff !important;
+
+  &.fixed {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: ~'calc(100% - 256px)';
+    z-index: 29;
+    transition: width 0.2s;
+
+    &.collapsed {
+      width: ~'calc(100% - 80px)';
+    }
+  }
+
+  :global {
+    .ant-menu-submenu-title {
+      height: 72px;
+    }
+
+    .ant-menu-horizontal {
+      line-height: 72px;
+
+      & > .ant-menu-submenu:hover {
+        color: @primary-color;
+        background-color: @hover-color;
+      }
+    }
+
+    .ant-menu {
+      border-bottom: none;
+      height: 72px;
+    }
+
+    .ant-menu-horizontal > .ant-menu-submenu {
+      top: 0;
+      margin-top: 0;
+    }
+
+    .ant-menu-horizontal > .ant-menu-item,
+    .ant-menu-horizontal > .ant-menu-submenu {
+      border-bottom: none;
+    }
+
+    .ant-menu-horizontal > .ant-menu-item-active,
+    .ant-menu-horizontal > .ant-menu-item-open,
+    .ant-menu-horizontal > .ant-menu-item-selected,
+    .ant-menu-horizontal > .ant-menu-item:hover,
+    .ant-menu-horizontal > .ant-menu-submenu-active,
+    .ant-menu-horizontal > .ant-menu-submenu-open,
+    .ant-menu-horizontal > .ant-menu-submenu-selected,
+    .ant-menu-horizontal > .ant-menu-submenu:hover {
+      border-bottom: none;
+    }
+  }
+
+  .rightContainer {
+    display: flex;
+    align-items: center;
+  }
+
+  .button {
+    width: 72px;
+    height: 72px;
+    line-height: 72px;
+    text-align: center;
+    font-size: 18px;
+    cursor: pointer;
+    transition: @transition-ease-in;
+
+    &:hover {
+      color: @primary-color;
+      background-color: @hover-color;
+    }
+  }
+}
+
+.iconButton {
+  width: 48px;
+  height: 48px;
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+  border-radius: 24px;
+  cursor: pointer;
+  .background-hover();
+
+  &:hover {
+    .iconFont {
+      color: @primary-color;
+    }
+  }
+
+  & + .iconButton {
+    margin-left: 8px;
+  }
+
+  .iconFont {
+    color: #b2b0c7;
+    font-size: 24px;
+  }
+}
+
+.notification {
+  padding: 24px 0;
+  width: 320px;
+  .notificationItem {
+    transition: all 0.3s;
+    padding: 12px 24px;
+    cursor: pointer;
+    &:hover {
+      background-color: @hover-color;
+    }
+  }
+  .clearButton {
+    text-align: center;
+    height: 48px;
+    line-height: 48px;
+    cursor: pointer;
+    .background-hover();
+  }
+}
+
+.notificationPopover {
+  :global {
+    .ant-popover-inner-content {
+      padding: 0;
+    }
+    .ant-popover-arrow {
+      display: none;
+    }
+    .ant-list-item-content {
+      flex: 0;
+      margin-left: 16px;
+    }
+  }
+}
+
+@media (max-width: 767px) {
+  .header {
+    width: 100% !important;
+  }
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Layout/Sider.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Layout/Sider.js
@ -0,0 +1,64 @@
+import React from 'react';
+import { Switch, Layout } from 'antd';
+import { t } from 'utils/intl';
+import { Trans } from 'utils/intl';
+import { BulbOutlined } from '@ant-design/icons';
+import ScrollBar from '../ScrollBar';
+import config from 'utils/config';
+import SiderMenu from './SiderMenu';
+import styles from './Sider.module.less';
+
+function Sider({ menus, theme, isMobile, collapsed, onThemeChange, onCollapseChange }) {
+  return (
+    <Layout.Sider
+      width={256}
+      theme={theme}
+      breakpoint="lg"
+      trigger={null}
+      collapsible
+      collapsed={collapsed}
+      onBreakpoint={!isMobile && onCollapseChange}
+      className={styles.sider}
+    >
+      <div className={styles.brand}>
+        <div className={styles.logo}>
+          <img alt="logo" src={config.logoPath} />
+          {!collapsed && <h1>{config.siteName}</h1>}
+        </div>
+      </div>
+
+      <div className={styles.menuContainer}>
+        <ScrollBar
+          options={{
+            // Disabled horizontal scrolling, https://github.com/utatti/perfect-scrollbar#options
+            suppressScrollX: true,
+          }}
+        >
+          <SiderMenu
+            menus={menus}
+            theme={theme}
+            isMobile={isMobile}
+            collapsed={collapsed}
+            onCollapseChange={onCollapseChange}
+          />
+        </ScrollBar>
+      </div>
+      {!collapsed && (
+        <div className={styles.switchTheme}>
+          <span className={theme === 'dark' ? styles.darkTheme : ''}>
+            <BulbOutlined />
+            <Trans>Switch Theme</Trans>
+          </span>
+          <Switch
+            onChange={onThemeChange.bind(this, theme === 'dark' ? 'light' : 'dark')}
+            defaultChecked={theme === 'dark'}
+            checkedChildren={t`Dark`}
+            unCheckedChildren={t`Light`}
+          />
+        </div>
+      )}
+    </Layout.Sider>
+  );
+}
+
+export default Sider;
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Layout/Sider.module.less
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Layout/Sider.module.less
@ -0,0 +1,114 @@
+@import '../../themes/vars.less';
+
+.sider {
+  box-shadow: fade(@primary-color, 10%) 0 0 28px 0;
+  z-index: 10;
+  :global {
+    .ant-layout-sider-children {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+  }
+}
+
+.brand {
+  z-index: 1;
+  height: 72px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 24px;
+  box-shadow: 0 1px 9px -3px rgba(0, 0, 0, 0.2);
+  .logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      width: 36px;
+      margin-right: 8px;
+    }
+
+    h1 {
+      vertical-align: text-bottom;
+      font-size: 16px;
+      text-transform: uppercase;
+      display: inline-block;
+      font-weight: 700;
+      color: @primary-color;
+      white-space: nowrap;
+      margin-bottom: 0;
+      .text-gradient();
+
+      :local {
+        animation: fadeRightIn 300ms @ease-in-out;
+        animation-fill-mode: both;
+      }
+    }
+  }
+}
+
+.menuContainer {
+  height: ~'calc(100vh - 120px)';
+  overflow-x: hidden;
+  flex: 1;
+  padding: 24px 0;
+
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+
+  &:hover {
+    &::-webkit-scrollbar-thumb {
+      background-color: rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  :global {
+    .ant-menu-inline {
+      border-right: none;
+    }
+  }
+}
+
+.darkTheme {
+  color: rgb(102, 102, 102);
+}
+
+.switchTheme {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  overflow: hidden;
+  transition: all 0.3s;
+
+  span {
+    white-space: nowrap;
+    overflow: hidden;
+    font-size: 12px;
+  }
+
+  :global {
+    .anticon {
+      min-width: 14px;
+      margin-right: 4px;
+      font-size: 14px;
+    }
+  }
+}
+
+@keyframes fadeLeftIn {
+  0% {
+    transform: translateX(5px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Layout/SiderMenu.tsx
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Layout/SiderMenu.tsx
@ -0,0 +1,97 @@
+import React, { useState, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Menu } from 'antd';
+import { NavLink } from 'react-router-dom';
+import { pathToRegexp } from 'path-to-regexp';
+import { arrayToTree, queryAncestors } from '../../utils';
+import iconMap from '../../utils/iconMap';
+import store from 'store';
+import { getStore } from '../../models/app-model';
+import { withRouter } from 'react-router-dom';
+
+const { SubMenu } = Menu;
+
+function SiderMenu({ theme, menus, history, isMobile, onCollapseChange }) {
+  const st = getStore();
+
+  const [openKeys, setOpenKeys] = useState(store.get('openKeys') || []);
+
+  const onOpenChange = openKeys => {
+    const rootSubmenuKeys = menus.filter(_ => !_.menuParentId).map(_ => _.id);
+
+    const latestOpenKey = openKeys.find(key => openKeys.indexOf(key) === -1);
+
+    let newOpenKeys = openKeys;
+    if (rootSubmenuKeys.indexOf(latestOpenKey) !== -1) {
+      newOpenKeys = latestOpenKey ? [latestOpenKey] : [];
+    }
+
+    setOpenKeys(newOpenKeys);
+
+    store.set('openKeys', newOpenKeys);
+  };
+
+  const generateMenus = data => {
+    return data.map(item => {
+      if (item.children) {
+        return (
+          <SubMenu
+            key={item.id}
+            title={
+              <Fragment>
+                {item.icon && iconMap[item.icon]}
+                <span>{item.name}</span>
+              </Fragment>
+            }
+          >
+            {generateMenus(item.children)}
+          </SubMenu>
+        );
+      }
+      return (
+        <Menu.Item key={item.id}>
+          <NavLink to={item.route || '#'}>
+            {item.icon && iconMap[item.icon]}
+            <span>{item.name}</span>
+          </NavLink>
+        </Menu.Item>
+      );
+    });
+  };
+
+  // Generating tree-structured data for menu content.
+  const menuTree = arrayToTree(menus, 'id', 'menuParentId');
+
+  // Find a menu that matches the pathname.
+  const currentMenu = menus.find(_ => _.route && pathToRegexp(_.route).exec(history.location.pathname));
+
+  // Find the key that should be selected according to the current menu.
+  const selectedKeys = currentMenu ? queryAncestors(menus, currentMenu, 'menuParentId').map(_ => _.id) : [];
+
+  const menuProps = st.collapsed
+    ? {}
+    : {
+        openKeys: openKeys,
+      };
+
+  return (
+    <Menu
+      mode="inline"
+      theme={theme}
+      onOpenChange={onOpenChange}
+      selectedKeys={selectedKeys}
+      onClick={
+        isMobile
+          ? () => {
+              onCollapseChange(true);
+            }
+          : undefined
+      }
+      {...menuProps}
+    >
+      {generateMenus(menuTree)}
+    </Menu>
+  );
+}
+
+export default withRouter(SiderMenu);
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Layout/index.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Layout/index.js
@ -0,0 +1,6 @@
+import Header from './Header';
+import Menu from './SiderMenu';
+import Bread from './Bread';
+import Sider from './Sider';
+
+export { Header, Menu, Bread, Sider };
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Loader/Loader.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Loader/Loader.js
@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './Loader.module.less';
+
+const Loader = ({ spinning = false, fullScreen }) => {
+  return (
+    <div
+      className={classNames(styles.loader, {
+        [styles.hidden]: !spinning,
+        [styles.fullScreen]: fullScreen,
+      })}
+    >
+      <div className={styles.warpper}>
+        <div className={styles.inner} />
+        <div className={styles.text}>LOADING</div>
+      </div>
+    </div>
+  );
+};
+
+Loader.propTypes = {
+  spinning: PropTypes.bool,
+  fullScreen: PropTypes.bool,
+};
+
+export default Loader;
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Loader/Loader.module.less
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Loader/Loader.module.less
@ -0,0 +1,69 @@
+.loader {
+  background-color: #fff;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 1;
+  text-align: center;
+
+  &.fullScreen {
+    position: fixed;
+  }
+
+  .warpper {
+    width: 100px;
+    height: 100px;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+
+  .inner {
+    width: 40px;
+    height: 40px;
+    margin: 0 auto;
+    text-indent: -12345px;
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    border-right: 1px solid rgba(0, 0, 0, 0.08);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    border-left: 1px solid rgba(0, 0, 0, 0.7);
+    border-radius: 50%;
+    z-index: 100001;
+
+    :local {
+      animation: spinner 600ms infinite linear;
+    }
+  }
+
+  .text {
+    width: 100px;
+    height: 20px;
+    text-align: center;
+    font-size: 12px;
+    letter-spacing: 4px;
+    color: #000;
+  }
+
+  &.hidden {
+    z-index: -1;
+    opacity: 0;
+    transition:
+      opacity 1s ease 0.5s,
+      z-index 0.1s ease 1.5s;
+  }
+}
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Loader/package.json
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Loader/package.json
@ -0,0 +1,6 @@
+{
+  "name": "Loader",
+  "version": "0.0.0",
+  "private": true,
+  "main": "Loader.js"
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Page/Page.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Page/Page.js
@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Loader from '../Loader';
+import styles from './Page.module.less';
+
+export default class Page extends Component {
+  render() {
+    const { className, children, loading = false, inner = false } = this.props;
+    const loadingStyle = {
+      height: 'calc(100vh - 184px)',
+      overflow: 'hidden',
+    };
+    return (
+      <div
+        className={classnames(className, {
+          [styles.contentInner]: inner,
+        })}
+        style={loading ? loadingStyle : null}
+      >
+        {loading ? <Loader spinning /> : ''}
+        {children}
+      </div>
+    );
+  }
+}
+
+Page.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+  loading: PropTypes.bool,
+  inner: PropTypes.bool,
+};
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Page/Page.module.less
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Page/Page.module.less
@ -0,0 +1,16 @@
+@import '../../themes/vars.less';
+
+.contentInner {
+  background: #fff;
+  padding: 24px;
+  box-shadow: @shadow-1;
+  min-height: ~'calc(100vh - 230px)';
+  position: relative;
+}
+
+@media (max-width: 767px) {
+  .contentInner {
+    padding: 12px;
+    min-height: ~'calc(100vh - 160px)';
+  }
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Page/package.json
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/Page/package.json
@ -0,0 +1,6 @@
+{
+  "name": "Page",
+  "version": "0.0.0",
+  "private": true,
+  "main": "Page.js"
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/ScrollBar/index.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/ScrollBar/index.js
@ -0,0 +1,5 @@
+import ScrollBar from 'react-perfect-scrollbar';
+import 'react-perfect-scrollbar/dist/css/styles.css';
+import './index.less';
+
+export default ScrollBar;
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/ScrollBar/index.less
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/ScrollBar/index.less
@ -0,0 +1,31 @@
+:global {
+  .ps--active-x > .ps__rail-x,
+  .ps--active-y > .ps__rail-y {
+    background-color: transparent;
+  }
+
+  .ps__rail-x:hover > .ps__thumb-x,
+  .ps__rail-x:focus > .ps__thumb-x {
+    height: 8px;
+  }
+
+  .ps__rail-y:hover > .ps__thumb-y,
+  .ps__rail-y:focus > .ps__thumb-y {
+    width: 8px;
+  }
+
+  .ps__rail-y,
+  .ps__rail-x {
+    z-index: 9;
+  }
+
+  .ps__thumb-y {
+    width: 4px;
+    right: 4px;
+  }
+
+  .ps__thumb-x {
+    height: 4px;
+    bottom: 4px;
+  }
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/index.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/components/index.js
@ -0,0 +1,11 @@
+import Editor from './Editor';
+import FilterItem from './FilterItem';
+import DropOption from './DropOption';
+import Loader from './Loader';
+import ScrollBar from './ScrollBar';
+import GlobalFooter from './GlobalFooter';
+import Ellipsis from './Ellipsis';
+import * as MyLayout from './Layout';
+import Page from './Page';
+
+export { MyLayout, Editor, GlobalFooter, Ellipsis, FilterItem, DropOption, Loader, Page, ScrollBar };
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/layouts/BaseLayout.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/layouts/BaseLayout.js
@ -0,0 +1,29 @@
+import React, { Fragment } from 'react';
+import { Helmet } from 'react-helmet';
+import { queryLayout } from 'utils';
+import config from 'utils/config';
+
+import PublicLayout from './PublicLayout';
+import PrimaryLayout from './PrimaryLayout';
+import { withRouter } from 'react-router-dom';
+import './BaseLayout.less';
+
+const LayoutMap = {
+  primary: PrimaryLayout,
+  public: PublicLayout,
+};
+
+function BaseLayout({ children, location }) {
+  const Container = LayoutMap[queryLayout(config.layouts, location.pathname)];
+
+  return (
+    <Fragment>
+      <Helmet>
+        <title>{config.siteName}</title>
+      </Helmet>
+      <Container>{children}</Container>
+    </Fragment>
+  );
+}
+
+export default withRouter(BaseLayout);
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/layouts/BaseLayout.less
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/layouts/BaseLayout.less
@ -0,0 +1,76 @@
+@import '../themes/vars.less';
+@import '../themes/index.less';
+
+:global {
+  #nprogress {
+    pointer-events: none;
+
+    .bar {
+      background: @primary-color;
+      position: fixed;
+      z-index: 2048;
+      top: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: 2px;
+    }
+
+    .peg {
+      display: block;
+      position: absolute;
+      right: 0;
+      width: 100px;
+      height: 100%;
+      box-shadow:
+        0 0 10px @primary-color,
+        0 0 5px @primary-color;
+      opacity: 1;
+      transform: rotate(3deg) translate(0, -4px);
+    }
+
+    .spinner {
+      display: block;
+      position: fixed;
+      z-index: 1031;
+      top: 15px;
+      right: 15px;
+    }
+
+    .spinner-icon {
+      width: 18px;
+      height: 18px;
+      box-sizing: border-box;
+      border: solid 2px transparent;
+      border-top-color: @primary-color;
+      border-left-color: @primary-color;
+      border-radius: 50%;
+
+      :local {
+        animation: nprogress-spinner 400ms linear infinite;
+      }
+    }
+  }
+
+  .nprogress-custom-parent {
+    overflow: hidden;
+    position: relative;
+
+    #nprogress {
+      .bar,
+      .spinner {
+        position: absolute;
+      }
+    }
+  }
+}
+
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/layouts/PrimaryLayout.module.less
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/layouts/PrimaryLayout.module.less
@ -0,0 +1,58 @@
+@import '../themes/vars.less';
+
+.backTop {
+  right: 50px;
+
+  :global {
+    .ant-back-top-content {
+      background: @primary-color;
+      opacity: 0.3;
+      transition: all 0.3s;
+      box-shadow: 0 0 15px 1px rgba(69, 65, 78, 0.1);
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.content {
+  padding: 24px;
+  min-height: ~'calc(100% - 72px)';
+  // overflow-y: scroll;
+}
+
+.container {
+  height: 100vh;
+  flex: 1;
+  width: ~'calc(100% - 256px)';
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+.footer {
+  background: #fff;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 24px;
+  padding-bottom: 24px;
+  min-height: 72px;
+}
+
+@media (max-width: 767px) {
+  .content {
+    padding: 12px;
+  }
+
+  .backTop {
+    right: 20px;
+    bottom: 20px;
+  }
+
+  .container {
+    height: 100vh;
+    flex: 1;
+    width: 100%;
+  }
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/layouts/PrimaryLayout.tsx
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/layouts/PrimaryLayout.tsx
@ -0,0 +1,100 @@
+import React, { useEffect, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { MyLayout, GlobalFooter } from '../components';
+import { BackTop, Layout, Drawer } from 'antd';
+
+import { pathToRegexp } from 'path-to-regexp';
+import { getLocale } from '../utils';
+import config from '../utils/config';
+import Error from '../pages/404';
+import styles from './PrimaryLayout.module.less';
+import store from 'store';
+import { getStore } from '../models/app-model';
+import { withRouter } from 'react-router-dom';
+
+const { Content } = Layout;
+const { Header, Bread, Sider } = MyLayout;
+
+function PrimaryLayout({ children, location, history }) {
+  const st = getStore();
+
+  useEffect(() => {
+    st.query(history);
+  }, []);
+
+  const onCollapseChange = collapsed => {
+    st.handleCollapseChange(collapsed);
+  };
+
+  const theme = st.theme;
+  const collapsed = st.collapsed;
+  const notifications = st.notifications;
+  const user = store.get('user') || {};
+  const permissions = st.permissions;
+  const routeList = st.routeList || [];
+
+  const lang = getLocale();
+
+  const newRouteList =
+    lang !== 'en'
+      ? routeList.map(item => {
+          const { name, ...other } = item;
+          return {
+            ...other,
+            name: (item[lang] || {}).name || name,
+          };
+        })
+      : routeList;
+
+  // Find a route that matches the pathname.
+  const currentRoute = newRouteList.find(_ => _.route && pathToRegexp(`${_.route}`).exec(location.pathname));
+
+  // Query whether you have permission to enter this page
+  const hasPermission = currentRoute ? permissions.visit.includes(currentRoute.id) : false;
+
+  // MenuParentId is equal to -1 is not a available menu.
+  const menus = newRouteList.filter(_ => _.menuParentId !== '-1');
+
+  const headerProps = {
+    menus,
+    collapsed,
+    notifications,
+    onCollapseChange,
+    avatar: user.avatar,
+    username: user.username,
+    fixed: config.fixedHeader,
+    onAllNotificationsRead: () => {
+      st.allNotificationsRead();
+    },
+  };
+
+  const siderProps = {
+    theme,
+    menus,
+    collapsed,
+    onCollapseChange,
+    onThemeChange: theme => {
+      st.handleThemeChange(theme);
+    },
+  };
+
+  return (
+    <Fragment>
+      <Layout>
+        <Sider {...siderProps} />
+
+        <div className={styles.container} style={{ paddingTop: config.fixedHeader ? 72 : 0 }} id="primaryLayout">
+          <Header {...headerProps} />
+          <Content className={styles.content}>
+            <Bread routeList={newRouteList} />
+            {hasPermission ? children : <Error />}
+          </Content>
+          <BackTop className={styles.backTop} target={() => document.querySelector('#primaryLayout')} />
+          <GlobalFooter className={styles.footer} copyright={config.copyright} />
+        </div>
+      </Layout>
+    </Fragment>
+  );
+}
+
+export default withRouter(PrimaryLayout);
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/layouts/PublicLayout.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/layouts/PublicLayout.js
@ -0,0 +1,3 @@
+export default ({ children }) => {
+  return children;
+};
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/layouts/index.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/layouts/index.js
@ -0,0 +1,34 @@
+import React, { Suspense } from 'react';
+import { ConfigProvider } from 'antd';
+import { IntlProvider } from 'react-intl';
+import { getLocale } from '../utils';
+import BaseLayout from './BaseLayout';
+import { Route, withRouter } from 'react-router-dom';
+import { getRoutes } from '../pages/routes';
+import { getLangResource } from '../utils/intl';
+
+function Layout() {
+  let language = getLocale();
+
+  let langResource = getLangResource(language);
+
+  const routes = getRoutes();
+
+  return (
+    <ConfigProvider locale={langResource[language]}>
+      <IntlProvider messages={langResource[language]} locale={language}>
+        <BaseLayout>
+          <Suspense fallback={''}>
+            <Route path={routes[0].path} component={routes[0].component}>
+              {routes[0].childRoutes.map(item => {
+                return <Route path={item.path} component={item.component} />;
+              })}
+            </Route>
+          </Suspense>
+        </BaseLayout>
+      </IntlProvider>
+    </ConfigProvider>
+  );
+}
+
+export default withRouter(Layout);
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/locales/en/messages.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/locales/en/messages.js
@ -0,0 +1,54 @@
+export default {
+  '/dashboard': '/dashboard',
+  'Add Param': 'Add Param',
+  Address: 'Address',
+  Age: 'Age',
+  'Are you sure delete this record?': 'Are you sure delete this record?',
+  Author: 'Author',
+  Avatar: 'Avatar',
+  Categories: 'Categories',
+  'Clear notifications': 'Clear notifications',
+  Comments: 'Comments',
+  Create: 'Create',
+  'Create User': 'Create User',
+  CreateTime: 'CreateTime',
+  Dark: 'Dark',
+  Delete: 'Delete',
+  Email: 'Email',
+  Female: 'Female',
+  Gender: 'Gender',
+  'Hi,': 'Hi,',
+  Image: 'Image',
+  Light: 'Light',
+  Male: 'Male',
+  Name: 'Name',
+  NickName: 'NickName',
+  'Not Found': 'Not Found',
+  Operation: 'Operation',
+  Params: 'Params',
+  Password: 'Password',
+  Phone: 'Phone',
+  'Pick an address': 'Pick an address',
+  'Please pick an address': 'Please pick an address',
+  Published: 'Published',
+  'Publish Date': 'Publish Date',
+  Reset: 'Reset',
+  Search: 'Search',
+  'Search Name': 'Search Name',
+  Send: 'Send',
+  'Sign in': 'Sign in',
+  'Sign out': 'Sign out',
+  'Switch Theme': 'Switch Theme',
+  Tags: 'Tags',
+  'The input is not valid E-mail!': 'The input is not valid E-mail!',
+  'The input is not valid phone!': 'The input is not valid phone!',
+  Title: 'Title',
+  Total: 'Total {total} Items',
+  Unpublished: 'Unpublished',
+  Update: 'Update',
+  'Update User': 'Update User',
+  Username: 'Username',
+  Views: 'Views',
+  Visibility: 'Visibility',
+  'You have viewed all notifications.': 'You have viewed all notifications.',
+};
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/locales/pt-br/messages.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/locales/pt-br/messages.js
@ -0,0 +1,54 @@
+export default {
+  '/dashboard': '/dashboard',
+  'Add Param': 'Add Parametro',
+  Address: 'Endereço',
+  Age: 'Ano',
+  'Are you sure delete this record?': 'Tem certeza de excluir este registro?',
+  Author: 'Autor',
+  Avatar: 'Avatar',
+  Categories: 'Categorias',
+  'Clear notifications': 'limpar notificações',
+  Comments: 'Comentarios',
+  Create: 'Criar',
+  'Create User': 'Criar Usuário',
+  CreateTime: 'CreateTime',
+  Dark: 'Escuro',
+  Delete: 'Deletar',
+  Email: 'Email',
+  Female: 'Feminino',
+  Gender: 'Genero',
+  'Hi,': 'Olá,',
+  Image: 'Imagem',
+  Light: 'Claro',
+  Male: 'masculino',
+  Name: 'Nome',
+  NickName: 'NickName',
+  'Not Found': 'Não Encontrado',
+  Operation: 'Operation',
+  Params: 'Parametros',
+  Password: 'Senha',
+  Phone: 'Fone',
+  'Pick an address': 'Escolha um endereço',
+  'Please pick an address': 'Por favor, escolha um endereço',
+  Published: 'Publicado',
+  'Publish Date': 'Data de publicação',
+  Reset: 'Reset',
+  Search: 'procurar',
+  'Search Name': 'Search Name',
+  Send: 'Enviar',
+  'Sign in': 'Sign in',
+  'Sign out': 'Sign out',
+  'Switch Theme': 'Trocar tema',
+  Tags: 'Tags',
+  'The input is not valid E-mail!': 'Não é um E-mail valido!',
+  'The input is not valid phone!': 'Não é um telefone Valido!',
+  Title: 'Titulo',
+  Total: 'Total {total} Items',
+  Unpublished: 'Não publicado',
+  Update: 'Atualizar',
+  'Update User': 'Atualizar Usuário',
+  Username: 'Usuário',
+  Views: 'visualizações',
+  Visibility: 'Visibilidade',
+  'You have viewed all notifications.': 'Você visualizou todas as notificações.',
+};
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/locales/zh/messages.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/locales/zh/messages.js
@ -0,0 +1,54 @@
+export default {
+  '/dashboard': '/zh/dashboard',
+  'Add Param': '添加参数',
+  Address: '地址',
+  Age: '年龄',
+  'Are you sure delete this record?': '您确定要删除这条记录吗?',
+  Author: '作者',
+  Avatar: '头像',
+  Categories: '类别',
+  'Clear notifications': '清空消息',
+  Comments: '评论数',
+  Create: '创建',
+  'Create User': '创建用户',
+  CreateTime: '创建时间',
+  Dark: '暗',
+  Delete: '删除',
+  Email: '电子邮件',
+  Female: '女',
+  Gender: '性别',
+  'Hi,': '你好，',
+  Image: '图像',
+  Light: '明',
+  Male: '男性',
+  Name: '名字',
+  NickName: '昵称',
+  'Not Found': '未找到',
+  Operation: '操作',
+  Params: '参数',
+  Password: '密码',
+  Phone: '电话',
+  'Pick an address': '选择地址',
+  'Please pick an address': '选择地址',
+  Published: '已发布',
+  'Publish Date': '发布日期',
+  Reset: '重置',
+  Search: '搜索',
+  'Search Name': '搜索名字',
+  Send: '发送',
+  'Sign in': '登录',
+  'Sign out': '退出登录',
+  'Switch Theme': '切换主题',
+  Tags: '标签',
+  'The input is not valid E-mail!': '输入的电子邮件无效!',
+  'The input is not valid phone!': '输入无效的手机!',
+  Title: '标题',
+  Total: '总共 {total} 条记录',
+  Unpublished: '未发布',
+  Update: '更新',
+  'Update User': '更新用户',
+  Username: '用户名',
+  Views: '浏览数',
+  Visibility: '可见性',
+  'You have viewed all notifications.': '您已查看所有通知',
+};
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/main.jsx
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/main.jsx
@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDom from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
+
+import 'antd/dist/antd.css';
+
+import Layout from './layouts';
+
+ReactDom.render(
+  <BrowserRouter>
+    <Layout></Layout>
+  </BrowserRouter>,
+  document.getElementsByTagName('body')[0]
+);
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/models/app-model.ts
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/models/app-model.ts
@ -0,0 +1,82 @@
+import { stringify } from 'qs';
+import store from 'store';
+import { pathToRegexp } from 'path-to-regexp';
+import { ROLE_TYPE } from '../utils/constant';
+import { queryLayout } from '../utils';
+import api from '../services';
+import config from '../utils/config';
+// @ts-ignore
+const { queryRouteList, queryUserInfo } = api;
+
+import { createStore } from 'inula';
+
+const goDashboard = history => {
+  if (pathToRegexp(['/', '/login']).exec(window.location.pathname)) {
+    history.push({
+      pathname: '/dashboard',
+    });
+  }
+};
+
+export const getStore = createStore({
+  id: 'app',
+  state: {
+    routeList: [],
+    permissions: { visit: [] },
+    locationPathname: '',
+    locationQuery: {},
+    theme: store.get('theme') || 'light',
+    collapsed: store.get('collapsed') || false,
+    notifications: [
+      {
+        title: 'New User is registered.',
+        date: new Date(Date.now() - 10000000),
+      },
+      {
+        title: 'Application has been approved.',
+        date: new Date(Date.now() - 50000000),
+      },
+    ],
+  },
+  actions: {
+    handleThemeChange(state, val) {
+      store.set('theme', val);
+      state.theme = val;
+    },
+
+    handleCollapseChange(state, val) {
+      store.set('collapsed', val);
+      state.collapsed = val;
+    },
+
+    allNotificationsRead(state) {
+      state.notifications = [];
+    },
+
+    async query(state, history) {
+      const locationPathname = state.locationPathname;
+      const { success, user } = await queryUserInfo();
+      if (success && user) {
+        const { list } = await queryRouteList();
+        const { permissions } = user;
+        let routeList = list;
+        if (permissions.role === ROLE_TYPE.ADMIN || permissions.role === ROLE_TYPE.DEVELOPER) {
+          permissions.visit = list.map(item => item.id);
+        } else {
+          routeList = list.filter(item => {
+            const cases = [
+              permissions.visit.includes(item.id),
+              item.mpid ? permissions.visit.includes(item.mpid) || item.mpid === '-1' : true,
+              item.bpid ? permissions.visit.includes(item.bpid) : true,
+            ];
+            return cases.every(_ => _);
+          });
+        }
+        state.routeList = routeList;
+        state.permissions = permissions;
+        store.set('user', user);
+        goDashboard(history);
+      }
+    },
+  },
+});
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/404.jsx
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/404.jsx
@ -0,0 +1,15 @@
+import React from 'react';
+import { FrownOutlined } from '@ant-design/icons';
+import { Page } from 'components';
+import styles from './404.module.less';
+
+const Error = () => (
+  <Page inner>
+    <div className={styles.error}>
+      <FrownOutlined />
+      <h1>404 Not Found</h1>
+    </div>
+  </Page>
+);
+
+export default Error;
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/404.module.less
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/404.module.less
@ -0,0 +1,19 @@
+.error {
+  color: black;
+  text-align: center;
+  position: absolute;
+  top: 30%;
+  margin-top: -50px;
+  left: 50%;
+  margin-left: -100px;
+  width: 200px;
+
+  :global .anticon {
+    font-size: 48px;
+    margin-bottom: 16px;
+  }
+
+  h1 {
+    font-family: cursive;
+  }
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/browser.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/browser.js
@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Table, Tag } from 'antd';
+import Color from 'utils/theme';
+import styles from './browser.module.less';
+
+const status = {
+  1: {
+    color: Color.green,
+  },
+  2: {
+    color: Color.red,
+  },
+  3: {
+    color: Color.blue,
+  },
+  4: {
+    color: Color.yellow,
+  },
+};
+
+function Browser({ data }) {
+  const columns = [
+    {
+      title: 'name',
+      dataIndex: 'name',
+      className: styles.name,
+    },
+    {
+      title: 'percent',
+      dataIndex: 'percent',
+      className: styles.percent,
+      render: (text, it) => <Tag color={status[it.status].color}>{text}%</Tag>,
+    },
+  ];
+  return <Table pagination={false} showHeader={false} columns={columns} rowKey="name" dataSource={data} />;
+}
+
+Browser.propTypes = {
+  data: PropTypes.array,
+};
+
+export default Browser;
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/browser.module.less
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/browser.module.less
@ -0,0 +1,7 @@
+.percent {
+  text-align: right !important;
+}
+
+.name {
+  text-align: left !important;
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/comments.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/comments.js
@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Table, Tag } from 'antd';
+import Color from '../../../utils/theme';
+import styles from './comments.module.less';
+
+const status = {
+  1: {
+    color: Color.green,
+    text: 'APPROVED',
+  },
+  2: {
+    color: Color.yellow,
+    text: 'PENDING',
+  },
+  3: {
+    color: Color.red,
+    text: 'REJECTED',
+  },
+};
+
+function Comments({ data }) {
+  const columns = [
+    {
+      title: 'avatar',
+      dataIndex: 'avatar',
+      width: 48,
+      className: styles.avatarcolumn,
+      render: text => <span style={{ backgroundImage: `url(${text})` }} className={styles.avatar} />,
+    },
+    {
+      title: 'content',
+      dataIndex: 'content',
+      render: (text, it) => (
+        <div>
+          <h5 className={styles.name}>{it.name}</h5>
+          <p className={styles.content}>{it.content}</p>
+          <div className={styles.daterow}>
+            <Tag color={status[it.status].color}>{status[it.status].text}</Tag>
+            <span className={styles.date}>{it.date}</span>
+          </div>
+        </div>
+      ),
+    },
+  ];
+  return (
+    <div className={styles.comments}>
+      <Table
+        pagination={false}
+        showHeader={false}
+        columns={columns}
+        rowKey="avatar"
+        dataSource={data.filter((item, key) => key < 3)}
+      />
+    </div>
+  );
+}
+
+Comments.propTypes = {
+  data: PropTypes.array,
+};
+
+export default Comments;
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/comments.module.less
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/comments.module.less
@ -0,0 +1,43 @@
+@import '../../../themes/vars.less';
+
+.comments {
+  :global .ant-table-thead > tr > th {
+    background: #fff;
+    border-bottom: solid 1px @border-color-base;
+  }
+
+  .avatar {
+    width: 48px;
+    height: 48px;
+    background-position: center;
+    background-size: cover;
+    border-radius: 50%;
+    background: #f8f8f8;
+    display: inline-block;
+  }
+
+  .content {
+    text-align: left;
+    color: #757575;
+  }
+
+  .date {
+    color: #a3a3a3;
+    line-height: 30px;
+  }
+
+  .daterow {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .name {
+    font-size: 14px;
+    color: #474747;
+    text-align: left;
+  }
+
+  .avatarcolumn {
+    vertical-align: top;
+  }
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/completed.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/completed.js
@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Color from 'utils/theme';
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import styles from './completed.module.less';
+
+function Completed({ data }) {
+  return (
+    <div className={styles.sales}>
+      <div className={styles.title}>TEAM TOTAL COMPLETED</div>
+      <ResponsiveContainer minHeight={360}>
+        <AreaChart data={data}>
+          <Legend
+            verticalAlign="top"
+            content={prop => {
+              const { payload } = prop;
+              return (
+                <ul
+                  className={classnames({
+                    [styles.legend]: true,
+                    clearfix: true,
+                  })}
+                >
+                  {payload.map((item, key) => (
+                    <li key={key}>
+                      <span className={styles.radiusdot} style={{ background: item.color }} />
+                      {item.value}
+                    </li>
+                  ))}
+                </ul>
+              );
+            }}
+          />
+          <XAxis dataKey="name" axisLine={{ stroke: Color.borderBase, strokeWidth: 1 }} tickLine={false} />
+          <YAxis axisLine={false} tickLine={false} />
+          <CartesianGrid vertical={false} stroke={Color.borderBase} strokeDasharray="3 3" />
+          <Tooltip
+            wrapperStyle={{
+              border: 'none',
+              boxShadow: '4px 4px 40px rgba(0, 0, 0, 0.05)',
+            }}
+            content={content => {
+              const list = content.payload.map((item, key) => (
+                <li key={key} className={styles.tipitem}>
+                  <span className={styles.radiusdot} style={{ background: item.color }} />
+                  {`${item.name}:${item.value}`}
+                </li>
+              ));
+              return (
+                <div className={styles.tooltip}>
+                  <p className={styles.tiptitle}>{content.label}</p>
+                  {content.payload && <ul>{list}</ul>}
+                </div>
+              );
+            }}
+          />
+          <Area
+            type="monotone"
+            dataKey="Task complete"
+            stroke={Color.grass}
+            fill={Color.grass}
+            strokeWidth={2}
+            dot={{ fill: '#fff' }}
+            activeDot={{ r: 5, fill: '#fff', stroke: Color.green }}
+          />
+          <Area
+            type="monotone"
+            dataKey="Cards Complete"
+            stroke={Color.sky}
+            fill={Color.sky}
+            strokeWidth={2}
+            dot={{ fill: '#fff' }}
+            activeDot={{ r: 5, fill: '#fff', stroke: Color.blue }}
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+Completed.propTypes = {
+  data: PropTypes.array,
+};
+
+export default Completed;
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/completed.module.less
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/completed.module.less
@ -0,0 +1,49 @@
+@import '../../../themes/vars.less';
+
+.sales {
+  .title {
+    margin-left: 32px;
+    font-size: 16px;
+  }
+}
+
+.radiusdot {
+  width: 12px;
+  height: 12px;
+  margin-right: 8px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.legend {
+  text-align: right;
+  color: #999;
+  font-size: 14px;
+
+  li {
+    height: 48px;
+    line-height: 48px;
+    display: inline-block;
+
+    & + li {
+      margin-left: 24px;
+    }
+  }
+}
+
+.tooltip {
+  background: #fff;
+  padding: 20px;
+  font-size: 14px;
+
+  .tiptitle {
+    font-weight: 700;
+    font-size: 16px;
+    margin-bottom: 8px;
+  }
+
+  .tipitem {
+    height: 32px;
+    line-height: 32px;
+  }
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/cpu.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/cpu.js
@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Color from 'utils/theme';
+import CountUp from 'react-countup';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, ResponsiveContainer } from 'recharts';
+import styles from './cpu.module.less';
+
+const countUpProps = {
+  start: 0,
+  duration: 2.75,
+  useEasing: true,
+  useGrouping: true,
+  separator: ',',
+};
+
+function Cpu({ usage = 0, space = 0, cpu = 0, data }) {
+  return (
+    <div className={styles.cpu}>
+      <div className={styles.number}>
+        <div className={styles.item}>
+          <p>usage</p>
+          <p>
+            <CountUp end={usage} suffix="GB" {...countUpProps} />
+          </p>
+        </div>
+        <div className={styles.item}>
+          <p>space</p>
+          <p>
+            <CountUp end={space} suffix="GB" {...countUpProps} />
+          </p>
+        </div>
+        <div className={styles.item}>
+          <p>cpu</p>
+          <p>
+            <CountUp end={cpu} suffix="%" {...countUpProps} />
+          </p>
+        </div>
+      </div>
+      <ResponsiveContainer minHeight={300}>
+        <LineChart data={data} margin={{ left: -40 }}>
+          <XAxis dataKey="name" axisLine={{ stroke: Color.borderBase, strokeWidth: 1 }} tickLine={false} />
+          <YAxis axisLine={false} tickLine={false} />
+          <CartesianGrid vertical={false} stroke={Color.borderBase} strokeDasharray="3 3" />
+          <Line type="monotone" connectNulls dataKey="cpu" stroke={Color.blue} fill={Color.blue} />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+Cpu.propTypes = {
+  data: PropTypes.array,
+  usage: PropTypes.number,
+  space: PropTypes.number,
+  cpu: PropTypes.number,
+};
+
+export default Cpu;
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/cpu.module.less
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/cpu.module.less
@ -0,0 +1,40 @@
+.cpu {
+  .number {
+    display: flex;
+    height: 64px;
+    justify-content: space-between;
+    margin-bottom: 32px;
+
+    .item {
+      text-align: center;
+      height: 64px;
+      width: 100%;
+      position: relative;
+
+      & + .item {
+        &::before {
+          content: '';
+          display: block;
+          width: 1px;
+          height: 40px;
+          position: absolute;
+          background: #f5f5f5;
+          top: 12px;
+        }
+      }
+
+      p {
+        color: #757575;
+
+        &:first-child {
+          font-size: 16px;
+        }
+
+        &:last-child {
+          font-size: 20px;
+          font-weight: 700;
+        }
+      }
+    }
+  }
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/index.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/index.js
@ -0,0 +1,12 @@
+import NumberCard from './numberCard';
+import Quote from './quote';
+import Sales from './sales';
+import Weather from './weather';
+import RecentSales from './recentSales';
+import Comments from './comments';
+import Completed from './completed';
+import Browser from './browser';
+import Cpu from './cpu';
+import User from './user';
+
+export { NumberCard, Quote, Sales, Weather, RecentSales, Comments, Completed, Browser, Cpu, User };
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/numberCard.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/numberCard.js
@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Card } from 'antd';
+import CountUp from 'react-countup';
+import iconMap from 'utils/iconMap';
+import styles from './numberCard.module.less';
+
+function NumberCard({ icon, color, title, number, countUp }) {
+  return (
+    <Card className={styles.numberCard} bordered={false} bodyStyle={{ padding: 10 }}>
+      <span className={styles.iconWarp} style={{ color }}>
+        {iconMap[icon]}
+      </span>
+      <div className={styles.content}>
+        <p className={styles.title}>{title || 'No Title'}</p>
+        <p className={styles.number}>
+          <CountUp start={0} end={number} duration={2.75} useEasing useGrouping separator="," {...(countUp || {})} />
+        </p>
+      </div>
+    </Card>
+  );
+}
+
+NumberCard.propTypes = {
+  icon: PropTypes.string,
+  color: PropTypes.string,
+  title: PropTypes.string,
+  number: PropTypes.number,
+  countUp: PropTypes.object,
+};
+
+export default NumberCard;
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/numberCard.module.less
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/numberCard.module.less
@ -0,0 +1,33 @@
+@import '../../../themes/vars';
+
+.numberCard {
+  padding: 32px;
+  margin-bottom: 24px;
+  cursor: pointer;
+
+  .iconWarp {
+    font-size: 54px;
+    float: left;
+  }
+
+  .content {
+    width: 100%;
+    padding-left: 78px;
+
+    .title {
+      line-height: 16px;
+      font-size: 16px;
+      margin-bottom: 8px;
+      height: 16px;
+      .text-overflow();
+    }
+
+    .number {
+      line-height: 32px;
+      font-size: 24px;
+      height: 32px;
+      .text-overflow();
+      margin-bottom: 0;
+    }
+  }
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/quote.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/quote.js
@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './quote.module.less';
+
+function Quote({ name, content, title, avatar }) {
+  return (
+    <div className={styles.quote}>
+      <div className={styles.inner}>{content}</div>
+      <div className={styles.footer}>
+        <div className={styles.description}>
+          <p>-{name}-</p>
+          <p>{title}</p>
+        </div>
+        <div className={styles.avatar} style={{ backgroundImage: `url(${avatar})` }} />
+      </div>
+    </div>
+  );
+}
+
+Quote.propTypes = {
+  name: PropTypes.string,
+  content: PropTypes.string,
+  title: PropTypes.string,
+  avatar: PropTypes.string,
+};
+
+export default Quote;
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/quote.module.less
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/quote.module.less
@ -0,0 +1,52 @@
+@import '../../../themes/vars';
+
+.quote {
+  color: #fff;
+  height: 100%;
+  width: 100%;
+  padding: 24px;
+  font-size: 16px;
+  font-weight: 700;
+
+  .inner {
+    text-overflow: ellipsis;
+    word-wrap: normal;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+    overflow: hidden;
+    text-indent: 24px;
+  }
+
+  .footer {
+    position: relative;
+    margin-top: 14px;
+
+    .description {
+      width: 100%;
+
+      p {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin-right: 64px;
+        text-align: right;
+
+        &:last-child {
+          font-weight: 100;
+        }
+      }
+    }
+
+    .avatar {
+      width: 48px;
+      height: 48px;
+      background-position: center;
+      background-size: cover;
+      border-radius: 50%;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/recentSales.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/recentSales.js
@ -0,0 +1,60 @@
+import React from 'react';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import { Table, Tag } from 'antd';
+import Color from '../../../utils/theme';
+import styles from './recentSales.module.less';
+
+const status = {
+  1: {
+    color: Color.green,
+    text: 'SALE',
+  },
+  2: {
+    color: Color.yellow,
+    text: 'REJECT',
+  },
+  3: {
+    color: Color.red,
+    text: 'TAX',
+  },
+  4: {
+    color: Color.blue,
+    text: 'EXTENDED',
+  },
+};
+
+function RecentSales({ data }) {
+  const columns = [
+    {
+      title: 'NAME',
+      dataIndex: 'name',
+    },
+    {
+      title: 'STATUS',
+      dataIndex: 'status',
+      render: text => <Tag color={status[text].color}>{status[text].text}</Tag>,
+    },
+    {
+      title: 'DATE',
+      dataIndex: 'date',
+      render: text => moment(text).format('YYYY-MM-DD'),
+    },
+    {
+      title: 'PRICE',
+      dataIndex: 'price',
+      render: (text, it) => <span style={{ color: status[it.status].color }}>${text}</span>,
+    },
+  ];
+  return (
+    <div className={styles.recentsales}>
+      <Table pagination={false} columns={columns} rowKey="id" dataSource={data.filter((item, key) => key < 5)} />
+    </div>
+  );
+}
+
+RecentSales.propTypes = {
+  data: PropTypes.array,
+};
+
+export default RecentSales;
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/recentSales.module.less
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/recentSales.module.less
@ -0,0 +1,8 @@
+@import '../../../themes/vars';
+
+.recentsales {
+  :global .ant-table-thead > tr > th {
+    background: #fff;
+    border-bottom: solid 1px @border-color-base;
+  }
+}
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/sales.js
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/sales.js
@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Color from '../../../utils/theme';
+// import { Color } from '../../../utils/theme';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import styles from './sales.module.less';
+
+function Sales({ data }) {
+  return (
+    <div className={styles.sales}>
+      <div className={styles.title}>Yearly Sales</div>
+      <ResponsiveContainer minHeight={360}>
+        <LineChart data={data}>
+          <Legend
+            verticalAlign="top"
+            content={prop => {
+              const { payload } = prop;
+              return (
+                <ul
+                  className={classnames({
+                    [styles.legend]: true,
+                    clearfix: true,
+                  })}
+                >
+                  {payload.map((item, key) => (
+                    <li key={key}>
+                      <span className={styles.radiusdot} style={{ background: item.color }} />
+                      {item.value}
+                    </li>
+                  ))}
+                </ul>
+              );
+            }}
+          />
+          <XAxis dataKey="name" axisLine={{ stroke: Color.borderBase, strokeWidth: 1 }} tickLine={false} />
+          <YAxis axisLine={false} tickLine={false} />
+          <CartesianGrid vertical={false} stroke={Color.borderBase} strokeDasharray="3 3" />
+          <Tooltip
+            wrapperStyle={{
+              border: 'none',
+              boxShadow: '4px 4px 40px rgba(0, 0, 0, 0.05)',
+            }}
+            content={content => {
+              const list = content.payload.map((item, key) => (
+                <li key={key} className={styles.tipitem}>
+                  <span className={styles.radiusdot} style={{ background: item.color }} />
+                  {`${item.name}:${item.value}`}
+                </li>
+              ));
+              return (
+                <div className={styles.tooltip}>
+                  <p className={styles.tiptitle}>{content.label}</p>
+                  {content.payload && <ul>{list}</ul>}
+                </div>
+              );
+            }}
+          />
+          <Line
+            type="monotone"
+            dataKey="Food"
+            stroke={Color.purple}
+            strokeWidth={3}
+            dot={{ fill: Color.purple }}
+            activeDot={{ r: 5, strokeWidth: 0 }}
+          />
+          <Line
+            type="monotone"
+            dataKey="Clothes"
+            stroke={Color.red}
+            strokeWidth={3}
+            dot={{ fill: Color.red }}
+            activeDot={{ r: 5, strokeWidth: 0 }}
+          />
+          <Line
+            type="monotone"
+            dataKey="Electronics"
+            stroke={Color.green}
+            strokeWidth={3}
+            dot={{ fill: Color.green }}
+            activeDot={{ r: 5, strokeWidth: 0 }}
+          />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+Sales.propTypes = {
+  data: PropTypes.array,
+};
+
+export default Sales;
--- a/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/sales.module.less
+++ b/packages/create-inula/lib/generators/InulaJS-antd/templates/vite/src/admin/pages/dashboard/components/sales.module.less
@ -0,0 +1,50 @@
+@import '../../../themes/vars';
+
+.sales {
+  overflow: hidden;
+  .title {
+    margin-left: 32px;
+    font-size: 16px;
+  }
+}
+
+.radiusdot {
+  width: 12px;
+  height: 12px;
+  margin-right: 8px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.legend {
+  text-align: right;
+  color: #999;
+  font-size: 14px;
+
+  li {
+    height: 48px;
+    line-height: 48px;
+    display: inline-block;
+
+    & + li {
+      margin-left: 24px;
+    }
+  }
+}
+
+.tooltip {
+  background: #fff;
+  padding: 20px;
+  font-size: 14px;
+
+  .tiptitle {
+    font-weight: 700;
+    font-size: 16px;
+    margin-bottom: 8px;
+  }
+
+  .tipitem {
+    height: 32px;
+    line-height: 32px;
+  }
+}
--- a/Show More
+++ b/Show More
				`@ -1 +0,0 @@`
				`{"fileVersion":"1","name":"Inula","serviceId":"067e5bef6cd240ae9460229d107a99a6","description":"","version":"1.0.0","type":"microService","processes":{"Inula":{"subscribes":[]}}}`
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>