提取ele-pro修改源码

2021-08-06 16:12:31 +08:00
parent 97df9286bb
commit 5bc27cb0ee
153 changed files with 36553 additions and 555 deletions
--- a/dynamicTheme.js
+++ b/dynamicTheme.js
@@ -0,0 +1,377 @@
+/** ele admin pro dynamic theme plugin license by http://eleadmin.com */
+/**
+ * 需要修改的less变量
+ */
+const variables = {
+  // Blue
+  '@blue-1': 'var(--blue-1)',
+  '@blue-2': 'var(--blue-2)',
+  '@blue-3': 'var(--blue-3)',
+  '@blue-4': 'var(--blue-4)',
+  '@blue-5': 'var(--blue-5)',
+  '@blue-6': 'var(--blue-6)',
+  '@blue-7': 'var(--blue-7)',
+  '@blue-8': 'var(--blue-8)',
+  '@blue-9': 'var(--blue-9)',
+  '@blue-10': 'var(--blue-10)',
+  // Green
+  '@green-1': 'var(--green-1)',
+  '@green-2': 'var(--green-2)',
+  '@green-3': 'var(--green-3)',
+  '@green-4': 'var(--green-4)',
+  '@green-5': 'var(--green-5)',
+  '@green-6': 'var(--green-6)',
+  '@green-7': 'var(--green-7)',
+  '@green-8': 'var(--green-8)',
+  '@green-9': 'var(--green-9)',
+  '@green-10': 'var(--green-10)',
+  // Red
+  '@red-1': 'var(--red-1)',
+  '@red-2': 'var(--red-2)',
+  '@red-3': 'var(--red-3)',
+  '@red-4': 'var(--red-4)',
+  '@red-5': 'var(--red-5)',
+  '@red-6': 'var(--red-6)',
+  '@red-7': 'var(--red-7)',
+  '@red-8': 'var(--red-8)',
+  '@red-9': 'var(--red-9)',
+  '@red-10': 'var(--red-10)',
+  // Gold
+  '@gold-1': 'var(--gold-1)',
+  '@gold-2': 'var(--gold-2)',
+  '@gold-3': 'var(--gold-3)',
+  '@gold-4': 'var(--gold-4)',
+  '@gold-5': 'var(--gold-5)',
+  '@gold-6': 'var(--gold-6)',
+  '@gold-7': 'var(--gold-7)',
+  '@gold-8': 'var(--gold-8)',
+  '@gold-9': 'var(--gold-9)',
+  '@gold-10': 'var(--gold-10)',
+  // Purple
+  '@purple-1': 'var(--purple-1)',
+  '@purple-2': 'var(--purple-2)',
+  '@purple-3': 'var(--purple-3)',
+  '@purple-4': 'var(--purple-4)',
+  '@purple-5': 'var(--purple-5)',
+  '@purple-6': 'var(--purple-6)',
+  '@purple-7': 'var(--purple-7)',
+  '@purple-8': 'var(--purple-8)',
+  '@purple-9': 'var(--purple-9)',
+  '@purple-10': 'var(--purple-10)',
+  // Cyan
+  '@cyan-1': 'var(--cyan-1)',
+  '@cyan-2': 'var(--cyan-2)',
+  '@cyan-3': 'var(--cyan-3)',
+  '@cyan-4': 'var(--cyan-4)',
+  '@cyan-5': 'var(--cyan-5)',
+  '@cyan-6': 'var(--cyan-6)',
+  '@cyan-7': 'var(--cyan-7)',
+  '@cyan-8': 'var(--cyan-8)',
+  '@cyan-9': 'var(--cyan-9)',
+  '@cyan-10': 'var(--cyan-10)',
+  // Pink
+  '@pink-1': 'var(--pink-1)',
+  '@pink-2': 'var(--pink-2)',
+  '@pink-3': 'var(--pink-3)',
+  '@pink-4': 'var(--pink-4)',
+  '@pink-5': 'var(--pink-5)',
+  '@pink-6': 'var(--pink-6)',
+  '@pink-7': 'var(--pink-7)',
+  '@pink-8': 'var(--pink-8)',
+  '@pink-9': 'var(--pink-9)',
+  '@pink-10': 'var(--pink-10)',
+  // Orange
+  '@orange-1': 'var(--orange-1)',
+  '@orange-2': 'var(--orange-2)',
+  '@orange-3': 'var(--orange-3)',
+  '@orange-4': 'var(--orange-4)',
+  '@orange-5': 'var(--orange-5)',
+  '@orange-6': 'var(--orange-6)',
+  '@orange-7': 'var(--orange-7)',
+  '@orange-8': 'var(--orange-8)',
+  '@orange-9': 'var(--orange-9)',
+  '@orange-10': 'var(--orange-10)',
+  // Colors
+  '@primary-color': 'var(--primary-color)',
+  '@info-color': 'var(--info-color)',
+  '@success-color': 'var(--success-color)',
+  '@processing-color': 'var(--processing-color)',
+  '@error-color': 'var(--error-color)',
+  '@highlight-color': 'var(--highlight-color)',
+  '@warning-color': 'var(--warning-color)',
+  // Color used by default to control hover and active backgrounds
+  '@primary-1': 'var(--primary-1)',
+  '@primary-2': 'var(--primary-2)',
+  '@primary-3': 'var(--primary-3)',
+  '@primary-4': 'var(--primary-4)',
+  '@primary-5': 'var(--primary-5)',
+  '@primary-6': 'var(--primary-6)',
+  '@primary-7': 'var(--primary-7)',
+  '@primary-8': 'var(--primary-8)',
+  '@primary-9': 'var(--primary-9)',
+  '@primary-10': 'var(--primary-10)',
+  // Background color
+  '@body-background': 'var(--body-background)',
+  '@component-background': 'var(--component-background)',
+  // Popover
+  '@popover-background': 'var(--popover-background)',
+  '@popover-customize-border-color': 'var(--popover-customize-border-color)',
+  // Text Color
+  '@text-color': 'var(--text-color)',
+  '@text-color-secondary': 'var(--text-color-secondary)',
+  '@text-color-inverse': 'var(--text-color-inverse)',
+  '@icon-color-hover': 'var(--icon-color-hover)',
+  '@heading-color': 'var(--heading-color)',
+  // The background colors for active and hover states for things like
+  '@item-hover-bg': 'var(--item-hover-bg)',
+  // LINK
+  '@link-hover-color': '@primary-5',
+  '@link-active-color': '@primary-7',
+  // Border color
+  '@border-color-base': 'var(--border-color-base)',
+  '@border-color-split': 'var(--border-color-split)',
+  '@border-color-inverse': 'var(--border-color-inverse)',
+  // Outline
+  '@background-color-light': 'var(--background-color-light)',
+  '@background-color-base': 'var(--background-color-base)',
+  // Disabled states
+  '@disabled-color': 'var(--disabled-color)',
+  '@disabled-bg': 'var(--disabled-bg)',
+  '@disabled-color-dark': 'var(--disabled-color-dark)',
+  // Shadow
+  '@shadow-color': 'var(--shadow-color)',
+  '@box-shadow-base': 'var(--box-shadow-base)',
+  '@shadow-1-up': 'var(--shadow-1-up)',
+  '@shadow-1-down': 'var(--shadow-1-down)',
+  '@shadow-1-left': 'var(--shadow-1-left)',
+  '@shadow-1-right': 'var(--shadow-1-right)',
+  '@shadow-2': 'var(--shadow-2)',
+  // Buttons
+  '@btn-shadow': 'var(--btn-shadow)',
+  '@btn-primary-shadow': 'var(--btn-primary-shadow)',
+  '@btn-text-shadow': 'var(--btn-text-shadow)',
+  '@btn-default-bg': 'var(--btn-default-bg)',
+  '@btn-danger-bg': '@error-color',
+  '@btn-danger-border': '@error-color',
+  '@btn-default-ghost-color': 'var(--btn-default-ghost-color)',
+  '@btn-default-ghost-border': 'var(--btn-default-ghost-border)',
+  '@btn-text-hover-bg': 'var(--btn-text-hover-bg)',
+  // Checkbox
+  '@checkbox-check-bg': 'var(--checkbox-check-bg)',
+  // Descriptions
+  '@descriptions-bg': 'var(--descriptions-bg)',
+  // Divider
+  '@divider-color': 'var(--divider-color)',
+  // Dropdown
+  '@dropdown-menu-submenu-disabled-bg': 'var(--dropdown-menu-submenu-disabled-bg)',
+  // Radio
+  '@radio-dot-disabled-color': 'var(--radio-dot-disabled-color)',
+  '@radio-solid-checked-color': 'var(--radio-solid-checked-color)',
+  '@radio-focused-outline': '3px solid @primary-1',  // var(--primary-fade-6)
+  // Radio buttons
+  '@radio-disabled-button-checked-bg': 'var(--radio-disabled-button-checked-bg)',
+  // Layout
+  '@layout-body-background': 'var(--layout-body-background)',
+  '@layout-header-background': 'var(--layout-header-background)',
+  '@layout-trigger-background': 'var(--layout-trigger-background)',
+  // Dropdown
+  '@dropdown-menu-bg': 'var(--dropdown-menu-bg)',
+  // Input
+  '@input-placeholder-color': 'var(--input-placeholder-color)',
+  '@input-icon-color': 'var(--input-icon-color)',
+  '@input-bg': 'var(--input-bg)',
+  '@input-number-handler-active-bg': 'var(--input-number-handler-active-bg)',
+  '@input-icon-hover-color': 'var(--input-icon-hover-color)',
+  // Mentions
+  '@mentions-dropdown-bg': 'var(--mentions-dropdown-bg)',
+  // Select
+  '@select-dropdown-bg': 'var(--select-dropdown-bg)',
+  '@select-background': 'var(--select-background)',
+  '@select-clear-background': 'var(--select-clear-background)',
+  '@select-selection-item-bg': 'var(--select-selection-item-bg)',
+  '@select-selection-item-border-color': 'var(--select-selection-item-border-color)',
+  '@select-multiple-disabled-background': 'var(--select-multiple-disabled-background)',
+  '@select-multiple-item-disabled-color': 'var(--select-multiple-item-disabled-color)',
+  '@select-multiple-item-disabled-border-color': 'var(--select-multiple-item-disabled-border-color)',
+  // Cascader
+  '@cascader-bg': 'var(--cascader-bg)',
+  '@cascader-menu-bg': 'var(--cascader-menu-bg)',
+  '@cascader-menu-border-color-split': 'var(--cascader-menu-border-color-split)',
+  // Tooltip
+  '@tooltip-bg': 'var(--tooltip-bg)',
+  // Popover
+  '@popover-bg': 'var(--popover-bg)',
+  // Modal
+  '@modal-header-bg': 'var(--modal-header-bg)',
+  '@modal-header-border-color-split': 'var(--modal-header-border-color-split)',
+  '@modal-content-bg': 'var(--modal-content-bg)',
+  '@modal-footer-border-color-split': 'var(--modal-footer-border-color-split)',
+  // Menu
+  '@menu-popup-bg': 'var(--menu-popup-bg)',
+  '@menu-dark-bg': 'var(--menu-dark-bg)',
+  '@menu-dark-submenu-bg': 'var(--menu-dark-submenu-bg)',
+  // Table
+  '@table-header-bg': 'var(--table-header-bg)',
+  '@table-header-sort-bg': 'var(--table-header-sort-bg)',
+  '@table-body-sort-bg': 'var(--table-body-sort-bg)',
+  '@table-row-hover-bg': 'var(--table-row-hover-bg)',
+  '@table-selected-row-hover-bg': '@primary-1',
+  '@table-expanded-row-bg': 'var(--table-expanded-row-bg)',
+  '@table-header-sort-active-bg': 'var(--table-header-sort-active-bg)',
+  '@table-header-filter-active-bg': 'var(--table-header-filter-active-bg)',
+  // Badge
+  '@badge-text-color': '@white',
+  // Rate
+  '@rate-star-bg': 'var(--rate-star-bg)',
+  // Card
+  '@card-actions-background': 'var(--card-actions-background)',
+  '@card-skeleton-bg': 'var(--card-skeleton-bg)',
+  '@card-shadow': 'var(--card-shadow)',
+  '@gradient-min': 'var(--gradient-min)',
+  '@gradient-max': 'var(--gradient-max)',
+  // Comment
+  '@comment-bg': 'var(--comment-bg)',
+  '@comment-author-time-color': 'var(--comment-author-time-color)',
+  '@comment-action-hover-color': 'var(--comment-action-hover-color)',
+  // BackTop
+  '@back-top-bg': 'var(--back-top-bg)',
+  '@back-top-hover-bg': 'var(--back-top-hover-bg)',
+  // Avatar
+  '@avatar-bg': 'var(--avatar-bg)',
+  // Switch
+  '@switch-bg': '@white',
+  // Pagination
+  '@pagination-item-bg': 'var(--pagination-item-bg)',
+  '@pagination-item-bg-active': 'var(--pagination-item-bg-active)',
+  '@pagination-item-link-bg': 'var(--pagination-item-link-bg)',
+  '@pagination-item-disabled-color-active': 'var(--pagination-item-disabled-color-active)',
+  '@pagination-item-disabled-bg-active': 'var(--pagination-item-disabled-bg-active)',
+  '@pagination-item-input-bg': 'var(--pagination-item-input-bg)',
+  // PageHeader
+  '@page-header-back-color': 'var(--page-header-back-color)',
+  // Slider
+  '@slider-rail-background-color': 'var(--slider-rail-background-color)',
+  '@slider-rail-background-color-hover': 'var(--slider-rail-background-color-hover)',
+  '@slider-handle-color-focus': '@primary-5',
+  '@slider-handle-color-focus-shadow': 'var(--primary-fade-20)',
+  '@slider-dot-border-color': 'var(--slider-dot-border-color)',
+  '@slider-dot-border-color-active': 'var(--slider-dot-border-color)',
+  // Skeleton
+  '@skeleton-to-color': 'var(--skeleton-to-color)',
+  // Transfer
+  '@transfer-item-hover-bg': 'var(--transfer-item-hover-bg)',
+  // Message
+  '@message-notice-content-bg': 'var(--message-notice-content-bg)',
+  // Alert
+  '@alert-success-border-color': '@green-3',
+  '@alert-success-bg-color': '@green-1',
+  '@alert-success-icon-color': '@success-color',
+  '@alert-info-border-color': '@primary-3',
+  '@alert-info-bg-color': '@primary-1',
+  '@alert-info-icon-color': '@primary-color',
+  '@alert-warning-border-color': '@gold-3',
+  '@alert-warning-bg-color': '@gold-1',
+  '@alert-warning-icon-color': '@warning-color',
+  '@alert-error-border-color': '@red-3',
+  '@alert-error-bg-color': '@red-1',
+  '@alert-error-icon-color': '@error-color',
+  // Drawer
+  '@drawer-bg': 'var(--drawer-bg)',
+  // Timeline
+  '@timeline-color': 'var(--timeline-color)',
+  '@timeline-dot-color': 'var(--timeline-dot-color)',
+  // Image
+  '@image-preview-operation-disabled-color': 'var(--image-preview-operation-disabled-color)',
+  // Steps
+  '@steps-nav-arrow-color': 'var(--steps-nav-arrow-color)',
+  '@steps-background': 'var(--steps-background)',
+  // Notification
+  '@notification-bg': 'var(--notification-bg)',
+};
+
+/**
+ * 需要替换的内容
+ */
+const replaces = {
+  // input/style/mixin.less
+  'fade(@color, 20%)': 'ele-fade(@color, 20%)',
+  // layout/style/index.less
+  //'tint(@layout-sider-background, 10%)': 'var(--layout-sider-background-1)',
+  // notification/style/index.less
+  'shade(@text-color-secondary, 40%)': '@text-color',
+  // popover/style/index.less
+  'box-shadow: ~\'0 0 8px @{shadow-color} \\9\';': '',
+  // radio/style/index.less
+  'fade(@radio-dot-color, 8%)': 'var(--primary-fade-8)',
+  // switch/style/index.less
+  'fade(@switch-color, 20%)': 'var(--primary-fade-20)',
+  // menu/style/index.less
+  'fade(@primary-color, 20%)': 'var(--primary-fade-20)',
+  // button/style/mixin.less
+  'fadein(@btn-text-hover-bg, 1%)': 'var(--btn-text-active-bg)'
+};
+
+/**
+ * 修改less变量的预处理器
+ */
+class AntdLessPreProcessor {
+  constructor(variables, replaces) {
+    this.variables = variables || {};
+    this.replaces = replaces || {};
+  }
+
+  process(src) {
+    let result = src;
+    Object.keys(this.variables).forEach((key) => {
+      result = result.replace(new RegExp(key + ':[^;]*;', 'g'), key + ': ' + this.variables[key] + ';');
+    });
+    Object.keys(this.replaces).forEach((key) => {
+      //result = result.replaceAll(key, this.replaces[key]);
+      // replaceAll以及正则如果含有符号容易报错, 使用如下实现全部替换
+      result = result.split(key).join(this.replaces[key]);
+    });
+    return result;
+  }
+}
+
+/**
+ * 转换antd变量的less插件
+ */
+class DynamicAntdLess {
+  constructor(opt) {
+    this.option = {
+      variables: Object.assign({}, variables, opt ? opt.variables : null),
+      replaces: Object.assign({}, replaces, opt ? opt.replaces : null),
+    };
+  }
+
+  install(less, manager, functions) {
+    // 添加预处理器
+    manager.addPreProcessor(new AntdLessPreProcessor(this.option.variables, this.option.replaces), 2000);
+
+    // 添加自定义函数, 替代fade函数以支持var()
+    const call = (name, ...args) => new less.tree.Call(name, [new less.tree.Expression(args)]);
+    functions.add('ele-fade', (node, amount) => {
+      if (node.name === 'var') {
+        const color = node.args[0].value;
+        if (color === '--primary-color' || color === '--info-color') {
+          return call('var', new less.tree.Anonymous('--primary-fade-' + amount.value));
+        }
+        if (color === '--error-color' || color === '--highlight-color') {
+          return call('var', new less.tree.Anonymous('--error-fade-' + amount.value));
+        }
+        if (color === '--warning-color') {
+          return call('var', new less.tree.Anonymous('--warning-fade-' + amount.value));
+        }
+        if (color === '--success-color') {
+          return call('var', new less.tree.Anonymous('--success-fade-' + amount.value));
+        }
+        return call('var', new less.tree.Anonymous(color + '-fade-unknown'));
+      }
+      const f = functions.get('fade');
+      return f ? f(node, amount) : node;
+    });
+  }
+}
+
+module.exports = DynamicAntdLess;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -19,7 +19,6 @@
    "cropperjs": "~1.5.12",
    "echarts": "~5.1.2",
    "echarts-wordcloud": "~2.0.0",
-    "ele-admin-pro": "~1.5.0",
    "lodash": "^4.17.21",
    "nprogress": "~0.2.0",
    "tinymce": "~5.8.2",
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,9 +5,9 @@
 </template>

 <script>
-import zh_CN from 'ele-admin-pro/packages/lang/zh_CN';
-import zh_TW from 'ele-admin-pro/packages/lang/zh_TW';
-import en from 'ele-admin-pro/packages/lang/en_US';
+import zh_CN from '@/components/ele-admin-pro/packages/lang/zh_CN';
+import zh_TW from '@/components/ele-admin-pro/packages/lang/zh_TW';
+import en from '@/components/ele-admin-pro/packages/lang/en_US';

 const languages = {zh_CN, zh_TW, en};

--- a/src/api/ecology/road-sound.js
+++ b/src/api/ecology/road-sound.js
@@ -48,7 +48,7 @@ const updateRoadNoise = function (data) {
 }

 // -------------------------统计---------------------
-const pageRoadNoiseStatisticUrl = '/sound/road/collect/page';
+const pageRoadNoiseStatisticUrl = '/sound/road/noise/statistic';
 export {
    pageBillUrl,
    saveRoadNoiseBill,
--- a/src/components/ele-admin-pro/README.md
+++ b/src/components/ele-admin-pro/README.md
@@ -0,0 +1,32 @@
+## 简介
+
+EleAdminPro是一套基于 Vue3、AntDesignVue 扩展的后台管理模板组件库, 
+官网地址: [https://eleadmin.com](https://eleadmin.com/) .
+
+## 组件
+
+名称 | 描述 | 版本说明 
+--- | --- | ---
+EleAvatarList | 头像列表组件 | 
+EleChart | echarts图表组件 | 
+EleCropper | 图片裁剪组件 | 
+EleCropperModal | 图片裁剪弹窗组件 | 
+EleEditTag | 标签输入框组件 | 
+EleFileList | 文件列表组件 | 
+EleIconPicker | 图标选择器 | 
+EleMapPicker | 地图选择弹窗 | 
+EleProBreadcrumb | 布局面包屑组件 | v1.1.0新增
+ELeProHeader | 布局顶栏组件 | v1.1.0新增
+EleProLayout | 布局组件 | v1.1.0新增
+EleProSetting | 主题设置抽屉组件 | v1.1.0新增
+EleProSidebar | 布局侧边栏组件 | v1.1.0新增
+EleProSidebarItem | 布局菜单item组件 | v1.1.0新增
+EleProTable | 高级表格组件 | v1.1.0新增
+EleProTableColumn | 高级表格column组件 | v1.1.0新增
+EleProTableTools | 高级表格工具按钮组件 | v1.1.0新增
+EleProTabs | 布局多页签组件 | v1.1.0新增
+EleResult | 操作结果组件 | 
+ElTableDraggable | 拖拽排序表格组件 | 
+EleTagsInput | 标签输入组件 | 
+EleToolbar | 表格工具栏组件 | v1.1.0新增
+EleWordCloud | 词云组件 | 
--- a/src/components/ele-admin-pro/package.json
+++ b/src/components/ele-admin-pro/package.json
@@ -0,0 +1,64 @@
+{
+  "name": "ele-admin-pro",
+  "version": "1.5.0",
+  "description": "ele-admin-pro library",
+  "main": "packages/index.js",
+  "private": false,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "build:lib": "vue-cli-service build --target lib --name ele-admin-pro --dest lib packages/index.js",
+    "lint": "vue-cli-service lint",
+    "theme:dynamic": "vue-cli-service build --target lib --name dynamic --dest dist packages/style/dynamic.less"
+  },
+  "keywords": [
+    "ele-admin-pro"
+  ],
+  "author": "eclouds@foxmail.com",
+  "license": "SEE LICENSE IN <https://eleadmin.com/copyright>",
+  "homepage": "https://eleadmin.com",
+  "peerDependencies": {
+    "ant-design-vue": ">=2.0.0",
+    "nprogress": ">=0.2.0",
+    "vue": ">=3.0.0",
+    "vuedraggable": ">=4.0.0"
+  },
+  "devDependencies": {
+    "@amap/amap-jsapi-loader": "~1.0.1",
+    "@tinymce/tinymce-vue": "~4.0.4",
+    "@vue/cli-plugin-babel": "~4.5.13",
+    "@vue/cli-plugin-eslint": "~4.5.13",
+    "@vue/cli-plugin-router": "~4.5.13",
+    "@vue/cli-plugin-vuex": "~4.5.13",
+    "@vue/cli-service": "~4.5.13",
+    "@vue/compiler-sfc": "~3.1.5",
+    "ant-design-vue": "~2.2.2",
+    "axios": "~0.21.1",
+    "babel-eslint": "~10.1.0",
+    "core-js": "~3.15.2",
+    "countup.js": "~2.0.7",
+    "cropperjs": "~1.5.12",
+    "echarts": "~5.1.2",
+    "echarts-wordcloud": "~2.0.0",
+    "eslint": "~6.8.0",
+    "eslint-plugin-vue": "~7.13.0",
+    "less": "~4.1.1",
+    "less-loader": "~7.3.0",
+    "nprogress": "~0.2.0",
+    "tinymce": "~5.8.2",
+    "postcss": "~8.3.5",
+    "vue": "~3.1.5",
+    "vue-axios": "~3.2.4",
+    "vue-i18n": "~9.1.7",
+    "vue-router": "~4.0.10",
+    "vuedraggable": "~4.0.3",
+    "vuex": "~4.0.2",
+    "xgplayer-vue": "~1.1.5",
+    "xlsx": "~0.17.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}
--- a/src/components/ele-admin-pro/packages/ele-avatar-list/index.js
+++ b/src/components/ele-admin-pro/packages/ele-avatar-list/index.js
@@ -0,0 +1,8 @@
+/** 头像列表组件 license by http://eleadmin.com */
+import EleAvatarList from './src/main';
+
+EleAvatarList.install = function (app) {
+  app.component(EleAvatarList.name, EleAvatarList);
+};
+
+export default EleAvatarList;
--- a/src/components/ele-admin-pro/packages/ele-avatar-list/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-avatar-list/src/main.vue
@@ -0,0 +1,145 @@
+<!-- 头像列表组件 license by http://eleadmin.com -->
+<template>
+  <div class="ele-avatar-list">
+    <template v-for="(item,index) in list">
+      <template v-if="tooltip">
+        <a-tooltip
+          :key="index"
+          :title="item[name]"
+          :placement="placement"
+          :arrow-point-at-center="true"
+          :overlay-class-name="overlayClassName"
+          :overlay-style="overlayStyle">
+          <a-avatar
+            :shape="shape"
+            :size="size"
+            :src="item[avatar]"
+            :alt="item[name]"
+            :style="[commonStyle, itemStyle, avatarStyle]"/>
+        </a-tooltip>
+      </template>
+      <template v-else>
+        <a-avatar
+          :key="index"
+          :shape="shape"
+          :size="size"
+          :src="item[avatar]"
+          :alt="item[name]"
+          :style="[commonStyle, itemStyle, avatarStyle]"/>
+      </template>
+    </template>
+    <a-avatar
+      v-if="showMore"
+      class="ele-avatar-list-more"
+      :shape="shape"
+      :size="size"
+      :style="[commonStyle, itemStyle, moreStyle]">
+      +{{ data.length - max }}
+    </a-avatar>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EleAvatarList',
+  props: {
+    // 头像数据
+    data: {
+      type: Array,
+      required: true
+    },
+    // 最大显示个数
+    max: {
+      type: Number,
+      default: 0
+    },
+    // name字段名
+    name: {
+      type: String,
+      default: 'name'
+    },
+    // avatar字段名
+    avatar: {
+      type: String,
+      default: 'avatar'
+    },
+    // avatar形状
+    shape: {
+      type: String,
+      default: 'circle'
+    },
+    // avatar大小
+    size: {
+      type: [Number, String],
+      default: 'default'
+    },
+    // 自定义item样式
+    itemStyle: [String, Object],
+    // 自定义avatar样式
+    avatarStyle: [String, Object],
+    // 自定义more样式
+    moreStyle: [String, Object],
+    // 是否需要tooltip
+    tooltip: {
+      type: Boolean,
+      default: true
+    },
+    // tooltip位置
+    placement: {
+      type: String,
+      default: 'top'
+    },
+    // tooltip自定义class
+    overlayClassName: String,
+    // tooltip自定义样式
+    overlayStyle: String
+  },
+  computed: {
+    // 公共样式
+    commonStyle() {
+      if (typeof this.size === 'number') {
+        return {
+          marginLeft: `${-this.size / 3}px`
+        };
+      } else {
+        return {
+          marginLeft: {large: '-12px', default: '-10px', small: '-8px'}[this.size]
+        };
+      }
+    },
+    // 头像列表
+    list() {
+      if (!this.max || this.data.length <= this.max) {
+        return this.data;
+      }
+      return this.data.slice(0, this.max);
+    },
+    // 是否显示更多
+    showMore() {
+      return this.max && this.data.length > this.max;
+    }
+  }
+}
+</script>
+
+<style>
+.ele-avatar-list {
+  display: inline-block;
+}
+
+.ele-avatar-list .ant-avatar {
+  cursor: pointer;
+  border: 1px solid #fff;
+  box-sizing: content-box;
+}
+
+.ele-avatar-list .ant-avatar:first-child {
+  margin-left: 0 !important;
+}
+
+.ele-avatar-list .ele-avatar-list-more {
+  color: #f56a00;
+  background: #fde3cf;
+  cursor: default;
+}
+</style>
--- a/src/components/ele-admin-pro/packages/ele-chart/index.js
+++ b/src/components/ele-admin-pro/packages/ele-chart/index.js
@@ -0,0 +1,8 @@
+/** echarts 图表组件封装 license by http://eleadmin.com */
+import EleChart from './src/main';
+
+EleChart.install = function (app) {
+  app.component(EleChart.name, EleChart);
+};
+
+export default EleChart;
--- a/src/components/ele-admin-pro/packages/ele-chart/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-chart/src/main.vue
@@ -0,0 +1,268 @@
+<!-- echarts 图表组件封装 https://github.com/ecomfe/vue-echarts -->
+<template>
+  <div class="ele-charts"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import EleCharTheme from './theme.js';
+// 改变后需要重新初始化的属性
+const INIT_TRIGGERS = ['theme', 'initOptions'];
+// 改变后需要重新监听options改变的属性
+const REWATCH_TRIGGERS = ['manualUpdate', 'watchShallow'];
+
+export default {
+  name: 'EleChart',
+  props: {
+    // 主题
+    theme: {
+      type: [String, Object],
+      default() {
+        return EleCharTheme;
+      }
+    },
+    // 图表初始配置
+    initOptions: Object,
+    // 图表配置
+    options: Object,
+    // 实例分组
+    group: String,
+    // 是否关闭深度监听options改变
+    watchShallow: Boolean,
+    // 是否关闭响应式更新
+    manualUpdate: Boolean
+  },
+  computed: {
+    // 屏幕宽度
+    screenWidth() {
+      try {
+        return this.$store.state.theme.screenWidth;
+      } catch (e) {
+        return null;
+      }
+    },
+    // 侧边栏折叠状态
+    collapse() {
+      try {
+        return this.$store.state.theme.collapse;
+      } catch (e) {
+        return null;
+      }
+    }
+  },
+  watch: {
+    group(group) {
+      this.chart.group = group;
+    },
+    screenWidth() {
+      this.resize();
+    },
+    collapse() {
+      setTimeout(() => {
+        this.resize();
+      }, 360);
+    }
+  },
+  created() {
+    this.initOptionsWatcher();
+    INIT_TRIGGERS.forEach(prop => {
+      this.$watch(
+        prop,
+        () => {
+          this.refresh();
+        },
+        {deep: true}
+      );
+    });
+    REWATCH_TRIGGERS.forEach(prop => {
+      this.$watch(prop, () => {
+        this.initOptionsWatcher();
+        this.refresh();
+      });
+    });
+  },
+  mounted() {
+    if (this.options) {
+      this.init();
+    }
+  },
+  unmounted() {
+    if (this.chart) {
+      this.destroy();
+    }
+  },
+  methods: {
+    /* 初始化echarts */
+    init(options) {
+      if (this.chart) {
+        return;
+      }
+      const chart = echarts.init(this.$el, this.theme, this.initOptions);
+      if (this.group) {
+        chart.group = this.group;
+      }
+      chart.setOption(options || this.manualOptions || this.options || {}, true);
+      // echarts事件监听
+      Object.keys(this.$attrs).forEach(event => {
+        const handler = this.$attrs[event]
+        if (handler instanceof Function) {
+          if (event.indexOf('zr:') === 0) {
+            chart.getZr().on(event.slice(3), handler);
+          } else {
+            chart.on(event, handler);
+          }
+        }
+      });
+      // 增加实例属性
+      Object.defineProperties(this, {
+        width: {
+          configurable: true,
+          get: () => {
+            return this.delegateGet('getWidth');
+          }
+        },
+        height: {
+          configurable: true,
+          get: () => {
+            return this.delegateGet('getHeight');
+          }
+        },
+        isDisposed: {
+          configurable: true,
+          get: () => {
+            return !!this.delegateGet('isDisposed');
+          }
+        },
+        computedOptions: {
+          configurable: true,
+          get: () => {
+            return this.delegateGet('getOption');
+          }
+        }
+      });
+      this.chart = chart;
+    },
+    /* 初始化options属性变化监听 */
+    initOptionsWatcher() {
+      if (this.__unwatchOptions) {
+        this.__unwatchOptions();
+        this.__unwatchOptions = null;
+      }
+      if (!this.manualUpdate) {
+        this.__unwatchOptions = this.$watch(
+          'options',
+          (val, oldVal) => {
+            if (!this.chart && val) {
+              this.init();
+            } else {
+              this.chart.setOption(val, val !== oldVal);
+            }
+          },
+          {deep: !this.watchShallow}
+        );
+      }
+    },
+    /* 显式修改options */
+    mergeOptions(options, notMerge, lazyUpdate) {
+      if (this.manualUpdate) {
+        this.manualOptions = options;
+      }
+      if (!this.chart) {
+        this.init(options);
+      } else {
+        this.delegateMethod('setOption', options, notMerge, lazyUpdate);
+      }
+    },
+    /* 刷新echarts */
+    refresh() {
+      if (this.chart) {
+        this.destroy();
+        this.init();
+      }
+    },
+    /* 销毁echarts */
+    destroy() {
+      this.dispose();
+      this.chart = null;
+    },
+    /* echarts实例方法 */
+    resize(options) {
+      this.delegateMethod('resize', options);
+    },
+    appendData(params) {
+      this.delegateMethod('appendData', params);
+    },
+    clear() {
+      this.delegateMethod('clear');
+    },
+    showLoading(type, options) {
+      this.delegateMethod('showLoading', type, options);
+    },
+    hideLoading() {
+      this.delegateMethod('hideLoading');
+    },
+    dispatchAction(payload) {
+      this.delegateMethod('dispatchAction', payload);
+    },
+    convertToPixel(finder, value) {
+      return this.delegateMethod('convertToPixel', finder, value);
+    },
+    convertFromPixel(finder, value) {
+      return this.delegateMethod('convertFromPixel', finder, value);
+    },
+    containPixel(finder, value) {
+      return this.delegateMethod('containPixel', finder, value);
+    },
+    getDataURL(options) {
+      return this.delegateMethod('getDataURL', options);
+    },
+    getConnectedDataURL(options) {
+      return this.delegateMethod('getConnectedDataURL', options);
+    },
+    dispose() {
+      this.delegateMethod('dispose');
+    },
+    /* 调用echarts实例方法 */
+    delegateMethod(name, ...args) {
+      if (!this.chart) {
+        this.init();
+      }
+      return this.chart[name](...args);
+    },
+    /* 获取echarts属性 */
+    delegateGet(methodName) {
+      if (!this.chart) {
+        this.init();
+      }
+      return this.chart[methodName]();
+    }
+  },
+  /* echarts静态方法 */
+  connect(group) {
+    if (typeof group !== 'string') {
+      group = group.map(chart => chart.chart);
+    }
+    echarts.connect(group);
+  },
+  disconnect(group) {
+    echarts.disconnect(group);
+  },
+  getMap(mapName) {
+    return echarts.getMap(mapName);
+  },
+  registerMap(mapName, geoJSON, specialAreas) {
+    echarts.registerMap(mapName, geoJSON, specialAreas);
+  },
+  registerTheme(name, theme) {
+    echarts.registerTheme(name, theme);
+  },
+  graphic: echarts.graphic
+}
+</script>
+
+<style>
+.ele-charts > div:first-child {
+  max-width: 100%;
+  overflow: hidden;
+}
+</style>
--- a/src/components/ele-admin-pro/packages/ele-chart/src/theme.js
+++ b/src/components/ele-admin-pro/packages/ele-chart/src/theme.js
@@ -0,0 +1,395 @@
+/** echarts 图表主题 license by http://eleadmin.com */
+export default {
+  "color": [
+    "#3aa1ff",
+    "#4ecb73",
+    "#fbd437",
+    "#36cbcb",
+    "#f2637b",
+    "#975fe5",
+    "#fc8452",
+    "#ea7ccc",
+    "#5254cf"
+  ],
+  "backgroundColor": "rgba(0,0,0,0)",
+  "textStyle": {},
+  "title": {
+    "textStyle": {
+      "color": "#333333"
+    },
+    "subtextStyle": {
+      "color": "#888888"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "borderWidth": 1
+    },
+    "lineStyle": {
+      "width": "2"
+    },
+    "symbolSize": 4,
+    "symbol": "emptyCircle",
+    "smooth": false
+  },
+  "radar": {
+    "itemStyle": {
+      "borderWidth": 1
+    },
+    "lineStyle": {
+      "width": "2"
+    },
+    "symbolSize": 4,
+    "symbol": "emptyCircle",
+    "smooth": false
+  },
+  "bar": {
+    "barCategoryGap": "50%",
+    "itemStyle": {
+      "barBorderWidth": "0",
+      "barBorderColor": "#ccc"
+    }
+  },
+  "pie": {
+    "itemStyle": {
+      "borderWidth": "2",
+      "borderColor": "#fff"
+    }
+  },
+  "scatter": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#ccc"
+    }
+  },
+  "boxplot": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#ccc"
+    }
+  },
+  "parallel": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#ccc"
+    }
+  },
+  "sankey": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#ccc"
+    }
+  },
+  "funnel": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#ccc"
+    }
+  },
+  "gauge": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#ccc"
+    }
+  },
+  "candlestick": {
+    "itemStyle": {
+      "color": "#dd3f5d",
+      "color0": "#51bd4b",
+      "borderColor": "#dd3f5d",
+      "borderColor0": "#51bd4b",
+      "borderWidth": 1
+    }
+  },
+  "graph": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#ccc"
+    },
+    "lineStyle": {
+      "width": 1,
+      "color": "#aaa"
+    },
+    "symbolSize": 4,
+    "symbol": "emptyCircle",
+    "smooth": false,
+    "color": [
+      "#3aa1ff",
+      "#4ecb73",
+      "#fbd437",
+      "#36cbcb",
+      "#f2637b",
+      "#975fe5",
+      "#fc8452",
+      "#ea7ccc",
+      "#5254cf"
+    ],
+    "label": {
+      "color": "#eeeeee"
+    }
+  },
+  "map": {
+    "itemStyle": {
+      "areaColor": "#fafafa",
+      "borderColor": "#d9d9d9",
+      "borderWidth": 1
+    },
+    "label": {
+      "color": "#000",
+      "textBorderColor": "#fff",
+      "textBorderWidth": 1
+    }
+  },
+  "geo": {
+    "itemStyle": {
+      "areaColor": "#fafafa",
+      "borderColor": "#d9d9d9",
+      "borderWidth": 1
+    },
+    "label": {
+      "color": "#000",
+      "textBorderColor": "#fff",
+      "textBorderWidth": 1
+    },
+    "emphasis": {
+      "itemStyle": {
+        "areaColor": "rgba(255,215,0,0.8)",
+        "borderColor": "#d9d9d9",
+        "borderWidth": 1
+      }
+    }
+  },
+  "grid": {
+    "top": 30,
+    "right": 20,
+    "left": 60,
+    "bottom": 40
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      },
+      "alignWithLabel": true
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#555555"
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "type": "dashed",
+        "color": [
+          "#E0E6F1"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.2)",
+          "rgba(210,219,238,0.2)"
+        ]
+      }
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": false,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#555555"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "type": "dashed",
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.2)",
+          "rgba(210,219,238,0.2)"
+        ]
+      }
+    }
+  },
+  "logAxis": {
+    "axisLine": {
+      "show": false,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#555555"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.2)",
+          "rgba(210,219,238,0.2)"
+        ]
+      }
+    }
+  },
+  "timeAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#555555"
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.2)",
+          "rgba(210,219,238,0.2)"
+        ]
+      }
+    }
+  },
+  "toolbox": {
+    "iconStyle": {
+      "borderColor": "#888888"
+    },
+    "emphasis": {
+      "iconStyle": {
+        "borderColor": "#888888"
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#888888"
+    }
+  },
+  "tooltip": {
+    "axisPointer": {
+      "lineStyle": {
+        "color": "#ccc",
+        "width": 1
+      },
+      "crossStyle": {
+        "color": "#ccc",
+        "width": 1
+      }
+    }
+  },
+  "timeline": {
+    "lineStyle": {
+      "color": "#DAE1F5",
+      "width": 2
+    },
+    "itemStyle": {
+      "color": "#A4B1D7",
+      "borderWidth": "1"
+    },
+    "controlStyle": {
+      "color": "#A4B1D7",
+      "borderColor": "#A4B1D7",
+      "borderWidth": 1
+    },
+    "checkpointStyle": {
+      "color": "#316bf3",
+      "borderColor": "fff"
+    },
+    "label": {
+      "color": "#A4B1D7"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "color": "#FFF"
+      },
+      "controlStyle": {
+        "color": "#A4B1D7",
+        "borderColor": "#A4B1D7",
+        "borderWidth": 1
+      },
+      "label": {
+        "color": "#A4B1D7"
+      }
+    }
+  },
+  "visualMap": {
+    "itemHeight": 80,
+    "itemWidth": 15,
+    "color": [
+      "#bf444c",
+      "#d88273",
+      "#f6efa6"
+    ]
+  },
+  "dataZoom": {
+    "handleSize": "100%"
+  },
+  "markPoint": {
+    "label": {
+      "color": "#eeeeee"
+    },
+    "emphasis": {
+      "label": {
+        "color": "#eeeeee"
+      }
+    }
+  }
+}
--- a/src/components/ele-admin-pro/packages/ele-color-picker/index.js
+++ b/src/components/ele-admin-pro/packages/ele-color-picker/index.js
@@ -0,0 +1,8 @@
+/** 颜色选择器 license by http://eleadmin.com */
+import EleColorPicker from './src/main';
+
+EleColorPicker.install = function (app) {
+  app.component(EleColorPicker.name, EleColorPicker);
+};
+
+export default EleColorPicker;
--- a/src/components/ele-admin-pro/packages/ele-color-picker/src/color.js
+++ b/src/components/ele-admin-pro/packages/ele-color-picker/src/color.js
@@ -0,0 +1,305 @@
+const hsv2hsl = function (hue, sat, val) {
+  return [
+    hue,
+    (sat * val / ((hue = (2 - sat) * val) < 1 ? hue : 2 - hue)) || 0,
+    hue / 2
+  ];
+};
+
+// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
+// <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
+const isOnePointZero = function (n) {
+  return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1;
+};
+
+const isPercentage = function (n) {
+  return typeof n === 'string' && n.indexOf('%') !== -1;
+};
+
+// Take input from [0, n] and return it as [0, 1]
+const bound01 = function (value, max) {
+  if (isOnePointZero(value)) value = '100%';
+
+  const processPercent = isPercentage(value);
+  value = Math.min(max, Math.max(0, parseFloat(value)));
+
+  // Automatically convert percentage into number
+  if (processPercent) {
+    value = parseInt(value * max, 10) / 100;
+  }
+
+  // Handle floating point rounding errors
+  if ((Math.abs(value - max) < 0.000001)) {
+    return 1;
+  }
+
+  // Convert into [0, 1] range if it isn't already
+  return (value % max) / parseFloat(max);
+};
+
+const INT_HEX_MAP = {10: 'A', 11: 'B', 12: 'C', 13: 'D', 14: 'E', 15: 'F'};
+
+const toHex = function ({r, g, b}) {
+  const hexOne = function (value) {
+    value = Math.min(Math.round(value), 255);
+    const high = Math.floor(value / 16);
+    const low = value % 16;
+    return '' + (INT_HEX_MAP[high] || high) + (INT_HEX_MAP[low] || low);
+  };
+
+  if (isNaN(r) || isNaN(g) || isNaN(b)) return '';
+
+  return '#' + hexOne(r) + hexOne(g) + hexOne(b);
+};
+
+const HEX_INT_MAP = {A: 10, B: 11, C: 12, D: 13, E: 14, F: 15};
+
+const parseHexChannel = function (hex) {
+  if (hex.length === 2) {
+    return (HEX_INT_MAP[hex[0].toUpperCase()] || +hex[0]) * 16 + (HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1]);
+  }
+
+  return HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1];
+};
+
+const hsl2hsv = function (hue, sat, light) {
+  sat = sat / 100;
+  light = light / 100;
+  let smin = sat;
+  const lmin = Math.max(light, 0.01);
+  let sv;
+  let v;
+
+  light *= 2;
+  sat *= (light <= 1) ? light : 2 - light;
+  smin *= lmin <= 1 ? lmin : 2 - lmin;
+  v = (light + sat) / 2;
+  sv = light === 0 ? (2 * smin) / (lmin + smin) : (2 * sat) / (light + sat);
+
+  return {
+    h: hue,
+    s: sv * 100,
+    v: v * 100
+  };
+};
+
+// `rgbToHsv`
+// Converts an RGB color value to HSV
+// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
+// *Returns:* { h, s, v } in [0,1]
+const rgb2hsv = function (r, g, b) {
+  r = bound01(r, 255);
+  g = bound01(g, 255);
+  b = bound01(b, 255);
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h, s;
+  let v = max;
+
+  const d = max - min;
+  s = max === 0 ? 0 : d / max;
+
+  if (max === min) {
+    h = 0; // achromatic
+  } else {
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+
+  return {h: h * 360, s: s * 100, v: v * 100};
+};
+
+// `hsvToRgb`
+// Converts an HSV color value to RGB.
+// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
+// *Returns:* { r, g, b } in the set [0, 255]
+const hsv2rgb = function (h, s, v) {
+  h = bound01(h, 360) * 6;
+  s = bound01(s, 100);
+  v = bound01(v, 100);
+
+  const i = Math.floor(h);
+  const f = h - i;
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+  const mod = i % 6;
+  const r = [v, q, p, p, t, v][mod];
+  const g = [t, v, v, q, p, p][mod];
+  const b = [p, p, t, v, v, q][mod];
+
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255)
+  };
+};
+
+export default class Color {
+  constructor(options) {
+    this._hue = 0;
+    this._saturation = 100;
+    this._value = 100;
+    this._alpha = 100;
+
+    this.enableAlpha = false;
+    this.format = 'hex';
+    this.value = '';
+
+    options = options || {};
+
+    for (let option in options) {
+      if (Object.prototype.hasOwnProperty.call(options, option)) {
+        this[option] = options[option];
+      }
+    }
+
+    this.doOnChange();
+  }
+
+  set(prop, value) {
+    if (arguments.length === 1 && typeof prop === 'object') {
+      for (let p in prop) {
+        if (Object.prototype.hasOwnProperty.call(prop, p)) {
+          this[p] = prop[p];
+        }
+      }
+      this.doOnChange();
+    } else {
+      this[prop] = value;
+      this.doOnChange();
+    }
+  }
+
+  toRgb() {
+    return hsv2rgb(this._hue, this._saturation, this._value);
+  }
+
+  fromString(value) {
+    if (!value) {
+      this._hue = 0;
+      this._saturation = 100;
+      this._value = 100;
+      this._alpha = 100;
+      this.doOnChange();
+      return;
+    }
+
+    const fromHSV = (h, s, v) => {
+      this._hue = Math.max(0, Math.min(360, h));
+      this._saturation = Math.max(0, Math.min(100, s));
+      this._value = Math.max(0, Math.min(100, v));
+      this.doOnChange();
+    };
+
+    if (value.indexOf('hsl') !== -1) {
+      const parts = value.replace(/hsla|hsl|\(|\)/gm, '')
+        .split(/\s|,/g)
+        .filter((val) => val !== '')
+        .map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));
+      if (parts.length === 4) {
+        this._alpha = Math.floor(parseFloat(parts[3]) * 100);
+      } else if (parts.length === 3) {
+        this._alpha = 100;
+      }
+      if (parts.length >= 3) {
+        const {h, s, v} = hsl2hsv(parts[0], parts[1], parts[2]);
+        fromHSV(h, s, v);
+      }
+    } else if (value.indexOf('hsv') !== -1) {
+      const parts = value.replace(/hsva|hsv|\(|\)/gm, '')
+        .split(/\s|,/g)
+        .filter((val) => val !== '')
+        .map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));
+      if (parts.length === 4) {
+        this._alpha = Math.floor(parseFloat(parts[3]) * 100);
+      } else if (parts.length === 3) {
+        this._alpha = 100;
+      }
+      if (parts.length >= 3) {
+        fromHSV(parts[0], parts[1], parts[2]);
+      }
+    } else if (value.indexOf('rgb') !== -1) {
+      const parts = value.replace(/rgba|rgb|\(|\)/gm, '')
+        .split(/\s|,/g)
+        .filter((val) => val !== '')
+        .map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));
+      if (parts.length === 4) {
+        this._alpha = Math.floor(parseFloat(parts[3]) * 100);
+      } else if (parts.length === 3) {
+        this._alpha = 100;
+      }
+      if (parts.length >= 3) {
+        const {h, s, v} = rgb2hsv(parts[0], parts[1], parts[2]);
+        fromHSV(h, s, v);
+      }
+    } else if (value.indexOf('#') !== -1) {
+      const hex = value.replace('#', '').trim();
+      if (!/^(?:[0-9a-fA-F]{3}){1,2}|[0-9a-fA-F]{8}$/.test(hex)) {
+        return;
+      }
+      let r, g, b;
+      if (hex.length === 3) {
+        r = parseHexChannel(hex[0] + hex[0]);
+        g = parseHexChannel(hex[1] + hex[1]);
+        b = parseHexChannel(hex[2] + hex[2]);
+      } else if (hex.length === 6 || hex.length === 8) {
+        r = parseHexChannel(hex.substring(0, 2));
+        g = parseHexChannel(hex.substring(2, 4));
+        b = parseHexChannel(hex.substring(4, 6));
+      }
+      if (hex.length === 8) {
+        this._alpha = Math.floor(parseHexChannel(hex.substring(6)) / 255 * 100);
+      } else if (hex.length === 3 || hex.length === 6) {
+        this._alpha = 100;
+      }
+      const {h, s, v} = rgb2hsv(r, g, b);
+      fromHSV(h, s, v);
+    }
+  }
+
+  compare(color) {
+    return Math.abs(color._hue - this._hue) < 2 &&
+      Math.abs(color._saturation - this._saturation) < 1 &&
+      Math.abs(color._value - this._value) < 1 &&
+      Math.abs(color._alpha - this._alpha) < 1;
+  }
+
+  doOnChange() {
+    const {_hue, _saturation, _value, _alpha, format} = this;
+    if (this.enableAlpha) {
+      if (format === 'hsl') {
+        const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
+        this.value = `hsla(${_hue}, ${Math.round(hsl[1] * 100)}%, ${Math.round(hsl[2] * 100)}%, ${_alpha / 100})`;
+      } else if (format === 'hsv') {
+        this.value = `hsva(${_hue}, ${Math.round(_saturation)}%, ${Math.round(_value)}%, ${_alpha / 100})`;
+      } else {
+        const {r, g, b} = hsv2rgb(_hue, _saturation, _value);
+        this.value = `rgba(${r}, ${g}, ${b}, ${_alpha / 100})`;
+      }
+    } else {
+      if (format === 'hsl') {
+        const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
+        this.value = `hsl(${_hue}, ${Math.round(hsl[1] * 100)}%, ${Math.round(hsl[2] * 100)}%)`;
+      } else if (format === 'hsv') {
+        this.value = `hsv(${_hue}, ${Math.round(_saturation)}%, ${Math.round(_value)}%)`;
+      } else if (format === 'rgb') {
+        const {r, g, b} = hsv2rgb(_hue, _saturation, _value);
+        this.value = `rgb(${r}, ${g}, ${b})`;
+      } else {
+        this.value = toHex(hsv2rgb(_hue, _saturation, _value));
+      }
+    }
+  }
+}
--- a/src/components/ele-admin-pro/packages/ele-color-picker/src/components/ele-alpha-slider.vue
+++ b/src/components/ele-admin-pro/packages/ele-color-picker/src/components/ele-alpha-slider.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="ele-color-alpha-slider">
+    <div
+      ref="bar"
+      class="ele-color-alpha-slider-bar"
+      :style="{background: background}"
+      @click="handleClick">
+    </div>
+    <div
+      ref="thumb"
+      class="ele-color-alpha-slider-thumb"
+      :style="{left: thumbLeft + 'px'}">
+    </div>
+  </div>
+</template>
+
+<script>
+import draggable from '../draggable';
+
+export default {
+  name: 'EleAlphaSlider',
+  emits: ['update:alpha'],
+  props: {
+    // 颜色的rgb值
+    rgb: {
+      type: Object,
+      required: true
+    },
+    // 透明度
+    alpha: {
+      type: Number,
+      default: 100
+    }
+  },
+  data() {
+    return {
+      // 滑块位置
+      thumbLeft: 0,
+      // 滑轨背景
+      background: null
+    };
+  },
+  mounted() {
+    // 获取滑块的默认位置和滑轨的默认背景
+    this.thumbLeft = this.getThumbLeft();
+    this.background = this.getBackground();
+    // 滑块、滑轨绑定鼠标移动事件
+    const {bar, thumb} = this.$refs;
+    const dragConfig = {
+      drag: (event) => {
+        this.handleDrag(event);
+      },
+      end: (event) => {
+        this.handleDrag(event);
+      }
+    };
+    draggable(bar, dragConfig);
+    draggable(thumb, dragConfig);
+  },
+  methods: {
+    /* 滑轨点击事件 */
+    handleClick(event) {
+      if (event.target !== this.$refs.thumb) {
+        this.handleDrag(event);
+      }
+    },
+    /* 透明度选中改变事件 */
+    handleDrag(event) {
+      const {bar, thumb} = this.$refs,
+        rect = bar.getBoundingClientRect();
+      let left = event.clientX - rect.left;
+      left = Math.max(thumb.offsetWidth / 2, left);
+      left = Math.min(left, rect.width - thumb.offsetWidth / 2);
+      const alpha = Math.round((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth) * 100);
+      this.$emit('update:alpha', alpha);
+    },
+    /* 计算滑块位置 */
+    getThumbLeft() {
+      const {bar, thumb} = this.$refs;
+      return Math.round(this.alpha * (bar.offsetWidth - thumb.offsetWidth / 2) / 100);
+    },
+    /* 获取滑轨背景 */
+    getBackground() {
+      const {r, g, b} = this.rgb;
+      return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;
+    }
+  },
+  watch: {
+    rgb() {
+      this.background = this.getBackground();
+    },
+    alpha() {
+      this.thumbLeft = this.getThumbLeft();
+    }
+  }
+};
+</script>
+
+<style>
+.ele-color-picker .ele-color-alpha-slider {
+  height: 12px;
+  margin-top: 12px;
+  position: relative;
+  box-sizing: border-box;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+}
+
+.ele-color-picker .ele-color-alpha-slider .ele-color-alpha-slider-bar {
+  height: 100%;
+  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+  position: relative;
+}
+
+.ele-color-picker .ele-color-alpha-slider .ele-color-alpha-slider-thumb {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background: #fff;
+  box-sizing: border-box;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+  border: 1px solid #f0f0f0;
+  border-radius: 1px;
+  cursor: pointer;
+  z-index: 1;
+}
+</style>
--- a/src/components/ele-admin-pro/packages/ele-color-picker/src/components/ele-hue-slider.vue
+++ b/src/components/ele-admin-pro/packages/ele-color-picker/src/components/ele-hue-slider.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="ele-color-hue-slider">
+    <div
+      ref="bar"
+      class="ele-color-hue-slider-bar"
+      @click="handleClick">
+    </div>
+    <div
+      ref="thumb"
+      class="ele-color-hue-slider-thumb"
+      :style="{left: thumbLeft + 'px'}">
+    </div>
+  </div>
+</template>
+
+<script>
+import draggable from '../draggable';
+
+export default {
+  name: 'EleHueSlider',
+  emits: ['update:hue'],
+  props: {
+    // 选中的色相
+    hue: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+      // 滑块位置
+      thumbLeft: 0
+    };
+  },
+  mounted() {
+    // 获取滑块的默认位置
+    this.thumbLeft = this.getThumbLeft();
+    // 滑块、滑轨绑定鼠标移动事件
+    const {bar, thumb} = this.$refs;
+    const dragConfig = {
+      drag: (event) => {
+        this.handleDrag(event);
+      },
+      end: (event) => {
+        this.handleDrag(event);
+      }
+    };
+    draggable(bar, dragConfig);
+    draggable(thumb, dragConfig);
+  },
+  methods: {
+    /* 滑轨点击事件 */
+    handleClick(event) {
+      if (event.target !== this.$refs.thumb) {
+        this.handleDrag(event);
+      }
+    },
+    /* 颜色选中改变事件 */
+    handleDrag(event) {
+      const el = this.$el,
+        thumb = this.$refs.thumb,
+        rect = el.getBoundingClientRect();
+      let left = event.clientX - rect.left;
+      left = Math.min(left, rect.width - thumb.offsetWidth / 2);
+      left = Math.max(thumb.offsetWidth / 2, left);
+      const hue = Math.round((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth) * 360);
+      this.$emit('update:hue', hue);
+    },
+    /* 计算滑块位置 */
+    getThumbLeft() {
+      const el = this.$el,
+        thumb = this.$refs.thumb;
+      return Math.round(this.hue * (el.offsetWidth - thumb.offsetWidth / 2) / 360);
+    }
+  },
+  watch: {
+    hue() {
+      this.thumbLeft = this.getThumbLeft();
+    }
+  }
+};
+</script>
+
+<style>
+.ele-color-picker .ele-color-hue-slider {
+  height: 12px;
+  padding: 0 2px;
+  margin-top: 12px;
+  position: relative;
+  box-sizing: border-box;
+  background-color: #f00;
+}
+
+.ele-color-picker .ele-color-hue-slider .ele-color-hue-slider-bar {
+  height: 100%;
+  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+  position: relative;
+}
+
+.ele-color-picker .ele-color-hue-slider .ele-color-hue-slider-thumb {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background: #fff;
+  box-sizing: border-box;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+  border: 1px solid #f0f0f0;
+  border-radius: 1px;
+  cursor: pointer;
+  z-index: 1;
+}
+</style>
--- a/src/components/ele-admin-pro/packages/ele-color-picker/src/components/ele-predefine.vue
+++ b/src/components/ele-admin-pro/packages/ele-color-picker/src/components/ele-predefine.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="ele-color-predefine">
+    <div
+      v-for="(item, index) in colors"
+      :key="index"
+      class="ele-color-predefine-item"
+      @click="handleSelect(item)">
+      <div :style="{'background-color': item}"></div>
+      <check-outlined v-if="color ? (color.toLowerCase() === item.toLowerCase()) : false"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import {CheckOutlined} from '@ant-design/icons-vue';
+
+export default {
+  name: 'ElePredefine',
+  components: {CheckOutlined},
+  emits: ['update:color'],
+  props: {
+    // 颜色列表
+    colors: {
+      type: Array,
+      required: true
+    },
+    // 选中的颜色
+    color: String
+  },
+  methods: {
+    /* 颜色选中 */
+    handleSelect(color) {
+      this.$emit('update:color', color);
+    }
+  }
+};
+</script>
+
+<style>
+.ele-color-picker .ele-color-predefine {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 4px;
+}
+
+.ele-color-picker .ele-color-predefine .ele-color-predefine-item {
+  width: 20px;
+  height: 20px;
+  border-radius: 2px;
+  margin: 8px 0 0 8px;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+  position: relative;
+  overflow: hidden;
+}
+
+.ele-color-picker .ele-color-predefine .ele-color-predefine-item > div {
+  height: 100%;
+  cursor: pointer;
+}
+
+.ele-color-picker .ele-color-predefine .ele-color-predefine-item:nth-child(10n + 1) {
+  margin-left: 4px;
+}
+
+.ele-color-picker .ele-color-predefine .ele-color-predefine-item > .anticon {
+  color: #fff;
+  font-size: 12px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -6px auto auto -6px;
+}
+</style>
--- a/src/components/ele-admin-pro/packages/ele-color-picker/src/components/ele-sv-panel.vue
+++ b/src/components/ele-admin-pro/packages/ele-color-picker/src/components/ele-sv-panel.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="ele-color-svpanel" :style="{backgroundColor: background}">
+    <div class="ele-color-svpanel-white"></div>
+    <div class="ele-color-svpanel-black"></div>
+    <div
+      class="ele-color-svpanel-cursor"
+      :style="{top: cursorTop + 'px', left: cursorLeft + 'px'}">
+    </div>
+  </div>
+</template>
+
+<script>
+import draggable from '../draggable';
+
+export default {
+  name: 'EleSvPanel',
+  emits: ['change'],
+  props: {
+    // 色相
+    hue: {
+      type: Number,
+      required: true
+    },
+    // 饱和度
+    saturation: {
+      type: Number,
+      required: true
+    },
+    // 明度
+    value: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+      // 滑块位置top
+      cursorTop: 0,
+      // 滑块位置left
+      cursorLeft: 0,
+      // 色板背景色
+      background: 'hsl(0, 100%, 50%)'
+    };
+  },
+  mounted() {
+    // 获取滑块的默认位置和色板的默认背景
+    this.background = this.getBackground();
+    this.cursorLeft = this.getCursorLeft();
+    this.cursorTop = this.getCursorTop();
+    // 色板绑定鼠标移动事件
+    draggable(this.$el, {
+      drag: (event) => {
+        this.handleDrag(event);
+      },
+      end: (event) => {
+        this.handleDrag(event);
+      }
+    });
+  },
+  methods: {
+    /* 选中改变事件 */
+    handleDrag(event) {
+      const el = this.$el,
+        rect = el.getBoundingClientRect();
+      let left = event.clientX - rect.left;
+      left = Math.max(0, left);
+      left = Math.min(left, rect.width);
+      let top = event.clientY - rect.top;
+      top = Math.max(0, top);
+      top = Math.min(top, rect.height);
+      this.cursorLeft = left;
+      this.cursorTop = top;
+      this.$emit('change', {
+        saturation: left / rect.width * 100,
+        value: 100 - top / rect.height * 100
+      });
+    },
+    /* 计算滑块位置top */
+    getCursorTop() {
+      let {clientHeight: height} = this.$el;
+      return (100 - this.value) * height / 100;
+    },
+    /* 计算滑块位置left */
+    getCursorLeft() {
+      let {clientWidth: width} = this.$el;
+      return this.saturation * width / 100;
+    },
+    /* 获取色板背景 */
+    getBackground() {
+      return 'hsl(' + this.hue + ', 100%, 50%)';
+    }
+  },
+  watch: {
+    hue() {
+      this.background = this.getBackground();
+    },
+    saturation() {
+      this.cursorLeft = this.getCursorLeft();
+    },
+    value() {
+      this.cursorTop = this.getCursorTop();
+    }
+  }
+};
+</script>
+
+<style>
+.ele-color-picker .ele-color-svpanel {
+  position: relative;
+  height: 180px;
+}
+
+.ele-color-picker .ele-color-svpanel .ele-color-svpanel-white,
+.ele-color-picker .ele-color-svpanel .ele-color-svpanel-black {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.ele-color-picker .ele-color-svpanel .ele-color-svpanel-white {
+  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+}
+
+.ele-color-picker .ele-color-svpanel .ele-color-svpanel-black {
+  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
+}
+
+.ele-color-picker .ele-color-svpanel .ele-color-svpanel-cursor {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
+  transform: translate(-2px, -2px);
+  cursor: pointer;
+}
+</style>
--- a/src/components/ele-admin-pro/packages/ele-color-picker/src/draggable.js
+++ b/src/components/ele-admin-pro/packages/ele-color-picker/src/draggable.js
@@ -0,0 +1,38 @@
+let isDragging = false;
+
+export default function (element, options) {
+  const moveFn = function (event) {
+    if (options.drag) {
+      options.drag(event);
+    }
+  };
+  const upFn = function (event) {
+    document.removeEventListener('mousemove', moveFn);
+    document.removeEventListener('mouseup', upFn);
+    document.onselectstart = null;
+    document.ondragstart = null;
+
+    isDragging = false;
+
+    if (options.end) {
+      options.end(event);
+    }
+  };
+  element.addEventListener('mousedown', function (event) {
+    if (isDragging) return;
+    document.onselectstart = function () {
+      return false;
+    };
+    document.ondragstart = function () {
+      return false;
+    };
+
+    document.addEventListener('mousemove', moveFn);
+    document.addEventListener('mouseup', upFn);
+    isDragging = true;
+
+    if (options.start) {
+      options.start(event);
+    }
+  });
+}
--- a/src/components/ele-admin-pro/packages/ele-color-picker/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-color-picker/src/main.vue
@@ -0,0 +1,374 @@
+<template>
+  <a-dropdown
+    :trigger="['click']"
+    :disabled="disabled"
+    v-model:visible="showPicker"
+    @visibleChange="handleVisibleChange">
+    <div :class="triggerClass">
+      <div :class="['ele-border-split ele-color-picker-trigger-inner', {'is-empty': !displayValue}]">
+        <div :style="{'background-color': displayValue}"></div>
+      </div>
+      <div class="ele-text-secondary ele-color-picker-trigger-arrow">
+        <down-outlined v-if="displayValue"/>
+        <close-outlined v-else/>
+      </div>
+    </div>
+    <template #overlay>
+      <div :class="['ant-dropdown-menu ele-color-picker', popperClass]">
+        <div @click.stop="">
+          <ele-sv-panel
+            :hue="colorHue"
+            :saturation="colorSaturation"
+            :value="colorValue"
+            @change="handleSVChange"/>
+          <ele-hue-slider
+            :hue="colorHue"
+            @update:hue="handleHChange"/>
+          <ele-alpha-slider
+            v-if="showAlpha"
+            :rgb="colorRgb"
+            :alpha="colorAlpha"
+            @update:alpha="handleAChange"/>
+          <ele-predefine
+            v-if="predefine"
+            :color="displayValue"
+            :colors="predefineColors"
+            @update:color="handleColorChange"/>
+          <div class="ele-color-picker-footer">
+            <div class="ele-color-picker-value">
+              <a-input
+                size="small"
+                v-model:value="inputValue"
+                @pressEnter="handleInput"
+                @blur="handleInput"/>
+            </div>
+            <div class="ele-color-picker-button-group">
+              <locale-receiver component-name="ColorPicker">
+                <template #default="locale">
+                  <a-button
+                    size="small"
+                    @click="clearValue">
+                    {{ locale['btn:clear'] }}
+                  </a-button>
+                </template>
+              </locale-receiver>
+              <locale-receiver component-name="Popconfirm">
+                <template #default="locale">
+                  <a-button
+                    size="small"
+                    type="primary"
+                    @click="confirmValue">
+                    {{ locale['okText'] }}
+                  </a-button>
+                </template>
+              </locale-receiver>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </a-dropdown>
+</template>
+
+<script>
+import Color from './color';
+import EleSvPanel from './components/ele-sv-panel';
+import EleHueSlider from './components/ele-hue-slider';
+import EleAlphaSlider from './components/ele-alpha-slider';
+import ElePredefine from './components/ele-predefine';
+import {DownOutlined, CloseOutlined} from '@ant-design/icons-vue';
+import LocaleReceiver from 'ant-design-vue/es/locale-provider/LocaleReceiver';
+
+export default {
+  name: 'EleColorPicker',
+  components: {
+    EleSvPanel,
+    EleHueSlider,
+    EleAlphaSlider,
+    ElePredefine,
+    DownOutlined,
+    CloseOutlined,
+    LocaleReceiver
+  },
+  emits: [
+    'change',
+    'active-change',
+    'update:value'
+  ],
+  props: {
+    // 绑定的颜色, v-model
+    value: String,
+    // 绑定的颜色格式, hsl / hsv / hex / rgb
+    colorFormat: String,
+    // 是否支持透明度选择
+    showAlpha: Boolean,
+    // 预定义颜色
+    predefine: Array,
+    // 尺寸
+    size: String,
+    // 是否禁用
+    disabled: Boolean,
+    // 自定义下拉框类名
+    popperClass: String,
+    // 自定义类名
+    customClass: String
+  },
+  data() {
+    const color = new Color({
+      enableAlpha: this.showAlpha,
+      format: this.colorFormat
+    });
+    let displayValue = null;
+    if (this.value) {
+      color.fromString(this.value);
+      displayValue = color.value;
+    }
+    return {
+      // 颜色封装
+      color: color,
+      // 色相
+      colorHue: color._hue,
+      // 饱和度
+      colorSaturation: color._saturation,
+      // 明度
+      colorValue: color._value,
+      // 透明度
+      colorAlpha: color._alpha,
+      // rgb
+      colorRgb: color.toRgb(),
+      // 输入的颜色值
+      inputValue: displayValue,
+      // 当前显示的颜色值
+      displayValue: displayValue,
+      // 是否显示popper
+      showPicker: false
+    };
+  },
+  computed: {
+    triggerClass() {
+      return [
+        'ele-bg-white ele-border-split ele-color-picker-trigger',
+        {'ele-color-picker-large': this.size === 'large'},
+        {'ele-color-picker-small': this.size === 'small'},
+        {'is-disabled': this.disabled},
+        this.customClass
+      ];
+    },
+    predefineColors() {
+      return this.predefine && this.predefine.map((value) => {
+        const c = new Color({
+          enableAlpha: this.showAlpha,
+          format: this.colorFormat
+        });
+        c.fromString(value);
+        return c.value;
+      });
+    }
+  },
+  methods: {
+    /* 确定 */
+    confirmValue() {
+      this.$emit('update:value', this.color.value);
+      this.$emit('change', this.color.value);
+      this.$emit('active-change', this.color.value);
+      this.showPicker = false;
+    },
+    /* 清空 */
+    clearValue() {
+      this.$emit('update:value', null);
+      this.$emit('change', null);
+      this.$emit('active-change', null);
+      this.inputValue = null;
+      this.displayValue = null;
+      this.showPicker = false;
+    },
+    /* 色相改变处理 */
+    handleHChange(value) {
+      this.color.set('_hue', value);
+      this.colorHue = this.color._hue;
+      this.colorRgb = this.color.toRgb();
+      this.inputValue = this.color.value;
+      this.displayValue = this.color.value;
+      this.$emit('active-change', this.color.value);
+    },
+    /* 饱和度和明度改变处理 */
+    handleSVChange(obj) {
+      this.color.set({
+        _saturation: obj.saturation,
+        _value: obj.value
+      });
+      this.colorSaturation = this.color._saturation;
+      this.colorValue = this.color._value;
+      this.colorRgb = this.color.toRgb();
+      this.inputValue = this.color.value;
+      this.displayValue = this.color.value;
+      this.$emit('active-change', this.color.value);
+    },
+    /* 透明度改变处理 */
+    handleAChange(value) {
+      this.color.set('_alpha', value);
+      this.colorAlpha = this.color._alpha;
+      this.inputValue = this.color.value;
+      this.displayValue = this.color.value;
+      this.$emit('active-change', this.color.value);
+    },
+    /* 颜色改变处理 */
+    handleColorChange(value) {
+      if (value) {
+        if (value !== this.color.value) {
+          this.color.fromString(value);
+          this.colorHue = this.color._hue;
+          this.colorSaturation = this.color._saturation;
+          this.colorValue = this.color._value;
+          this.colorAlpha = this.color._alpha;
+          this.colorRgb = this.color.toRgb();
+        }
+        this.inputValue = this.color.value;
+        this.displayValue = this.color.value;
+        this.$emit('active-change', this.color.value);
+      }
+    },
+    /* 颜色输入改变处理 */
+    handleInput() {
+      if (this.inputValue) {
+        this.handleColorChange(this.inputValue);
+      } else {
+        this.inputValue = this.color.value;
+        this.displayValue = this.color.value;
+        this.$emit('active-change', this.color.value);
+      }
+    },
+    /* picker展开/关闭处理 */
+    handleVisibleChange(visible) {
+      if (!visible) {
+        if (this.value) {
+          this.handleColorChange(this.value);
+        } else {
+          this.inputValue = null;
+          this.displayValue = null;
+          this.$emit('active-change', null);
+        }
+      }
+    }
+  },
+  watch: {
+    value(value) {
+      if (value) {
+        this.handleColorChange(value);
+      } else {
+        this.inputValue = null;
+        this.displayValue = null;
+        this.$emit('active-change', null);
+      }
+    },
+    colorFormat(value) {
+      this.color.set('format', value);
+      this.inputValue = this.color.value;
+      this.displayValue = this.color.value;
+      this.$emit('active-change', this.color.value);
+    },
+    showAlpha(value) {
+      this.color.set('enableAlpha', value);
+      this.inputValue = this.color.value;
+      this.displayValue = this.color.value;
+      this.$emit('active-change', this.color.value);
+    }
+  }
+};
+</script>
+
+<style>
+/* trigger */
+.ele-color-picker-trigger {
+  width: 32px;
+  height: 32px;
+  position: relative;
+  display: inline-block;
+  padding: 4px;
+  border-radius: 2px;
+  border: 1px solid hsla(0, 0%, 60%, .15);
+  box-sizing: border-box;
+  text-align: center;
+  cursor: pointer;
+}
+
+.ele-color-picker-trigger .ele-color-picker-trigger-inner {
+  height: 100%;
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px hsla(0, 0%, 60%, .15);
+  overflow: hidden;
+}
+
+.ele-color-picker-trigger .ele-color-picker-trigger-inner:not(.is-empty) {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+}
+
+.ele-color-picker-trigger .ele-color-picker-trigger-inner > div {
+  height: 100%;
+}
+
+.ele-color-picker-trigger .ele-color-picker-trigger-arrow {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -6px auto auto -6px;
+  font-size: 12px;
+  line-height: 0;
+}
+
+.ele-color-picker-trigger .ele-color-picker-trigger-arrow > .anticon:not(.anticon-close) {
+  color: #fff;
+}
+
+/* 禁用状态 */
+.ele-color-picker-trigger.is-disabled {
+  cursor: not-allowed;
+}
+
+.ele-color-picker-trigger.is-disabled .ele-color-picker-trigger-inner {
+  opacity: .6;
+}
+
+/* 尺寸控制 */
+.ele-color-picker-trigger.ele-color-picker-large {
+  width: 40px;
+  height: 40px;
+}
+
+.ele-color-picker-trigger.ele-color-picker-small {
+  width: 24px;
+  height: 24px;
+  padding: 3px;
+}
+
+/* picker */
+.ele-color-picker.ant-dropdown-menu {
+  width: 280px;
+  padding: 12px;
+  box-sizing: content-box;
+}
+
+/* footer */
+.ele-color-picker .ele-color-picker-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+}
+
+.ele-color-picker .ele-color-picker-footer .ele-color-picker-value {
+  width: 140px;
+}
+
+.ele-color-picker .ele-color-picker-footer .ele-color-picker-value > .ant-input {
+  height: 24px;
+  line-height: 1;
+  padding: 0 4px;
+  font-size: 12px;
+  display: block;
+}
+
+.ele-color-picker .ele-color-picker-footer .ant-btn + .ant-btn {
+  margin-left: 8px;
+}
+</style>
--- a/src/components/ele-admin-pro/packages/ele-count-up/index.js
+++ b/src/components/ele-admin-pro/packages/ele-count-up/index.js
@@ -0,0 +1,8 @@
+/** 数字动画组件 license by http://eleadmin.com */
+import EleCountUp from './src/main';
+
+EleCountUp.install = function (app) {
+  app.component(EleCountUp.name, EleCountUp);
+};
+
+export default EleCountUp;
--- a/src/components/ele-admin-pro/packages/ele-count-up/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-count-up/src/main.vue
@@ -0,0 +1,155 @@
+<!-- 数字动画组件 https://github.com/xlsdg/vue-countup-v2 -->
+<template>
+  <span></span>
+</template>
+
+<script>
+import {CountUp} from 'countup.js';
+
+const typeOf = type => object => Object.prototype.toString.call(object) === `[object ${type}]`;
+// const isString = typeOf('String');
+// const isObject = typeOf('Object');
+const isFunction = typeOf('Function');
+export default {
+  __countup__: CountUp,
+  name: 'EleCountUp',
+  emits: ['ready'],
+  props: {
+    delay: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    endVal: {
+      type: Number,
+      required: true,
+    },
+    options: {
+      type: Object,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      instance: null,
+    };
+  },
+  // computed: {},
+  watch: {
+    endVal: {
+      handler(value) {
+        const that = this;
+        if (that.instance && isFunction(that.instance.update)) {
+          that.instance.update(value);
+        }
+      },
+      deep: false
+    }
+  },
+  methods: {
+    create() {
+      const that = this;
+      if (that.instance) {
+        return;
+      }
+      const dom = that.$el;
+      const instance = new CountUp(
+        dom,
+        that.endVal,
+        that.options
+      );
+      if (instance.error) {
+        // error
+        return;
+      }
+      that.instance = instance;
+      if (that.delay < 0) {
+        that.$emit('ready', instance, CountUp);
+        return;
+      }
+      setTimeout(() => instance.start(() => that.$emit('ready', instance, CountUp)), that.delay);
+    },
+    destroy() {
+      const that = this;
+      that.instance = null;
+    },
+    printValue(value) {
+      const that = this;
+      if (that.instance && isFunction(that.instance.printValue)) {
+        return that.instance.printValue(value);
+      }
+    },
+    start(callback) {
+      const that = this;
+      if (that.instance && isFunction(that.instance.start)) {
+        return that.instance.start(callback);
+      }
+    },
+    pauseResume() {
+      const that = this;
+      if (that.instance && isFunction(that.instance.pauseResume)) {
+        return that.instance.pauseResume();
+      }
+    },
+    reset() {
+      const that = this;
+      if (that.instance && isFunction(that.instance.reset)) {
+        return that.instance.reset();
+      }
+    },
+    update(newEndVal) {
+      const that = this;
+      if (that.instance && isFunction(that.instance.update)) {
+        return that.instance.update(newEndVal);
+      }
+    }
+  },
+  // beforeCreate() {
+  //   const that = this;
+  //   console.log('beforeCreate');
+  // },
+  // created() {
+  //   const that = this;
+  //   console.log('created');
+  // },
+  // beforeMount() {
+  //   const that = this;
+  //   console.log('beforeMount');
+  // },
+  mounted() {
+    const that = this;
+    // console.log('mounted');
+    that.create();
+  },
+  // beforeUpdate() {
+  //   const that = this;
+  //   console.log('beforeUpdate');
+  // },
+  // updated() {
+  //   const that = this;
+  //   console.log('updated');
+  // },
+  // activated() {
+  //   const that = this;
+  //   console.log('activated');
+  // },
+  // deactivated() {
+  //   const that = this;
+  //   console.log('deactivated');
+  // },
+  beforeUnmount() {
+    const that = this;
+    // console.log('beforeDestroy');
+    that.destroy();
+  },
+  // destroyed() {
+  //   const that = this;
+  //   console.log('destroyed');
+  // },
+  // errorCaptured(err, vm, info) {
+  //   const that = this;
+  //   console.log('errorCaptured');
+  //   return true;
+  // },
+};
+</script>
--- a/src/components/ele-admin-pro/packages/ele-cropper-modal/index.js
+++ b/src/components/ele-admin-pro/packages/ele-cropper-modal/index.js
@@ -0,0 +1,8 @@
+/** 图片裁剪弹窗组件 license by http://eleadmin.com */
+import EleCropperModal from './src/main';
+
+EleCropperModal.install = function (app) {
+  app.component(EleCropperModal.name, EleCropperModal);
+};
+
+export default EleCropperModal;
--- a/src/components/ele-admin-pro/packages/ele-cropper-modal/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-cropper-modal/src/main.vue
@@ -0,0 +1,191 @@
+<!-- 图片裁剪弹窗组件 license by http://eleadmin.com -->
+<template>
+  <locale-receiver component-name="ele">
+    <template #default="locale">
+      <a-modal
+        :visible="visible"
+        :title="title || locale.cropper.title"
+        :width="width"
+        :centered="centered"
+        :closable="closable"
+        :destroy-on-close="destroyOnClose"
+        :force-render="forceRender"
+        :keyboard="keyboard"
+        :mask="mask"
+        :mask-closable="maskClosable"
+        :mask-style="maskStyle"
+        :wrap-class-name="wrapClassName"
+        :z-index="zIndex"
+        :dialog-style="dialogStyle"
+        :dialog-class="dialogClass"
+        :footer="null"
+        @update:visible="updateVisible"
+        @cancel="onClosed">
+        <template #title>
+          <slot name="title"/>
+        </template>
+        <ele-cropper
+          v-if="show"
+          :src="src"
+          :aspect-ratio="aspectRatio"
+          :view-mode="viewMode"
+          :accept="accept"
+          :drag-mode="dragMode"
+          :initial-aspect-ratio="initialAspectRatio"
+          :min-container-width="minContainerWidth"
+          :min-container-height="minContainerHeight"
+          :min-canvas-width="minCanvasWidth"
+          :min-canvas-height="minCanvasHeight"
+          :min-crop-box-width="minCropBoxWidth"
+          :min-crop-box-height="minCropBoxHeight"
+          :cropped-width="croppedWidth"
+          :cropped-height="croppedHeight"
+          :cropped-min-width="croppedMinWidth"
+          :cropped-min-height="croppedMinHeight"
+          :cropped-max-width="croppedMaxWidth"
+          :cropped-max-height="croppedMaxHeight"
+          :cropped-fill-color="croppedFillColor"
+          :to-blob="toBlob"
+          :image-smoothing-enabled="imageSmoothingEnabled"
+          :image-smoothing-quality="imageSmoothingQuality"
+          :tools="tools"
+          :show-preview="showPreview"
+          :ok-text="okText"
+          @done="onDone"/>
+      </a-modal>
+    </template>
+  </locale-receiver>
+</template>
+
+<script>
+import LocaleReceiver from 'ant-design-vue/es/locale-provider/LocaleReceiver';
+import EleCropper from '../../ele-cropper';
+
+export default {
+  name: 'EleCropperModal',
+  components: {LocaleReceiver, EleCropper},
+  props: {
+    visible: Boolean,
+    // cropper参数
+    src: String,
+    // 裁剪比例
+    aspectRatio: {
+      type: Number,
+      default: 1
+    },
+    // 裁剪组件模式
+    viewMode: Number,
+    dragMode: String,
+    initialAspectRatio: Number,
+    minContainerWidth: Number,
+    minContainerHeight: Number,
+    minCanvasWidth: Number,
+    minCanvasHeight: Number,
+    minCropBoxWidth: Number,
+    minCropBoxHeight: Number,
+    croppedWidth: Number,
+    croppedHeight: Number,
+    croppedMinWidth: Number,
+    croppedMinHeight: Number,
+    croppedMaxWidth: Number,
+    croppedMaxHeight: Number,
+    croppedFillColor: Number,
+    imageSmoothingEnabled: Boolean,
+    imageSmoothingQuality: String,
+    // 是否返回blob数据
+    toBlob: Boolean,
+    // 允许上传的图片类型
+    accept: {
+      type: String,
+      default: 'image/*'
+    },
+    // 操作按钮布局
+    tools: {
+      type: [Boolean, String],
+      default: true
+    },
+    // 是否显示预览组件
+    showPreview: {
+      type: Boolean,
+      default: true
+    },
+    // 完成按钮文字
+    okText: String,
+    // 弹窗参数
+    centered: Boolean,
+    closable: {
+      type: Boolean,
+      default: true
+    },
+    destroyOnClose: Boolean,
+    forceRender: Boolean,
+    keyboard: {
+      type: Boolean,
+      default: true
+    },
+    mask: {
+      type: Boolean,
+      default: true
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+    maskStyle: Object,
+    title: String,
+    width: {
+      type: String,
+      default: '680px'
+    },
+    wrapClassName: String,
+    zIndex: {
+      type: Number,
+      default: 1000
+    },
+    dialogStyle: Object,
+    dialogClass: String
+  },
+  emits: ['done', 'open', 'closed', 'update:visible'],
+  data() {
+    return {
+      show: true
+    };
+  },
+  mounted() {
+    if (this.visible) {
+      this.onOpen();
+    }
+  },
+  methods: {
+    /* 裁剪完成 */
+    onDone(result) {
+      this.$emit('done', result);
+    },
+    /* 更新visible */
+    updateVisible(value) {
+      this.$emit('update:visible', value);
+    },
+    /* 弹窗打开回调 */
+    onOpen() {
+      this.show = true;
+      this.$emit('open');
+    },
+    /* 弹窗关闭回调 */
+    onClosed() {
+      if (this.destroyOnClose) {
+        this.show = false;
+      }
+      this.$emit('closed');
+    }
+  },
+  watch: {
+    visible() {
+      if (this.visible) {
+        this.onOpen();
+      } else {
+        this.onClosed();
+      }
+    }
+  }
+}
+</script>
--- a/src/components/ele-admin-pro/packages/ele-cropper/index.js
+++ b/src/components/ele-admin-pro/packages/ele-cropper/index.js
@@ -0,0 +1,8 @@
+/** 图片裁剪组件 license by http://eleadmin.com */
+import EleCropper from './src/main';
+
+EleCropper.install = function (app) {
+  app.component(EleCropper.name, EleCropper);
+};
+
+export default EleCropper;
--- a/src/components/ele-admin-pro/packages/ele-cropper/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-cropper/src/main.vue
@@ -0,0 +1,567 @@
+<!-- 图片裁剪组件 license by http://eleadmin.com -->
+<template>
+  <locale-receiver component-name="ele">
+    <template #default="locale">
+      <div class="ele-cropper">
+        <div class="ele-cropper-group">
+          <div class="ele-cropper-img-group">
+            <img
+              ref="eleCropperImg"
+              :src="imgSrc"
+              style="max-width: 100%;"
+              alt=""/>
+          </div>
+          <div
+            v-if="showPreview"
+            ref="eleCropperPreviews"
+            :style="pStyle"
+            class="ele-cropper-preview-group">
+            <div
+              :style="pItemStyle1"
+              class="ele-cropper-preview">
+            </div>
+            <div
+              v-if="this.aspectRatio===1"
+              :style="pItemStyle2"
+              class="ele-cropper-preview">
+            </div>
+            <div
+              v-if="this.aspectRatio!==1"
+              :style="pItemStyle3"
+              class="ele-cropper-preview">
+            </div>
+            <div
+              v-if="this.aspectRatio!==1"
+              :style="pItemStyle4"
+              class="ele-cropper-preview">
+            </div>
+          </div>
+        </div>
+        <div v-if="tools" class="ele-cropper-tool">
+          <a-button-group
+            v-for="(item, index) in toolGroup"
+            :key="index"
+            class="ele-cropper-tool-item">
+            <template v-for="(btn, i) in item">
+              <template v-if="btn==='zoomIn'">
+                <a-button
+                  :key="i"
+                  @click="onAction"
+                  :title="locale.cropper.zoomIn"
+                  data-method="zoom"
+                  data-option="0.1"
+                  type="primary"
+                  class="ele-cropper-tool-btn">
+                  <template #icon>
+                    <zoom-in-outlined/>
+                  </template>
+                </a-button>
+              </template>
+              <template v-else-if="btn==='zoomOut'">
+                <a-button
+                  :key="i"
+                  @click="onAction"
+                  :title="locale.cropper.zoomOut"
+                  data-method="zoom"
+                  data-option="-0.1"
+                  type="primary"
+                  class="ele-cropper-tool-btn">
+                  <template #icon>
+                    <zoom-out-outlined/>
+                  </template>
+                </a-button>
+              </template>
+              <template v-else-if="btn==='moveL'">
+                <a-button
+                  :key="i"
+                  @click="onAction"
+                  :title="locale.cropper.rotateLeft"
+                  data-method="move"
+                  data-option="-10"
+                  data-option2="0"
+                  type="primary"
+                  class="ele-cropper-tool-btn">
+                  <template #icon>
+                    <arrow-left-outlined/>
+                  </template>
+                </a-button>
+              </template>
+              <template v-else-if="btn==='moveR'">
+                <a-button
+                  :key="i"
+                  @click="onAction"
+                  :title="locale.cropper.rotateRight"
+                  data-method="move"
+                  data-option="10"
+                  data-option2="0"
+                  type="primary"
+                  class="ele-cropper-tool-btn">
+                  <template #icon>
+                    <arrow-right-outlined/>
+                  </template>
+                </a-button>
+              </template>
+              <template v-else-if="btn==='moveT'">
+                <a-button
+                  :key="i"
+                  @click="onAction"
+                  :title="locale.cropper.moveLeft"
+                  data-method="move"
+                  data-option="0"
+                  data-option2="-10"
+                  type="primary"
+                  class="ele-cropper-tool-btn">
+                  <template #icon>
+                    <arrow-up-outlined/>
+                  </template>
+                </a-button>
+              </template>
+              <template v-else-if="btn==='moveB'">
+                <a-button
+                  :key="i"
+                  @click="onAction"
+                  :title="locale.cropper.moveRight"
+                  data-method="move"
+                  data-option="0"
+                  data-option2="10"
+                  type="primary"
+                  class="ele-cropper-tool-btn">
+                  <template #icon>
+                    <arrow-down-outlined/>
+                  </template>
+                </a-button>
+              </template>
+              <template v-else-if="btn==='rotateL'">
+                <a-button
+                  :key="i"
+                  @click="onAction"
+                  :title="locale.cropper.moveUp"
+                  data-method="rotate"
+                  data-option="-45"
+                  type="primary"
+                  class="ele-cropper-tool-btn">
+                  <template #icon>
+                    <rotate-left-outlined/>
+                  </template>
+                </a-button>
+              </template>
+              <template v-else-if="btn==='rotateR'">
+                <a-button
+                  :key="i"
+                  @click="onAction"
+                  :title="locale.cropper.moveDown"
+                  data-method="rotate"
+                  data-option="45"
+                  type="primary"
+                  class="ele-cropper-tool-btn">
+                  <template #icon>
+                    <rotate-right-outlined/>
+                  </template>
+                </a-button>
+              </template>
+              <template v-else-if="btn==='scaleX'">
+                <a-button
+                  :key="i"
+                  @click="onAction"
+                  :title="locale.cropper.flipX"
+                  data-method="scaleX"
+                  data-option="-1"
+                  type="primary"
+                  class="ele-cropper-tool-btn">
+                  <template #icon>
+                    <swap-outlined/>
+                  </template>
+                </a-button>
+              </template>
+              <template v-else-if="btn==='scaleY'">
+                <a-button
+                  :key="i"
+                  @click="onAction"
+                  :title="locale.cropper.flipY"
+                  data-method="scaleY"
+                  data-option="-1"
+                  type="primary"
+                  class="ele-cropper-tool-btn">
+                  <template #icon>
+                    <swap-outlined style="transform: rotate(90deg);"/>
+                  </template>
+                </a-button>
+              </template>
+              <template v-else-if="btn==='reset'">
+                <a-button
+                  :key="i"
+                  @click="onAction"
+                  :title="locale.cropper.reset"
+                  data-method="reset"
+                  type="primary"
+                  class="ele-cropper-tool-btn">
+                  <template #icon>
+                    <sync-outlined/>
+                  </template>
+                </a-button>
+              </template>
+              <template v-else-if="btn==='upload'">
+                <a-upload
+                  :key="i"
+                  :before-upload="onUpload"
+                  :accept="accept"
+                  :show-upload-list="false">
+                  <a-button
+                    :title="locale.cropper.upload"
+                    type="primary"
+                    class="ele-cropper-tool-btn"
+                    style="border-top-right-radius:2px;border-bottom-right-radius:2px;">
+                    <template #icon>
+                      <upload-outlined/>
+                    </template>
+                  </a-button>
+                </a-upload>
+              </template>
+              <template v-else-if="btn==='crop'">
+                <a-button
+                  :key="i"
+                  @click="onAction"
+                  type="primary"
+                  data-method="getCroppedCanvas"
+                  data-option="{&quot;maxWidth&quot;:4096,&quot;maxHeight&quot;:4096}">
+                  <template #icon>
+                    <check-outlined/>
+                  </template>
+                  <span>{{ okText || locale.cropper.ok }}</span>
+                </a-button>
+              </template>
+            </template>
+          </a-button-group>
+        </div>
+      </div>
+    </template>
+  </locale-receiver>
+</template>
+
+<script>
+import LocaleReceiver from 'ant-design-vue/es/locale-provider/LocaleReceiver';
+import Cropper from 'cropperjs';
+import {
+  ZoomInOutlined,
+  ZoomOutOutlined,
+  ArrowLeftOutlined,
+  ArrowRightOutlined,
+  ArrowUpOutlined,
+  ArrowDownOutlined,
+  RotateLeftOutlined,
+  RotateRightOutlined,
+  SwapOutlined,
+  SyncOutlined,
+  UploadOutlined,
+  CheckOutlined
+} from '@ant-design/icons-vue';
+
+export default {
+  name: 'EleCropper',
+  components: {
+    LocaleReceiver,
+    ZoomInOutlined,
+    ZoomOutOutlined,
+    ArrowLeftOutlined,
+    ArrowRightOutlined,
+    ArrowUpOutlined,
+    ArrowDownOutlined,
+    RotateLeftOutlined,
+    RotateRightOutlined,
+    SwapOutlined,
+    SyncOutlined,
+    UploadOutlined,
+    CheckOutlined
+  },
+  props: {
+    // 图片地址
+    src: String,
+    // 裁剪比例
+    aspectRatio: {
+      type: Number,
+      default: 1
+    },
+    // 裁剪组件模式
+    viewMode: Number,
+    dragMode: String,
+    initialAspectRatio: Number,
+    minContainerWidth: Number,
+    minContainerHeight: Number,
+    minCanvasWidth: Number,
+    minCanvasHeight: Number,
+    minCropBoxWidth: Number,
+    minCropBoxHeight: Number,
+    croppedWidth: Number,
+    croppedHeight: Number,
+    croppedMinWidth: Number,
+    croppedMinHeight: Number,
+    croppedMaxWidth: Number,
+    croppedMaxHeight: Number,
+    croppedFillColor: Number,
+    imageSmoothingEnabled: Boolean,
+    imageSmoothingQuality: String,
+    // 是否返回blob数据
+    toBlob: Boolean,
+    // 允许上传的图片类型
+    accept: {
+      type: String,
+      default: 'image/*'
+    },
+    // 操作按钮布局
+    tools: {
+      type: [Boolean, String],
+      default: true
+    },
+    // 是否显示预览组件
+    showPreview: {
+      type: Boolean,
+      default: true
+    },
+    // 完成按钮文字
+    okText: String
+  },
+  emits: ['done'],
+  data() {
+    return {
+      // cropper实例
+      ins: null,
+      // 图片base64数据
+      imgSrc: '',
+      // 当前图片类型
+      imgType: 'image/jpeg',
+      // 预览组件宽度
+      previewWidth: 120
+    };
+  },
+  computed: {
+    // 预览组件样式
+    pStyle() {
+      return `width: ${this.previewWidth + 20}px;text-align: right;font-size: 0;`;
+    },
+    pItemStyle1() {
+      const h = this.previewWidth / (this.aspectRatio || 1);
+      return `width: ${this.previewWidth}px;height: ${h}px;`;
+    },
+    pItemStyle2() {
+      return this.pItemStyle1 + 'border-radius: 50%;margin-top: 10px;';
+    },
+    pItemStyle3() {
+      const w = this.previewWidth / 3 * 2 - 10, h = w / (this.aspectRatio || 1);
+      return `width: ${this.previewWidth}px;height: ${h}px;margin-top: 10px;`;
+    },
+    pItemStyle4() {
+      const w = this.previewWidth / 3, h = w / (this.aspectRatio || 1);
+      return `width: ${this.previewWidth}px;height: ${h}px;margin: 10px 0 0 10px;`;
+    },
+    // 解析按钮布局
+    toolGroup() {
+      if (typeof this.tools === 'string') {
+        let tool = [];
+        this.tools.split('|').forEach(g => {
+          tool.push(g.split(',').map(b => b.trim()));
+        });
+        return tool;
+      } else if (this.tools) {
+        return [
+          ['zoomIn', 'zoomOut'],
+          ['moveL', 'moveR', 'moveT', 'moveB'],
+          ['rotateL', 'rotateR'],
+          ['scaleX', 'scaleY'],
+          ['reset', 'upload'],
+          ['crop']
+        ];
+      }
+      return [];
+    }
+  },
+  mounted() {
+    // ie兼容
+    if (this.src && this.src.indexOf('data:image') !== 0 && (!!window.ActiveXObject || 'ActiveXObject' in window)) {
+      let req = new window.XMLHttpRequest();
+      req.open('GET', this.src, true);
+      req.responseType = 'arraybuffer';
+      req.onload = () => {
+        if ([200, 201].indexOf(req.status) === -1) {
+          console.error('cropper', req);
+          return;
+        }
+        let bytes = new Uint8Array(req.response), binary = '';
+        for (let i = 0; i < bytes.byteLength; i++) {
+          binary += String.fromCharCode(bytes[i]);
+        }
+        this.imgSrc = 'data:image/jpeg;base64,' + window.btoa(binary);
+        this.$nextTick(() => {
+          this.render();
+        });
+      };
+      req.send();
+    } else if (this.src) {
+      this.imgSrc = this.src;
+      this.$nextTick(() => {
+        this.render();
+      });
+    } else {
+      this.render();
+    }
+  },
+  methods: {
+    /* 渲染 */
+    render() {
+      if (this.ins) {
+        this.ins.destroy();
+      }
+      let options = {
+        aspectRatio: this.aspectRatio,
+        viewMode: this.viewMode,
+        dragMode: this.dragMode,
+        initialAspectRatio: this.initialAspectRatio,
+        minContainerWidth: this.minContainerWidth,
+        minContainerHeight: this.minContainerHeight,
+        minCanvasWidth: this.minCanvasWidth,
+        minCanvasHeight: this.minCanvasHeight,
+        minCropBoxWidth: this.minCropBoxWidth,
+        minCropBoxHeight: this.minCropBoxHeight
+      };
+      if (this.showPreview) {
+        options.preview = this.$refs.eleCropperPreviews.children;
+      }
+      this.ins = new Cropper(this.$refs.eleCropperImg, options);
+    },
+    /* 操作按钮点击事件 */
+    onAction(e) {
+      let method = this.getDataset(e.currentTarget, 'method'),
+        option = this.getDataset(e.currentTarget, 'option'),
+        secondOption = this.getDataset(e.currentTarget, 'option2');
+      if (!this.ins || !method) {
+        return;
+      }
+      let cropped = this.ins.cropped, result;
+      switch (method) {
+        case 'rotate':
+          if (cropped && this.viewMode > 0) {
+            this.in.clear();
+          }
+          break;
+        case 'getCroppedCanvas':
+          option = JSON.parse(option || '{}') || {};
+          if (this.imgType === 'image/jpeg') {
+            option.fillColor = '#fff';
+          }
+          option.width = this.croppedWidth;
+          option.height = this.croppedHeight;
+          option.minWidth = this.croppedMinWidth;
+          option.minHeight = this.croppedMinHeight;
+          option.maxWidth = this.croppedMaxWidth;
+          option.maxHeight = this.croppedMaxHeight;
+          option.fillColor = this.croppedFillColor;
+          option.imageSmoothingEnabled = this.imageSmoothingEnabled;
+          option.imageSmoothingQuality = this.imageSmoothingQuality;
+          break;
+      }
+      result = this.ins[method](option, secondOption);
+      switch (method) {
+        case 'rotate':
+          if (cropped && this.viewMode > 0) {
+            this.ins.crop();
+          }
+          break;
+        case 'scaleX':
+        case 'scaleY':
+          this.setDataset(e.currentTarget, 'option', -option);
+          break;
+        case 'getCroppedCanvas':
+          if (result) {
+            if (this.toBlob) {
+              result.toBlob((blob) => {
+                this.$emit('done', blob);
+              }, this.imgType);
+            } else {
+              this.$emit('done', result.toDataURL(this.imgType));
+            }
+          } else {
+            this.$message.error('裁剪失败');
+          }
+          break;
+      }
+    },
+    /* 图片上传处理 */
+    onUpload(file) {
+      this.imgType = file.type;
+      let reader = new FileReader();
+      reader.onload = (e) => {
+        this.ins.replace(e.target.result);
+      };
+      reader.readAsDataURL(file);
+      return false;
+    },
+    /* 获取dataset属性 */
+    getDataset(elem, key) {
+      if (elem.dataset) {
+        return elem.dataset[key];
+      } else {
+        return elem.getAttribute('data-' + key);
+      }
+    },
+    /* 设置dataset属性 */
+    setDataset(elem, key, value) {
+      if (elem.dataset) {
+        elem.dataset[key] = value;
+      } else {
+        elem.setAttribute('data-' + key, value);
+      }
+    }
+  }
+}
+</script>
+
+<style>
+@import '~cropperjs/dist/cropper.css';
+
+.ele-cropper .ele-cropper-group {
+  display: flex;
+}
+
+.ele-cropper .ele-cropper-img-group {
+  flex: 1;
+}
+
+.ele-cropper .ele-cropper-preview {
+  display: inline-block;
+  border: 1px solid hsla(0, 0%, 80%, .6);
+  vertical-align: top;
+  overflow: hidden;
+}
+
+/* 操作按钮 */
+.ele-cropper .ele-cropper-tool {
+  margin-top: 10px;
+}
+
+.ele-cropper .ele-cropper-tool-item {
+  margin: 10px 18px 0 0;
+}
+
+.ele-cropper .ele-cropper-tool-item:last-child {
+  margin-right: 0 !important;
+}
+
+.ele-cropper .ele-cropper-tool-btn {
+  width: auto;
+  padding: 0 10px;
+}
+
+.ele-cropper .ele-cropper-tool-item > .ant-btn + span {
+  vertical-align: -1px;
+}
+
+/* 小屏幕适应 */
+@media screen and (max-width: 768px) {
+  .ele-cropper .ele-cropper-preview-group {
+    display: none;
+  }
+
+  .ele-cropper .ele-cropper-tool-item {
+    margin-right: 6px;
+  }
+}
+</style>
--- a/src/components/ele-admin-pro/packages/ele-edit-tag/index.js
+++ b/src/components/ele-admin-pro/packages/ele-edit-tag/index.js
@@ -0,0 +1,8 @@
+/** 标签输入框组件 license by http://eleadmin.com */
+import EleEditTag from './src/main';
+
+EleEditTag.install = function (app) {
+  app.component(EleEditTag.name, EleEditTag);
+};
+
+export default EleEditTag;
--- a/src/components/ele-admin-pro/packages/ele-edit-tag/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-edit-tag/src/main.vue
@@ -0,0 +1,184 @@
+<!-- 标签输入框组件 license by http://eleadmin.com -->
+<template>
+  <div class="ele-edit-tag">
+    <ele-tag
+      v-for="(item,index) in data"
+      :key="index"
+      :closable="true"
+      :color="color"
+      :size="size"
+      @close="onClose(index)">
+      {{ item }}
+    </ele-tag>
+    <a-input
+      v-if="edit"
+      ref="input"
+      v-model:value="value"
+      :class="inputClass"
+      @blur="onEdit"
+      @keyup.enter="onEdit"/>
+    <ele-tag
+      v-else
+      :size="size"
+      class="ele-tag-add"
+      @click="showEdit">
+      <plus-outlined/>
+      <span>{{ placeholder }}</span>
+    </ele-tag>
+  </div>
+</template>
+
+<script>
+import {PlusOutlined} from '@ant-design/icons-vue';
+import EleTag from '../../ele-tag';
+
+export default {
+  name: 'EleEditTag',
+  components: {
+    PlusOutlined,
+    EleTag
+  },
+  emits: ['close', 'update:data'],
+  props: {
+    // tag数据
+    data: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    // 颜色
+    color: String,
+    // 尺寸
+    size: {
+      type: String,
+      default: 'mini',
+      validator: function (value) {
+        return ['large', 'middle', 'small', 'mini'].indexOf(value) !== -1;
+      }
+    },
+    // 提示文本
+    placeholder: {
+      type: String,
+      default: 'New Tag'
+    },
+    // 添加tag是否唯一
+    unique: {
+      type: Boolean,
+      default: true
+    },
+    // 自定义添加校验
+    validator: [Function, Array],
+    // 自定义移除校验
+    beforeRemove: Function
+  },
+  data() {
+    return {
+      // 是否显示输入框
+      edit: false,
+      // 输入框的值
+      value: ''
+    };
+  },
+  computed: {
+    /* 输入框class */
+    inputClass() {
+      return [
+        'ele-tag-input',
+        {'ele-tag-input-lg': this.size === 'large'},
+        {'ele-tag-input-md': this.size === 'middle'},
+        {'ele-tag-input-mini': this.size === 'mini'}
+      ];
+    }
+  },
+  methods: {
+    /* 显示编辑框 */
+    showEdit() {
+      this.edit = true;
+      this.$nextTick(() => {
+        this.$refs.input.focus();
+      });
+    },
+    /* 新增tag */
+    onEdit() {
+      if (this.value) {
+        // 唯一验证
+        if (this.unique && this.data.indexOf(this.value) !== -1) {
+          return this.$message.error(this.value + ' 已经存在');
+        }
+        // 自定义验证
+        if (this.validator) {
+          if (typeof this.validator === 'function') {
+            if (this.validator(this.value) === false) {
+              return;
+            }
+          } else if (!new RegExp(this.validator[0]).test(this.value)) {
+            return this.$message.error(this.validator[1]);
+          }
+        }
+        this.$emit('update:data', this.data.concat([this.value]));
+      }
+      this.edit = false;
+      this.value = '';
+    },
+    /* close事件 */
+    onClose(index) {
+      this.$emit('close', this.data[index]);
+      if (this.beforeRemove && this.beforeRemove(index) === false) {
+        return;
+      }
+      let data = this.data.slice(0, index).concat(this.data.slice(index + 1, this.data.length));
+      this.$emit('update:data', data);
+    }
+  }
+}
+</script>
+
+<style>
+.ele-edit-tag .ele-tag {
+  margin-bottom: 8px;
+}
+
+/* 添加按钮 */
+.ele-edit-tag .ele-tag-add {
+  background: none;
+  border-style: dashed;
+  cursor: text;
+}
+
+/* 输入框 */
+.ele-edit-tag .ele-tag-input {
+  width: 90px;
+  height: 26px;
+  padding: 0 6px;
+  font-size: 12px;
+  margin-bottom: 8px;
+  vertical-align: top;
+  line-height: 1;
+}
+
+.ele-edit-tag .ele-tag-input.ele-tag-input-md {
+  width: 100px;
+  height: 30px;
+  padding: 0 8px;
+  font-size: 14px;
+}
+
+.ele-edit-tag .ele-tag-input.ele-tag-input-lg {
+  width: 110px;
+  height: 34px;
+  padding: 0 10px;
+  font-size: 14px;
+}
+
+.ele-edit-tag .ele-tag-input.ele-tag-input-mini {
+  width: 80px;
+  height: 22px;
+  font-size: 12px;
+  padding: 0 4px;
+}
+
+.ele-edit-tag .ele-tag + .ele-tag-input {
+  margin-left: 8px;
+}
+</style>
--- a/src/components/ele-admin-pro/packages/ele-empty-layout/index.js
+++ b/src/components/ele-admin-pro/packages/ele-empty-layout/index.js
@@ -0,0 +1,8 @@
+/** 空布局 license by http://eleadmin.com */
+import EleEmptyLayout from './src/main';
+
+EleEmptyLayout.install = function (app) {
+  app.component(EleEmptyLayout.name, EleEmptyLayout);
+};
+
+export default EleEmptyLayout;
--- a/src/components/ele-admin-pro/packages/ele-empty-layout/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-empty-layout/src/main.vue
@@ -0,0 +1,26 @@
+<!-- 空布局 license by http://eleadmin.com -->
+<template>
+  <router-view #default="{Component}">
+    <keep-alive :include="include" :exclude="exclude">
+      <component :is="Component"/>
+    </keep-alive>
+  </router-view>
+</template>
+
+<script>
+import {computed} from 'vue'
+import {useStore} from 'vuex';
+
+export default {
+  name: 'EleEmptyLayout',
+  setup() {
+    const {state} = useStore();
+    const include = computed(() => state.theme.keepAliveInclude);
+    const exclude = computed(() => state.theme.keepAliveExclude);
+    return {
+      include,
+      exclude
+    };
+  }
+}
+</script>
--- a/src/components/ele-admin-pro/packages/ele-file-list/index.js
+++ b/src/components/ele-admin-pro/packages/ele-file-list/index.js
@@ -0,0 +1,8 @@
+/** 文件列表组件 license by http://eleadmin.com */
+import EleFileList from './src/main';
+
+EleFileList.install = function (app) {
+  app.component(EleFileList.name, EleFileList);
+};
+
+export default EleFileList;
--- a/src/components/ele-admin-pro/packages/ele-file-list/src/icon.js
+++ b/src/components/ele-admin-pro/packages/ele-file-list/src/icon.js
@@ -0,0 +1,330 @@
+/** 文件列表组件默认图标 license by http://eleadmin.com */
+export const icons = [
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_misc.png',
+    type: 'file'
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_folder.png',
+    type: 'dir'
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_code.png',
+    types: [
+      '.java',
+      '.js',
+      '.css',
+      '.vue',
+      '.ts',
+      '.tsx',
+      '.scss',
+      '.less',
+      '.c',
+      '.cpp',
+      '.cs',
+      '.jsp',
+      '.php',
+      '.asp',
+      '.py',
+      '.go',
+      '.kt',
+      '.lua'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_htm.png',
+    types: [
+      '.html',
+      '.htm'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_text.png',
+    types: [
+      '.txt'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_pdf.png',
+    types: [
+      '.pdf'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_word.png',
+    types: [
+      '.doc',
+      '.docx'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_excel.png',
+    types: [
+      '.xls',
+      '.xlsx'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_ppt.png',
+    types: [
+      '.ppt',
+      '.pptx'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_visio.png',
+    types: [
+      '.vsd'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_ps.png',
+    types: [
+      '.psd'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_cad.png',
+    types: [
+      '.dwg'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_flash.png',
+    types: [
+      '.swf'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_music.png',
+    types: [
+      '.mp3',
+      '.wav'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_video.png',
+    types: [
+      '.mp4',
+      '.rmvb',
+      '.flv',
+      '.avi',
+      '.3gp'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_picture.png',
+    types: [
+      '.png',
+      '.jpg',
+      '.jpeg',
+      '.gif',
+      '.bmp'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_fonts.png',
+    types: [
+      '.ttf',
+      '.woff'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_bt.png',
+    types: [
+      '.torrent'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_android.png',
+    types: [
+      '.apk'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_exe.png',
+    types: [
+      '.exe'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_ipa.png',
+    types: [
+      '.ipa',
+      '.dmg'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_zip.png',
+    types: [
+      '.zip',
+      '.rar',
+      '.7z'
+    ]
+  }
+];
+
+export const smIcons = [
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_misc_sm.png',
+    type: 'file'
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_folder_sm.png',
+    type: 'dir'
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_code_sm.png',
+    types: [
+      '.java',
+      '.js',
+      '.css',
+      '.vue',
+      '.ts',
+      '.tsx',
+      '.scss',
+      '.less',
+      '.c',
+      '.cpp',
+      '.cs',
+      '.jsp',
+      '.php',
+      '.asp',
+      '.py',
+      '.go',
+      '.kt',
+      '.lua'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_htm_sm.png',
+    types: [
+      '.html',
+      '.htm'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_text_sm.png',
+    types: [
+      '.txt'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_pdf_sm.png',
+    types: [
+      '.pdf'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_word_sm.png',
+    types: [
+      '.doc',
+      '.docx'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_excel_sm.png',
+    types: [
+      '.xls',
+      '.xlsx'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_ppt_sm.png',
+    types: [
+      '.ppt',
+      '.pptx'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_visio_sm.png',
+    types: [
+      '.vsd'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_ps_sm.png',
+    types: [
+      '.psd'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_cad_sm.png',
+    types: [
+      '.dwg'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_flash_sm.png',
+    types: [
+      '.swf'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_music_sm.png',
+    types: [
+      '.mp3',
+      '.wav'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_video_sm.png',
+    types: [
+      '.mp4',
+      '.rmvb',
+      '.flv',
+      '.avi',
+      '.3gp'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_picture_sm.png',
+    types: [
+      '.png',
+      '.jpg',
+      '.jpeg',
+      '.gif',
+      '.bmp'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_fonts_sm.png',
+    types: [
+      '.ttf',
+      '.woff'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_bt_sm.png',
+    types: [
+      '.torrent'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_android_sm.png',
+    types: [
+      '.apk'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_exe_sm.png',
+    types: [
+      '.exe'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_ipa_sm.png',
+    types: [
+      '.ipa',
+      '.dmg'
+    ]
+  },
+  {
+    icon: 'https://cdn.eleadmin.com/20200609/ic_file_zip_sm.png',
+    types: [
+      '.zip',
+      '.rar',
+      '.7z'
+    ]
+  }
+];
--- a/src/components/ele-admin-pro/packages/ele-file-list/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-file-list/src/main.vue
@@ -0,0 +1,639 @@
+<!-- 文件列表组件 license by http://eleadmin.com -->
+<template>
+  <locale-receiver component-name="ele">
+    <template #default="locale">
+      <div class="ele-file-list-group">
+        <!-- 网格模式 -->
+        <div v-if="grid" class="ele-file-list">
+          <!-- 头部全选框 -->
+          <div v-if="showCheckbox" class="ele-file-list-header">
+            <div class="ele-file-list-check-group" @click.stop="allChecked=!allChecked">
+              <i :class="['ele-file-list-check ele-file-icon-check ele-bg-primary', {'checked': allChecked}]"></i>
+              <span v-if="checked && checked.length">
+                {{ locale.fileList.selectTips.replace(/{total}/g, checked.length) }}
+              </span>
+              <span v-else>{{ locale.fileList.selectAll }}</span>
+            </div>
+          </div>
+          <!-- item -->
+          <div
+            v-for="(item,index) in data"
+            :key="index"
+            :class="['ele-file-list-item', {'checked': checked && checked.indexOf(item)!==-1}]"
+            @click="onItemClick(item)">
+            <!-- 背景和边框 -->
+            <div class="ele-file-list-item-bg ele-bg-primary"></div>
+            <div class="ele-file-list-item-border ele-border-primary"></div>
+            <!-- item body -->
+            <div class="ele-file-list-item-body">
+              <!-- 图标 -->
+              <div class="ele-file-list-item-icon">
+                <img :src="getIcon(item)" :class="{'ele-file-list-item-icon-image': item.thumbnail}" alt=""/>
+              </div>
+              <!-- 标题 -->
+              <div class="ele-file-list-item-title ele-text-primary" :title="item.name">{{ item.name }}</div>
+            </div>
+            <!-- 复选框 -->
+            <div v-if="showCheckbox" @click.stop="onCheckedChange(item)" class="ele-file-list-item-check ele-bg-white">
+              <i class="ele-file-icon-check ele-bg-primary"></i>
+            </div>
+          </div>
+        </div>
+        <!-- 表格模式 -->
+        <div v-else class="ele-file-list-table">
+          <!-- 表头 -->
+          <div :class="['ele-file-list-table-item ele-file-list-table-item-header', {'checked': allChecked}]">
+            <div class="ele-file-list-table-item-body">
+              <div v-if="showCheckbox" class="ele-file-list-table-item-check-group">
+                <i class="ele-file-list-table-item-check ele-file-icon-check ele-bg-primary"
+                   @click.stop="allChecked=!allChecked"></i>
+              </div>
+              <div class="ele-file-list-table-item-name" @click="onSortChange('name')">
+                <span v-if="!checked || !checked.length">
+                  <span>{{ locale.fileList.fileName }}</span>
+                  <i :class="getSortClass('name')">
+                    <i class="ele-border-primary"></i>
+                    <i class="ele-border-primary"></i>
+                  </i>
+                </span>
+                <span v-else @click.stop="allChecked=!allChecked">
+                  {{ locale.fileList.selectTips.replace(/{total}/g, checked.length) }}
+                </span>
+              </div>
+              <div class="ele-file-list-table-item-size" @click="onSortChange('length')">
+                <span>{{ locale.fileList.fileSize }}</span>
+                <i :class="getSortClass('length')">
+                  <i class="ele-border-primary"></i>
+                  <i class="ele-border-primary"></i>
+                </i>
+              </div>
+              <div class="ele-file-list-table-item-time" @click="onSortChange('updateTime')">
+                <span>{{ locale.fileList.fileTimestamp }}</span>
+                <i :class="getSortClass('updateTime')">
+                  <i class="ele-border-primary"></i>
+                  <i class="ele-border-primary"></i>
+                </i>
+              </div>
+            </div>
+          </div>
+          <!-- 列表item -->
+          <div
+            v-for="(item, i) in data"
+            :key="i"
+            :class="['ele-file-list-table-item', {'checked': checked && checked.indexOf(item)>=0}]">
+            <!-- 背景和边框 -->
+            <div class="ele-file-list-table-item-bg ele-bg-primary"></div>
+            <div class="ele-file-list-table-item-border ele-border-primary"></div>
+            <!-- item body cells -->
+            <div class="ele-file-list-table-item-body">
+              <!-- 复选框 -->
+              <div v-if="showCheckbox" class="ele-file-list-table-item-check-group">
+                <i class="ele-file-list-table-item-check ele-file-icon-check ele-bg-primary"
+                   @click.stop="onCheckedChange(item)"></i>
+              </div>
+              <!-- 图标和标题 -->
+              <div class="ele-file-list-table-item-name">
+                <div class="ele-file-list-table-item-icon">
+                  <img :src="getIcon(item)" class="ele-file-list-table-item-icon-image" alt=""
+                       @click="onItemClick(item)"/>
+                  <div
+                    class="ele-file-list-table-item-title ele-text-primary"
+                    :title="item.name"
+                    @click="onItemClick(item)">{{ item.name }}
+                  </div>
+                </div>
+                <div class="ele-file-list-table-item-tool-group">
+                  <slot name="tool" v-bind:item="item"></slot>
+                </div>
+              </div>
+              <!-- 大小 -->
+              <div class="ele-file-list-table-item-size">{{ item.length }}</div>
+              <!-- 修改时间 -->
+              <div class="ele-file-list-table-item-time">{{ item.updateTime }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </locale-receiver>
+</template>
+
+<script>
+import LocaleReceiver from 'ant-design-vue/es/locale-provider/LocaleReceiver';
+import {icons, smIcons} from './icon.js';
+
+export default {
+  name: 'EleFileList',
+  components: {LocaleReceiver},
+  emits: ['sort-change', 'item-click', 'update:checked'],
+  props: {
+    // 数据
+    data: Array,
+    // 选中数据
+    checked: Array,
+    // 是否网格展示
+    grid: {
+      type: Boolean,
+      default: true
+    },
+    // 排序字段
+    sort: {
+      type: [String, Boolean],
+      default: false
+    },
+    // 排序方式
+    order: String,
+    // 网格模式后缀对应图标
+    icons: {
+      type: Array,
+      default() {
+        return icons;
+      }
+    },
+    // 表格模式后缀对应图标
+    smIcons: {
+      type: Array,
+      default() {
+        return smIcons;
+      }
+    }
+  },
+  computed: {
+    /* 是否显示复选框 */
+    showCheckbox() {
+      return this.checked && Array.isArray(this.checked);
+    },
+    /* 是否全选 */
+    allChecked: {
+      get() {
+        return this.checked && this.checked.length && (this.checked.length === this.data.length);
+      },
+      set(value) {
+        this.$emit('update:checked', value ? [].concat(this.data) : []);
+      }
+    }
+  },
+  methods: {
+    /* 文件对应的图标 */
+    getIcon(item) {
+      // 网格模式文件有缩略图返回文件缩略图
+      if (this.grid && item.thumbnail) {
+        return item.thumbnail;
+      }
+      const icons = this.grid ? this.icons : this.smIcons;
+      // 文件夹
+      if (item.isDirectory) {
+        const temp = icons.filter(d => d.type === 'dir');
+        if (temp.length) {
+          return temp[0].icon;
+        } else {
+          return;
+        }
+      }
+      // 匹配后缀对应的图标
+      let ic;
+      icons.forEach(d => {
+        if (d.types) {
+          d.types.forEach(s => {
+            if (item.name.endsWith(s)) {
+              ic = d.icon;
+            }
+          });
+        }
+      });
+      if (!ic) {
+        const temp = icons.filter(d => d.type === 'file');
+        if (temp.length) {
+          ic = temp[0].icon;
+        }
+      }
+      return ic;
+    },
+    /* 表头排序的class */
+    getSortClass(sort) {
+      return [
+        {'ele-file-list-table-item-sort': this.sort !== false},
+        {'ele-file-list-sort-asc': this.sort === sort && this.order === 'asc'},
+        {'ele-file-list-sort-desc': this.sort === sort && this.order === 'desc'}
+      ];
+    },
+    /* 复选框改变 */
+    onCheckedChange(item) {
+      const index = this.checked.indexOf(item);
+      if (index === -1) {
+        // 选中
+        this.$emit('update:checked', this.checked.concat([item]));
+      } else {
+        // 取消选中
+        let temp = this.checked.slice(0, index).concat(this.checked.slice(index + 1, this.checked.length));
+        this.$emit('update:checked', temp);
+      }
+    },
+    /* item点击事件 */
+    onItemClick(item) {
+      this.$emit('item-click', item);
+    },
+    /* 排序点击事件 */
+    onSortChange(name) {
+      if (this.sort === false) {
+        return;
+      }
+      let order = 'asc';
+      if (this.sort && this.order && name === this.sort) {
+        order = {'asc': 'desc', 'desc': null}[this.order];
+      }
+      this.$emit('sort-change', {sort: name, order: order});
+    }
+  }
+}
+</script>
+
+<style>
+/* 复选框对勾 */
+.ele-file-list-group .ele-file-icon-check {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+.ele-file-list-group .ele-file-icon-check:before {
+  content: "";
+  width: 11px;
+  height: 6px;
+  border-left: 2px solid #fff;
+  border-bottom: 2px solid #fff;
+  transform: rotate(-45deg);
+  position: absolute;
+  left: 4px;
+  top: 6px;
+}
+
+/** 网格风格样式 */
+.ele-file-list {
+  box-sizing: border-box;
+  position: relative;
+}
+
+/* header */
+.ele-file-list .ele-file-list-header {
+  padding: 0 16px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid hsla(0, 0%, 60%, .15);
+  box-sizing: border-box;
+  line-height: 36px;
+}
+
+/* 全选框 */
+.ele-file-list .ele-file-list-header .ele-file-list-check-group {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.ele-file-list .ele-file-list-header .ele-file-list-check-group .ele-file-list-check {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  margin-right: 13px;
+  vertical-align: -3px;
+}
+
+.ele-file-list .ele-file-list-header .ele-file-list-check-group .ele-file-list-check:before {
+  left: 3px;
+  top: 4px;
+  width: 10px;
+}
+
+.ele-file-list .ele-file-list-header .ele-file-list-check-group .ele-file-list-check:not(.checked) {
+  background-color: transparent !important;
+  border: 1px solid hsla(0, 0%, 60%, .3);
+}
+
+.ele-file-list .ele-file-list-header .ele-file-list-check-group .ele-file-list-check:not(.checked):before {
+  display: none;
+}
+
+/* item */
+.ele-file-list .ele-file-list-item {
+  display: inline-block;
+  box-sizing: border-box;
+  padding: 10px 3px 10px 3px;
+  margin: 0 0 8px 8px;
+  text-align: center;
+  position: relative;
+  cursor: pointer;
+}
+
+/* 图标 */
+.ele-file-list .ele-file-list-item .ele-file-list-item-icon {
+  position: relative;
+}
+
+.ele-file-list .ele-file-list-item .ele-file-list-item-icon > img {
+  width: 56px;
+  height: 56px;
+  margin: 14px 0;
+  display: inline-block;
+  border-radius: 2px;
+}
+
+.ele-file-list .ele-file-list-item .ele-file-list-item-icon > .ele-file-list-item-icon-image {
+  width: 84px;
+  height: 84px;
+  margin: 0;
+  object-fit: cover;
+}
+
+/* 标题 */
+.ele-file-list .ele-file-list-item .ele-file-list-item-title {
+  width: 110px;
+  margin-top: 4px;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
+}
+
+.ele-file-list .ele-file-list-item .ele-file-list-item-title:not(:hover) {
+  color: inherit;
+}
+
+/* 复选框 */
+.ele-file-list .ele-file-list-item .ele-file-list-item-check {
+  position: absolute;
+  right: 6px;
+  top: 6px;
+  border-radius: 50%;
+  display: none;
+  z-index: 1;
+}
+
+.ele-file-list .ele-file-list-item .ele-file-list-item-check .ele-file-icon-check {
+  width: 19px;
+  height: 19px;
+  border-radius: 50%;
+  display: block;
+  opacity: .35;
+}
+
+.ele-file-list .ele-file-list-item.checked .ele-file-list-item-check,
+.ele-file-list .ele-file-list-item:hover .ele-file-list-item-check {
+  display: block;
+}
+
+.ele-file-list .ele-file-list-item.checked .ele-file-list-item-check .ele-file-icon-check {
+  opacity: 1;
+}
+
+/* 背景和边框 */
+.ele-file-list .ele-file-list-item .ele-file-list-item-bg,
+.ele-file-list .ele-file-list-item .ele-file-list-item-border {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  box-sizing: border-box;
+  display: none;
+}
+
+.ele-file-list .ele-file-list-item:hover .ele-file-list-item-bg,
+.ele-file-list .ele-file-list-item.checked .ele-file-list-item-bg {
+  opacity: .06;
+  display: block;
+}
+
+.ele-file-list .ele-file-list-item.checked .ele-file-list-item-border {
+  opacity: .3;
+  border-width: 1px;
+  border-style: solid;
+  display: block;
+}
+
+/* body */
+.ele-file-list .ele-file-list-item .ele-file-list-item-body {
+  position: relative;
+  z-index: 1;
+}
+
+/** 表格样式 */
+.ele-file-list-table {
+  position: relative;
+}
+
+/* item */
+.ele-file-list-table .ele-file-list-table-item {
+  line-height: 44px;
+  position: relative;
+}
+
+/* body */
+.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-body {
+  display: flex;
+  align-items: center;
+  border-top: 1px solid hsla(0, 0%, 60%, .15);
+  position: relative;
+  z-index: 1;
+}
+
+.ele-file-list-table .ele-file-list-table-item:last-child .ele-file-list-table-item-body {
+  border-bottom: 1px solid hsla(0, 0%, 60%, .15);
+}
+
+.ele-file-list-table .ele-file-list-table-item:first-child .ele-file-list-table-item-body {
+  border-top: none;
+}
+
+/* item body cells */
+.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-check-group {
+  width: 45px;
+  padding-left: 16px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-name {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-size {
+  width: 120px;
+  flex-shrink: 0;
+}
+
+.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-time {
+  width: 180px;
+  flex-shrink: 0;
+}
+
+/* 表格复选框 */
+.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-check {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  display: inline-block;
+  vertical-align: -3px;
+  cursor: pointer;
+}
+
+.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-check:before {
+  left: 3px;
+  top: 4px;
+  width: 10px;
+}
+
+.ele-file-list-table .ele-file-list-table-item:not(.checked) .ele-file-list-table-item-check {
+  background-color: transparent !important;
+  border: 1px solid hsla(0, 0%, 60%, .3);
+}
+
+.ele-file-list-table .ele-file-list-table-item:not(.checked) .ele-file-list-table-item-check:before {
+  display: none;
+}
+
+/* 图标和标题 */
+.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-icon {
+  flex: 1;
+  height: 24px;
+  overflow: hidden;
+}
+
+.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-icon-image {
+  width: 24px;
+  height: 24px;
+  object-fit: cover;
+  display: inline-block;
+  vertical-align: top;
+  cursor: pointer;
+}
+
+.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-title {
+  display: inline;
+  padding-left: 10px;
+  box-sizing: border-box;
+  word-break: break-all;
+  vertical-align: top;
+  line-height: 24px;
+  cursor: pointer;
+}
+
+.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-title:not(:hover) {
+  color: inherit;
+}
+
+/* 工具按钮 */
+.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-tool-group {
+  flex-shrink: 0;
+  display: none;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 15px;
+  cursor: default;
+}
+
+.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-tool-group .ele-file-list-item-tool {
+  margin-right: 15px;
+  font-size: 16px;
+  cursor: pointer;
+  line-height: 1;
+}
+
+.ele-file-list-table .ele-file-list-table-item:hover .ele-file-list-table-item-tool-group {
+  display: flex;
+}
+
+/* 背景和边框 */
+.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-bg,
+.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-border {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: none;
+}
+
+.ele-file-list-table .ele-file-list-table-item:hover .ele-file-list-table-item-bg,
+.ele-file-list-table .ele-file-list-table-item.checked .ele-file-list-table-item-bg {
+  opacity: .06;
+  display: block;
+}
+
+.ele-file-list-table .ele-file-list-table-item:hover .ele-file-list-table-item-border,
+.ele-file-list-table .ele-file-list-table-item:not(.ele-file-list-table-item-header):hover + .ele-file-list-table-item .ele-file-list-table-item-border,
+.ele-file-list-table .ele-file-list-table-item.checked .ele-file-list-table-item-border,
+.ele-file-list-table .ele-file-list-table-item.checked + .ele-file-list-table-item .ele-file-list-table-item-border {
+  opacity: .3;
+  border-top-width: 1px;
+  border-top-style: solid;
+  display: block;
+}
+
+.ele-file-list-table .ele-file-list-table-item:not(.ele-file-list-table-item-header):last-child:hover .ele-file-list-table-item-border,
+.ele-file-list-table .ele-file-list-table-item:not(.ele-file-list-table-item-header):last-child.checked .ele-file-list-table-item-border {
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+
+.ele-file-list-table .ele-file-list-table-item-header {
+  line-height: 36px;
+  cursor: pointer;
+}
+
+/* 表头排序 */
+.ele-file-list-table .ele-file-list-table-item-sort {
+  width: 8px;
+  height: 12px;
+  margin-left: 6px;
+  position: relative;
+  display: inline-block;
+  vertical-align: -1px;
+}
+
+.ele-file-list-table .ele-file-list-table-item-sort > i {
+  width: 0;
+  height: 0;
+  border-width: 4px;
+  border-style: solid;
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  display: block;
+}
+
+.ele-file-list-table .ele-file-list-table-item-sort > i:first-child {
+  border-top-color: transparent !important;
+  margin: -4px 0 4px 0;
+}
+
+.ele-file-list-table .ele-file-list-table-item-sort > i:last-child {
+  border-bottom-color: transparent !important;
+}
+
+.ele-file-list-table .ele-file-list-table-item-sort:not(.ele-file-list-sort-asc) > i:first-child {
+  border-bottom-color: hsla(0, 0%, 60%, .6) !important;
+}
+
+.ele-file-list-table .ele-file-list-table-item-sort:not(.ele-file-list-sort-desc) > i:last-child {
+  border-top-color: hsla(0, 0%, 60%, .6) !important;
+}
+
+/* 小屏幕样式 */
+@media screen and (max-width: 768px) {
+  .ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-size {
+    display: none;
+  }
+
+  .ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-time {
+    display: none;
+  }
+
+  .ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-tool-group {
+    padding-right: 0;
+  }
+}
+</style>
--- a/src/components/ele-admin-pro/packages/ele-icon-picker/index.js
+++ b/src/components/ele-admin-pro/packages/ele-icon-picker/index.js
@@ -0,0 +1,8 @@
+/** 数字动画组件 license by http://eleadmin.com */
+import EleIconPicker from './src/main';
+
+EleIconPicker.install = function (app) {
+  app.component(EleIconPicker.name, EleIconPicker);
+};
+
+export default EleIconPicker;
--- a/src/components/ele-admin-pro/packages/ele-icon-picker/src/icon.js
+++ b/src/components/ele-admin-pro/packages/ele-icon-picker/src/icon.js
@@ -0,0 +1,896 @@
+/** 图标数据 license by http://eleadmin.com */
+export default [
+  {
+    title: '线框风格',
+    children: [
+      {
+        title: '方向性图标',
+        icons: [
+          'StepBackwardOutlined',
+          'StepForwardOutlined',
+          'FastBackwardOutlined',
+          'FastForwardOutlined',
+          'ShrinkOutlined',
+          'ArrowsAltOutlined',
+          'DownOutlined',
+          'UpOutlined',
+          'LeftOutlined',
+          'RightOutlined',
+          'CaretUpOutlined',
+          'CaretDownOutlined',
+          'CaretLeftOutlined',
+          'CaretRightOutlined',
+          'UpCircleOutlined',
+          'DownCircleOutlined',
+          'LeftCircleOutlined',
+          'RightCircleOutlined',
+          'DoubleRightOutlined',
+          'DoubleLeftOutlined',
+          'VerticalLeftOutlined',
+          'VerticalRightOutlined',
+          'VerticalAlignTopOutlined',
+          'VerticalAlignMiddleOutlined',
+          'VerticalAlignBottomOutlined',
+          'ForwardOutlined',
+          'BackwardOutlined',
+          'RollbackOutlined',
+          'EnterOutlined',
+          'RetweetOutlined',
+          'SwapOutlined',
+          'SwapLeftOutlined',
+          'SwapRightOutlined',
+          'ArrowUpOutlined',
+          'ArrowDownOutlined',
+          'ArrowLeftOutlined',
+          'ArrowRightOutlined',
+          'PlayCircleOutlined',
+          'UpSquareOutlined',
+          'DownSquareOutlined',
+          'LeftSquareOutlined',
+          'RightSquareOutlined',
+          'LoginOutlined',
+          'LogoutOutlined',
+          'MenuFoldOutlined',
+          'MenuUnfoldOutlined',
+          'BorderBottomOutlined',
+          'BorderHorizontalOutlined',
+          'BorderInnerOutlined',
+          'BorderOuterOutlined',
+          'BorderLeftOutlined',
+          'BorderRightOutlined',
+          'BorderTopOutlined',
+          'BorderVerticleOutlined',
+          'PicCenterOutlined',
+          'PicLeftOutlined',
+          'PicRightOutlined',
+          'RadiusBottomleftOutlined',
+          'RadiusBottomrightOutlined',
+          'RadiusUpleftOutlined',
+          'RadiusUprightOutlined',
+          'FullscreenOutlined',
+          'FullscreenExitOutlined'
+        ]
+      },
+      {
+        title: '提示建议性',
+        icons: [
+          'QuestionOutlined',
+          'QuestionCircleOutlined',
+          'PlusOutlined',
+          'PlusCircleOutlined',
+          'PauseOutlined',
+          'PauseCircleOutlined',
+          'MinusOutlined',
+          'MinusCircleOutlined',
+          'PlusSquareOutlined',
+          'MinusSquareOutlined',
+          'InfoOutlined',
+          'InfoCircleOutlined',
+          'ExclamationOutlined',
+          'ExclamationCircleOutlined',
+          'CloseOutlined',
+          'CloseCircleOutlined',
+          'CloseSquareOutlined',
+          'CheckOutlined',
+          'CheckCircleOutlined',
+          'CheckSquareOutlined',
+          'ClockCircleOutlined',
+          'WarningOutlined',
+          'IssuesCloseOutlined',
+          'StopOutlined'
+        ]
+      },
+      {
+        title: '编辑类图标',
+        icons: [
+          'EditOutlined',
+          'FormOutlined',
+          'CopyOutlined',
+          'ScissorOutlined',
+          'DeleteOutlined',
+          'SnippetsOutlined',
+          'DiffOutlined',
+          'HighlightOutlined',
+          'AlignCenterOutlined',
+          'AlignLeftOutlined',
+          'AlignRightOutlined',
+          'BgColorsOutlined',
+          'BoldOutlined',
+          'ItalicOutlined',
+          'UnderlineOutlined',
+          'StrikethroughOutlined',
+          'RedoOutlined',
+          'UndoOutlined',
+          'ZoomInOutlined',
+          'ZoomOutOutlined',
+          'FontColorsOutlined',
+          'FontSizeOutlined',
+          'LineHeightOutlined',
+          'DashOutlined',
+          'SmallDashOutlined',
+          'SortAscendingOutlined',
+          'SortDescendingOutlined',
+          'DragOutlined',
+          'OrderedListOutlined',
+          'UnorderedListOutlined',
+          'RadiusSettingOutlined',
+          'ColumnWidthOutlined',
+          'ColumnHeightOutlined'
+        ]
+      },
+      {
+        title: '数据类图标',
+        icons: [
+          'AreaChartOutlined',
+          'PieChartOutlined',
+          'BarChartOutlined',
+          'DotChartOutlined',
+          'LineChartOutlined',
+          'RadarChartOutlined',
+          'HeatMapOutlined',
+          'FallOutlined',
+          'RiseOutlined',
+          'StockOutlined',
+          'BoxPlotOutlined',
+          'FundOutlined',
+          'SlidersOutlined'
+        ]
+      },
+      {
+        title: '品牌和标识',
+        icons: [
+          'AndroidOutlined',
+          'AppleOutlined',
+          'WindowsOutlined',
+          'IeOutlined',
+          'ChromeOutlined',
+          'GithubOutlined',
+          'AliwangwangOutlined',
+          'DingdingOutlined',
+          'WeiboSquareOutlined',
+          'WeiboCircleOutlined',
+          'TaobaoCircleOutlined',
+          'Html5Outlined',
+          'WeiboOutlined',
+          'TwitterOutlined',
+          'WechatOutlined',
+          'YoutubeOutlined',
+          'AlipayCircleOutlined',
+          'TaobaoOutlined',
+          'SkypeOutlined',
+          'QqOutlined',
+          'MediumWorkmarkOutlined',
+          'GitlabOutlined',
+          'MediumOutlined',
+          'LinkedinOutlined',
+          'GooglePlusOutlined',
+          'DropboxOutlined',
+          'FacebookOutlined',
+          'CodepenOutlined',
+          'CodeSandboxOutlined',
+          'AmazonOutlined',
+          'GoogleOutlined',
+          'CodepenCircleOutlined',
+          'AlipayOutlined',
+          'AntDesignOutlined',
+          'AntCloudOutlined',
+          'AliyunOutlined',
+          'ZhihuOutlined',
+          'SlackOutlined',
+          'SlackSquareOutlined',
+          'BehanceOutlined',
+          'BehanceSquareOutlined',
+          'DribbbleOutlined',
+          'DribbbleSquareOutlined',
+          'InstagramOutlined',
+          'YuqueOutlined',
+          'AlibabaOutlined',
+          'YahooOutlined',
+          'RedditOutlined',
+          'SketchOutlined'
+        ]
+      },
+      {
+        title: '网站通用图标',
+        icons: [
+          'AccountBookOutlined',
+          'AimOutlined',
+          'AlertOutlined',
+          'ApartmentOutlined',
+          'ApiOutlined',
+          'AppstoreAddOutlined',
+          'AppstoreOutlined',
+          'AudioOutlined',
+          'AudioMutedOutlined',
+          'AuditOutlined',
+          'BankOutlined',
+          'BarcodeOutlined',
+          'BarsOutlined',
+          'BellOutlined',
+          'BlockOutlined',
+          'BookOutlined',
+          'BorderOutlined',
+          'BorderlessTableOutlined',
+          'BranchesOutlined',
+          'BugOutlined',
+          'BuildOutlined',
+          'BulbOutlined',
+          'CalculatorOutlined',
+          'CalendarOutlined',
+          'CameraOutlined',
+          'CarOutlined',
+          'CarryOutOutlined',
+          'CiCircleOutlined',
+          'CiOutlined',
+          'ClearOutlined',
+          'CloudDownloadOutlined',
+          'CloudOutlined',
+          'CloudServerOutlined',
+          'CloudSyncOutlined',
+          'CloudUploadOutlined',
+          'ClusterOutlined',
+          'CodeOutlined',
+          'CoffeeOutlined',
+          'CommentOutlined',
+          'CompassOutlined',
+          'CompressOutlined',
+          'ConsoleSqlOutlined',
+          'ContactsOutlined',
+          'ContainerOutlined',
+          'ControlOutlined',
+          'CopyrightCircleOutlined',
+          'CopyrightOutlined',
+          'CreditCardOutlined',
+          'CrownOutlined',
+          'CustomerServiceOutlined',
+          'DashboardOutlined',
+          'DatabaseOutlined',
+          'DeleteColumnOutlined',
+          'DeleteRowOutlined',
+          'DeliveredProcedureOutlined',
+          'DeploymentUnitOutlined',
+          'DesktopOutlined',
+          'DingtalkOutlined',
+          'DisconnectOutlined',
+          'DislikeOutlined',
+          'DollarCircleOutlined',
+          'DollarOutlined',
+          'DownloadOutlined',
+          'EllipsisOutlined',
+          'EnvironmentOutlined',
+          'EuroCircleOutlined',
+          'EuroOutlined',
+          'ExceptionOutlined',
+          'ExpandAltOutlined',
+          'ExpandOutlined',
+          'ExperimentOutlined',
+          'ExportOutlined',
+          'EyeOutlined',
+          'EyeInvisibleOutlined',
+          'FieldBinaryOutlined',
+          'FieldNumberOutlined',
+          'FieldStringOutlined',
+          'FieldTimeOutlined',
+          'FileAddOutlined',
+          'FileDoneOutlined',
+          'FileExcelOutlined',
+          'FileExclamationOutlined',
+          'FileOutlined',
+          'FileGifOutlined',
+          'FileImageOutlined',
+          'FileJpgOutlined',
+          'FileMarkdownOutlined',
+          'FilePdfOutlined',
+          'FilePptOutlined',
+          'FileProtectOutlined',
+          'FileSearchOutlined',
+          'FileSyncOutlined',
+          'FileTextOutlined',
+          'FileUnknownOutlined',
+          'FileWordOutlined',
+          'FileZipOutlined',
+          'FilterOutlined',
+          'FireOutlined',
+          'FlagOutlined',
+          'FolderAddOutlined',
+          'FolderOutlined',
+          'FolderOpenOutlined',
+          'FolderViewOutlined',
+          'ForkOutlined',
+          'FormatPainterOutlined',
+          'FrownOutlined',
+          'FunctionOutlined',
+          'FundProjectionScreenOutlined',
+          'FundViewOutlined',
+          'FunnelPlotOutlined',
+          'GatewayOutlined',
+          'GifOutlined',
+          'GiftOutlined',
+          'GlobalOutlined',
+          'GoldOutlined',
+          'GroupOutlined',
+          'HddOutlined',
+          'HeartOutlined',
+          'HistoryOutlined',
+          'HomeOutlined',
+          'HourglassOutlined',
+          'IdcardOutlined',
+          'ImportOutlined',
+          'InboxOutlined',
+          'InsertRowAboveOutlined',
+          'InsertRowBelowOutlined',
+          'InsertRowLeftOutlined',
+          'InsertRowRightOutlined',
+          'InsuranceOutlined',
+          'InteractionOutlined',
+          'KeyOutlined',
+          'LaptopOutlined',
+          'LayoutOutlined',
+          'LikeOutlined',
+          'LineOutlined',
+          'LinkOutlined',
+          'Loading3QuartersOutlined',
+          'LoadingOutlined',
+          'LockOutlined',
+          'MacCommandOutlined',
+          'MailOutlined',
+          'ManOutlined',
+          'MedicineBoxOutlined',
+          'MehOutlined',
+          'MenuOutlined',
+          'MergeCellsOutlined',
+          'MessageOutlined',
+          'MobileOutlined',
+          'MoneyCollectOutlined',
+          'MonitorOutlined',
+          'MoreOutlined',
+          'NodeCollapseOutlined',
+          'NodeExpandOutlined',
+          'NodeIndexOutlined',
+          'NotificationOutlined',
+          'NumberOutlined',
+          'OneToOneOutlined',
+          'PaperClipOutlined',
+          'PartitionOutlined',
+          'PayCircleOutlined',
+          'PercentageOutlined',
+          'PhoneOutlined',
+          'PictureOutlined',
+          'PlaySquareOutlined',
+          'PoundCircleOutlined',
+          'PoundOutlined',
+          'PoweroffOutlined',
+          'PrinterOutlined',
+          'ProfileOutlined',
+          'ProjectOutlined',
+          'PropertySafetyOutlined',
+          'PullRequestOutlined',
+          'PushpinOutlined',
+          'QrcodeOutlined',
+          'ReadOutlined',
+          'ReconciliationOutlined',
+          'RedEnvelopeOutlined',
+          'ReloadOutlined',
+          'RestOutlined',
+          'RobotOutlined',
+          'RocketOutlined',
+          'RotateLeftOutlined',
+          'RotateRightOutlined',
+          'SafetyCertificateOutlined',
+          'SafetyOutlined',
+          'SaveOutlined',
+          'ScanOutlined',
+          'ScheduleOutlined',
+          'SearchOutlined',
+          'SecurityScanOutlined',
+          'SelectOutlined',
+          'SendOutlined',
+          'SettingOutlined',
+          'ShakeOutlined',
+          'ShareAltOutlined',
+          'ShopOutlined',
+          'ShoppingCartOutlined',
+          'ShoppingOutlined',
+          'SisternodeOutlined',
+          'SkinOutlined',
+          'SmileOutlined',
+          'SolutionOutlined',
+          'SoundOutlined',
+          'SplitCellsOutlined',
+          'StarOutlined',
+          'SubnodeOutlined',
+          'SwitcherOutlined',
+          'SyncOutlined',
+          'TableOutlined',
+          'TabletOutlined',
+          'TagOutlined',
+          'TagsOutlined',
+          'TeamOutlined',
+          'ThunderboltOutlined',
+          'ToTopOutlined',
+          'ToolOutlined',
+          'TrademarkCircleOutlined',
+          'TrademarkOutlined',
+          'TransactionOutlined',
+          'TranslationOutlined',
+          'TrophyOutlined',
+          'UngroupOutlined',
+          'UnlockOutlined',
+          'UploadOutlined',
+          'UsbOutlined',
+          'UserAddOutlined',
+          'UserDeleteOutlined',
+          'UserOutlined',
+          'UserSwitchOutlined',
+          'UsergroupAddOutlined',
+          'UsergroupDeleteOutlined',
+          'VerifiedOutlined',
+          'VideoCameraAddOutlined',
+          'VideoCameraOutlined',
+          'WalletOutlined',
+          'WhatsAppOutlined',
+          'WifiOutlined',
+          'WomanOutlined'
+        ]
+      }
+    ]
+  },
+  {
+    title: '实底风格',
+    children: [
+      {
+        title: '方向性图标',
+        icons: [
+          'StepBackwardFilled',
+          'StepForwardFilled',
+          'FastBackwardFilled',
+          'FastForwardFilled',
+          'CaretUpFilled',
+          'CaretDownFilled',
+          'CaretLeftFilled',
+          'CaretRightFilled',
+          'UpCircleFilled',
+          'DownCircleFilled',
+          'LeftCircleFilled',
+          'RightCircleFilled',
+          'ForwardFilled',
+          'BackwardFilled',
+          'PlayCircleFilled',
+          'UpSquareFilled',
+          'DownSquareFilled',
+          'LeftSquareFilled',
+          'RightSquareFilled'
+        ]
+      },
+      {
+        title: '提示建议性',
+        icons: [
+          'QuestionCircleFilled',
+          'PlusCircleFilled',
+          'PauseCircleFilled',
+          'MinusCircleFilled',
+          'PlusSquareFilled',
+          'MinusSquareFilled',
+          'InfoCircleFilled',
+          'ExclamationCircleFilled',
+          'CloseCircleFilled',
+          'CloseSquareFilled',
+          'CheckCircleFilled',
+          'CheckSquareFilled',
+          'ClockCircleFilled',
+          'WarningFilled',
+          'StopFilled'
+        ]
+      },
+      {
+        title: '编辑类图标',
+        icons: [
+          'EditFilled',
+          'CopyFilled',
+          'DeleteFilled',
+          'SnippetsFilled',
+          'DiffFilled',
+          'HighlightFilled'
+        ]
+      },
+      {
+        title: '数据类图标',
+        icons: [
+          'PieChartFilled',
+          'BoxPlotFilled',
+          'FundFilled',
+          'SlidersFilled'
+        ]
+      },
+      {
+        title: '品牌和标识',
+        icons: [
+          'AndroidFilled',
+          'AppleFilled',
+          'WindowsFilled',
+          'ChromeFilled',
+          'GithubFilled',
+          'AliwangwangFilled',
+          'WeiboSquareFilled',
+          'WeiboCircleFilled',
+          'TaobaoCircleFilled',
+          'Html5Filled',
+          'WechatFilled',
+          'YoutubeFilled',
+          'AlipayCircleFilled',
+          'SkypeFilled',
+          'GitlabFilled',
+          'LinkedinFilled',
+          'FacebookFilled',
+          'CodeSandboxCircleFilled',
+          'CodepenCircleFilled',
+          'SlackSquareFilled',
+          'BehanceSquareFilled',
+          'DribbbleSquareFilled',
+          'InstagramFilled',
+          'YuqueFilled',
+          'YahooFilled'
+        ]
+      },
+      {
+        title: '网站通用图标',
+        icons: [
+          'AccountBookFilled',
+          'AlertFilled',
+          'AlipaySquareFilled',
+          'AmazonCircleFilled',
+          'AmazonSquareFilled',
+          'ApiFilled',
+          'AppstoreFilled',
+          'AudioFilled',
+          'BankFilled',
+          'BehanceCircleFilled',
+          'BellFilled',
+          'BookFilled',
+          'BugFilled',
+          'BuildFilled',
+          'BulbFilled',
+          'CalculatorFilled',
+          'CalendarFilled',
+          'CameraFilled',
+          'CarFilled',
+          'CarryOutFilled',
+          'CiCircleFilled',
+          'CloudFilled',
+          'CodeFilled',
+          'CodeSandboxSquareFilled',
+          'CodepenSquareFilled',
+          'CompassFilled',
+          'ContactsFilled',
+          'ContainerFilled',
+          'ControlFilled',
+          'CopyrightCircleFilled',
+          'CreditCardFilled',
+          'CrownFilled',
+          'CustomerServiceFilled',
+          'DashboardFilled',
+          'DatabaseFilled',
+          'DingtalkCircleFilled',
+          'DingtalkSquareFilled',
+          'DislikeFilled',
+          'DollarCircleFilled',
+          'DribbbleCircleFilled',
+          'DropboxCircleFilled',
+          'DropboxSquareFilled',
+          'EnvironmentFilled',
+          'EuroCircleFilled',
+          'ExperimentFilled',
+          'EyeFilled',
+          'EyeInvisibleFilled',
+          'FileAddFilled',
+          'FileExcelFilled',
+          'FileExclamationFilled',
+          'FileFilled',
+          'FileImageFilled',
+          'FileMarkdownFilled',
+          'FilePdfFilled',
+          'FilePptFilled',
+          'FileTextFilled',
+          'FileUnknownFilled',
+          'FileWordFilled',
+          'FileZipFilled',
+          'FilterFilled',
+          'FireFilled',
+          'FlagFilled',
+          'FolderAddFilled',
+          'FolderFilled',
+          'FolderOpenFilled',
+          'FormatPainterFilled',
+          'FrownFilled',
+          'FunnelPlotFilled',
+          'GiftFilled',
+          'GoldFilled',
+          'GoldenFilled',
+          'GoogleCircleFilled',
+          'GooglePlusCircleFilled',
+          'GooglePlusSquareFilled',
+          'GoogleSquareFilled',
+          'HddFilled',
+          'HeartFilled',
+          'HomeFilled',
+          'HourglassFilled',
+          'IdcardFilled',
+          'IeCircleFilled',
+          'IeSquareFilled',
+          'InsuranceFilled',
+          'InteractionFilled',
+          'LayoutFilled',
+          'LikeFilled',
+          'LockFilled',
+          'MacCommandFilled',
+          'MailFilled',
+          'MedicineBoxFilled',
+          'MediumCircleFilled',
+          'MediumSquareFilled',
+          'MehFilled',
+          'MessageFilled',
+          'MobileFilled',
+          'MoneyCollectFilled',
+          'NotificationFilled',
+          'PayCircleFilled',
+          'PhoneFilled',
+          'PictureFilled',
+          'PlaySquareFilled',
+          'PoundCircleFilled',
+          'PrinterFilled',
+          'ProfileFilled',
+          'ProjectFilled',
+          'PropertySafetyFilled',
+          'PushpinFilled',
+          'QqCircleFilled',
+          'QqSquareFilled',
+          'ReadFilled',
+          'ReconciliationFilled',
+          'RedEnvelopeFilled',
+          'RedditCircleFilled',
+          'RedditSquareFilled',
+          'RestFilled',
+          'RobotFilled',
+          'RocketFilled',
+          'SafetyCertificateFilled',
+          'SaveFilled',
+          'ScheduleFilled',
+          'SecurityScanFilled',
+          'SettingFilled',
+          'ShopFilled',
+          'ShoppingFilled',
+          'SignalFilled',
+          'SketchCircleFilled',
+          'SketchSquareFilled',
+          'SkinFilled',
+          'SlackCircleFilled',
+          'SmileFilled',
+          'SoundFilled',
+          'StarFilled',
+          'SwitcherFilled',
+          'TabletFilled',
+          'TagFilled',
+          'TagsFilled',
+          'TaobaoSquareFilled',
+          'ThunderboltFilled',
+          'ToolFilled',
+          'TrademarkCircleFilled',
+          'TrophyFilled',
+          'TwitterCircleFilled',
+          'TwitterSquareFilled',
+          'UnlockFilled',
+          'UsbFilled',
+          'VideoCameraFilled',
+          'WalletFilled',
+          'ZhihuCircleFilled',
+          'ZhihuSquareFilled'
+        ]
+      }
+    ]
+  },
+  {
+    title: '双色风格',
+    children: [
+      {
+        title: '方向性图标',
+        icons: [
+          'UpCircleTwoTone',
+          'DownCircleTwoTone',
+          'LeftCircleTwoTone',
+          'RightCircleTwoTone',
+          'PlayCircleTwoTone',
+          'UpSquareTwoTone',
+          'DownSquareTwoTone',
+          'LeftSquareTwoTone',
+          'RightSquareTwoTone'
+        ]
+      },
+      {
+        title: '提示建议性',
+        icons: [
+          'QuestionCircleTwoTone',
+          'PlusCircleTwoTone',
+          'PauseCircleTwoTone',
+          'MinusCircleTwoTone',
+          'PlusSquareTwoTone',
+          'MinusSquareTwoTone',
+          'InfoCircleTwoTone',
+          'ExclamationCircleTwoTone',
+          'CloseCircleTwoTone',
+          'CloseSquareTwoTone',
+          'CheckCircleTwoTone',
+          'CheckSquareTwoTone',
+          'ClockCircleTwoTone',
+          'WarningTwoTone',
+          'StopTwoTone'
+        ]
+      },
+      {
+        title: '编辑类图标',
+        icons: [
+          'EditTwoTone',
+          'CopyTwoTone',
+          'DeleteTwoTone',
+          'SnippetsTwoTone',
+          'DiffTwoTone',
+          'HighlightTwoTone'
+        ]
+      },
+      {
+        title: '数据类图标',
+        icons: [
+          'PieChartTwoTone',
+          'BoxPlotTwoTone',
+          'FundTwoTone',
+          'SlidersTwoTone'
+        ]
+      },
+      {
+        title: '品牌和标识',
+        icons: [
+          'Html5TwoTone'
+        ]
+      },
+      {
+        title: '网站通用图标',
+        icons: [
+          'AccountBookTwoTone',
+          'AlertTwoTone',
+          'ApiTwoTone',
+          'AppstoreTwoTone',
+          'AudioTwoTone',
+          'BankTwoTone',
+          'BellTwoTone',
+          'BookTwoTone',
+          'BugTwoTone',
+          'BuildTwoTone',
+          'BulbTwoTone',
+          'CalculatorTwoTone',
+          'CalendarTwoTone',
+          'CameraTwoTone',
+          'CarTwoTone',
+          'CarryOutTwoTone',
+          'CiCircleTwoTone',
+          'CiTwoTone',
+          'CloudTwoTone',
+          'CodeTwoTone',
+          'CompassTwoTone',
+          'ContactsTwoTone',
+          'ContainerTwoTone',
+          'ControlTwoTone',
+          'CopyrightCircleTwoTone',
+          'CopyrightTwoTone',
+          'CreditCardTwoTone',
+          'CrownTwoTone',
+          'CustomerServiceTwoTone',
+          'DashboardTwoTone',
+          'DatabaseTwoTone',
+          'DislikeTwoTone',
+          'DollarCircleTwoTone',
+          'DollarTwoTone',
+          'EnvironmentTwoTone',
+          'EuroCircleTwoTone',
+          'EuroTwoTone',
+          'ExperimentTwoTone',
+          'EyeTwoTone',
+          'EyeInvisibleTwoTone',
+          'FileAddTwoTone',
+          'FileExcelTwoTone',
+          'FileExclamationTwoTone',
+          'FileTwoTone',
+          'FileImageTwoTone',
+          'FileMarkdownTwoTone',
+          'FilePdfTwoTone',
+          'FilePptTwoTone',
+          'FileTextTwoTone',
+          'FileUnknownTwoTone',
+          'FileWordTwoTone',
+          'FileZipTwoTone',
+          'FilterTwoTone',
+          'FireTwoTone',
+          'FlagTwoTone',
+          'FolderAddTwoTone',
+          'FolderTwoTone',
+          'FolderOpenTwoTone',
+          'FrownTwoTone',
+          'FunnelPlotTwoTone',
+          'GiftTwoTone',
+          'GoldTwoTone',
+          'HddTwoTone',
+          'HeartTwoTone',
+          'HomeTwoTone',
+          'HourglassTwoTone',
+          'IdcardTwoTone',
+          'InsuranceTwoTone',
+          'InteractionTwoTone',
+          'LayoutTwoTone',
+          'LikeTwoTone',
+          'LockTwoTone',
+          'MailTwoTone',
+          'MedicineBoxTwoTone',
+          'MehTwoTone',
+          'MessageTwoTone',
+          'MobileTwoTone',
+          'MoneyCollectTwoTone',
+          'NotificationTwoTone',
+          'PhoneTwoTone',
+          'PictureTwoTone',
+          'PlaySquareTwoTone',
+          'PoundCircleTwoTone',
+          'PrinterTwoTone',
+          'ProfileTwoTone',
+          'ProjectTwoTone',
+          'PropertySafetyTwoTone',
+          'PushpinTwoTone',
+          'ReconciliationTwoTone',
+          'RedEnvelopeTwoTone',
+          'RestTwoTone',
+          'RocketTwoTone',
+          'SafetyCertificateTwoTone',
+          'SaveTwoTone',
+          'ScheduleTwoTone',
+          'SecurityScanTwoTone',
+          'SettingTwoTone',
+          'ShopTwoTone',
+          'ShoppingTwoTone',
+          'SkinTwoTone',
+          'SmileTwoTone',
+          'SoundTwoTone',
+          'StarTwoTone',
+          'SwitcherTwoTone',
+          'TabletTwoTone',
+          'TagTwoTone',
+          'TagsTwoTone',
+          'ThunderboltTwoTone',
+          'ToolTwoTone',
+          'TrademarkCircleTwoTone',
+          'TrophyTwoTone',
+          'UnlockTwoTone',
+          'UsbTwoTone',
+          'VideoCameraTwoTone',
+          'WalletTwoTone'
+        ]
+      }
+    ]
+  }
+]
--- a/src/components/ele-admin-pro/packages/ele-icon-picker/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-icon-picker/src/main.vue
@@ -0,0 +1,320 @@
+<!-- 图标选择器组件 license by http://eleadmin.com -->
+<template>
+  <a-dropdown
+    v-model:visible="visible"
+    :placement="placement"
+    :trigger="trigger"
+    :disabled="disabled">
+    <div :class="['ele-icon-picker', {'disabled': this.disabled}]">
+      <a-input
+        :value="value"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :size="size"
+        readonly>
+        <template #prefix>
+          <component v-if="value" :is="value"/>
+        </template>
+        <template #suffix>
+          <div class="ele-text-placeholder ele-icon-picker-arrow">
+            <close-circle-filled
+              v-if="this.allowClear&&this.value&&!this.disabled"
+              @click.stop="onClear"/>
+            <down-outlined/>
+          </div>
+        </template>
+      </a-input>
+    </div>
+    <template #overlay>
+      <div class="ant-dropdown-menu ele-icon-picker-popper">
+        <div @click.stop="">
+          <a-tabs v-model:active-key="activeKey">
+            <a-tab-pane v-for="(d, i) in result" :key="i" :tab="d.title"/>
+            <template #tabBarExtraContent>
+              <div v-if="allowSearch" class="ele-icon-picker-search">
+                <a-input-search
+                  v-model:value="keywords"
+                  :placeholder="searchPlaceholder"
+                  size="small"
+                  @search="onSearch"/>
+              </div>
+            </template>
+          </a-tabs>
+          <div class="ele-icon-picker-pane">
+            <a-menu
+              v-model:selected-keys="selectedKeys"
+              mode="inline">
+              <a-menu-item
+                v-for="(d, i) in activeList"
+                :key="i">{{ d.title }}
+              </a-menu-item>
+            </a-menu>
+            <div class="ele-icon-picker-list">
+              <div
+                class="ele-icon-picker-item"
+                v-for="(d, i) in currentList"
+                :key="i">
+                <a-card hoverable>
+                  <div
+                    class="ele-icon-picker-item-icon"
+                    :title="d"
+                    @click="onChoose(d)">
+                    <component :is="d"/>
+                  </div>
+                </a-card>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </a-dropdown>
+</template>
+
+<script>
+import * as antIcons from '@ant-design/icons-vue';
+import iconData from './icon.js';
+
+export default {
+  name: 'EleIconPicker',
+  components: {...antIcons},
+  emits: ['update:value'],
+  props: {
+    // dropdown属性
+    trigger: {
+      type: Array,
+      default() {
+        return ['click'];
+      }
+    },
+    placement: {
+      type: String,
+      default: 'bottomLeft'
+    },
+    // 选中图标
+    value: String,
+    // 提示文本
+    placeholder: String,
+    // 尺寸
+    size: String,
+    // 是否禁用
+    disabled: Boolean,
+    // 是否显示清除
+    allowClear: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示搜索框
+    allowSearch: {
+      type: Boolean,
+      default: true
+    },
+    // 搜索框提示文本
+    searchPlaceholder: {
+      type: String,
+      default: '搜索..'
+    },
+    // 图标数据
+    data: {
+      type: Array,
+      default() {
+        return iconData;
+      }
+    }
+  },
+  data() {
+    return {
+      // popper是否显示
+      visible: false,
+      // tab选中
+      activeKey: 0,
+      // menu选中
+      selectedKeys: [0],
+      // 搜索关键字
+      keywords: '',
+      // 搜索后的数据
+      result: this.data
+    };
+  },
+  computed: {
+    /* 当前tab数据 */
+    activeList() {
+      if (!this.result.length) {
+        return [];
+      }
+      const temp = this.result[this.activeKey];
+      return temp ? temp.children : [];
+    },
+    /* 当前显示图标数据 */
+    currentList() {
+      if (!this.activeList.length) {
+        return [];
+      }
+      if (!this.selectedKeys.length) {
+        return [];
+      }
+      const temp = this.activeList[this.selectedKeys[0]];
+      return temp ? temp.icons : [];
+    }
+  },
+  methods: {
+    /* 选择图标 */
+    onChoose(value) {
+      this.visible = false;
+      this.$emit('update:value', value);
+    },
+    /* 清除 */
+    onClear() {
+      this.$emit('update:value', '');
+    },
+    /* 搜索 */
+    onSearch() {
+      if (!this.keywords) {
+        this.result = this.data;
+        return;
+      }
+      let result = [], firstIndex = -1, activeHave = true;
+      this.data.forEach((item, index) => {
+        let children = [], haveIcon = false;
+        item.children.forEach((child => {
+          let icons = child.icons.filter(d => d.toLowerCase().indexOf(this.keywords.toLowerCase()) !== -1);
+          if (icons.length) {
+            haveIcon = true;
+          } else if (index === this.activeKey) {
+            activeHave = false;
+          }
+          children.push({title: child.title, icons: icons});
+        }));
+        if (firstIndex === -1 && haveIcon) {
+          firstIndex = index;
+        }
+        result.push({title: item.title, children: children});
+      });
+      this.result = result;
+      if (!activeHave && firstIndex !== -1) {
+        this.activeKey = firstIndex;
+      }
+    }
+  }
+}
+</script>
+
+<style>
+/* 图标选择器popper */
+.ele-icon-picker-popper {
+  width: 520px;
+  max-width: 90vw;
+  padding: 0;
+}
+
+/* tab */
+.ele-icon-picker-popper .ant-tabs-bar {
+  margin: 0;
+}
+
+.ele-icon-picker-popper .ant-tabs-tab {
+  padding: 10px 0 !important;
+  margin: 0 12px !important;
+}
+
+.ele-icon-picker-popper .ant-tabs-extra-content {
+  line-height: 41px;
+}
+
+/* 搜索框 */
+.ele-icon-picker-popper .ele-icon-picker-search {
+  width: 110px;
+  margin-right: 14px;
+}
+
+/* pane */
+.ele-icon-picker-popper .ele-icon-picker-pane {
+  display: flex;
+  height: 360px;
+}
+
+.ele-icon-picker-popper .ele-icon-picker-pane > .ant-menu {
+  width: 120px;
+  height: 100%;
+  flex-shrink: 0;
+  overflow-x: hidden;
+}
+
+.ele-icon-picker-popper .ele-icon-picker-pane > .ant-menu .ant-menu-item {
+  padding: 0 12px !important;
+  margin: 12px 0 0 0 !important;
+}
+
+.ele-icon-picker-popper .ele-icon-picker-pane > .ant-menu .ant-menu-item-selected:after {
+  right: 1px;
+}
+
+.ele-icon-picker-popper .ele-icon-picker-list {
+  flex: 1;
+  height: 100%;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 2px solid transparent;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  font-size: 0;
+}
+
+/* item */
+.ele-icon-picker-popper .ele-icon-picker-item {
+  width: 16.6%;
+  display: inline-block;
+  padding: 6px 2px 6px 10px;
+}
+
+.ele-icon-picker-popper .ant-card-body {
+  padding: 0;
+}
+
+.ele-icon-picker-popper .ele-icon-picker-item-icon {
+  padding: 8px 0;
+  font-size: 18px;
+  text-align: center;
+  transition: transform .1s;
+}
+
+.ele-icon-picker-popper .ele-icon-picker-item-icon:hover {
+  transform: scale(1.6);
+}
+
+/* 默认风格 */
+.ele-icon-picker {
+  cursor: pointer;
+}
+
+.ele-icon-picker.disabled {
+  cursor: not-allowed;
+}
+
+.ele-icon-picker:not(.disabled) .ant-input {
+  cursor: pointer;
+}
+
+.ele-icon-picker.disabled .ant-input-prefix {
+  opacity: .6;
+}
+
+.ele-icon-picker .ele-icon-picker-arrow {
+  font-size: 12px;
+}
+
+.ele-icon-picker:not(:hover) .ele-icon-picker-arrow .anticon-close-circle {
+  display: none;
+}
+
+.ele-icon-picker:hover .ele-icon-picker-arrow .anticon-close-circle + .anticon-down {
+  display: none;
+}
+
+/* 自适应 */
+@media screen and (max-width: 520px) {
+  .ele-icon-picker-popper .ele-icon-picker-item {
+    width: 33.3%;
+  }
+}
+</style>
--- a/src/components/ele-admin-pro/packages/ele-iframe-layout/index.js
+++ b/src/components/ele-admin-pro/packages/ele-iframe-layout/index.js
@@ -0,0 +1,8 @@
+/** iframe布局 license by http://eleadmin.com */
+import EleIframeLayout from './src/main';
+
+EleIframeLayout.install = function (app) {
+  app.component(EleIframeLayout.name, EleIframeLayout);
+};
+
+export default EleIframeLayout;
--- a/src/components/ele-admin-pro/packages/ele-iframe-layout/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-iframe-layout/src/main.vue
@@ -0,0 +1,32 @@
+<!-- iframe布局 license by http://eleadmin.com -->
+<template>
+  <iframe :src="src" frameborder="0" class="ele-admin-iframe"></iframe>
+</template>
+
+<script>
+export default {
+  name: 'EleIframeLayout',
+  props: {
+    url: String
+  },
+  data() {
+    const current = this.$route, meta = current ? current.meta : null;
+    return {
+      src: this.url ? this.url : (meta ? meta.iframe : null)
+    };
+  },
+  watch: {
+    url() {
+      this.src = this.url;
+    },
+    $route() {
+      if (!this.url) {
+        const current = this.$route, meta = current ? current.meta : null;
+        if (meta && meta.iframe && meta.iframe !== this.src) {
+          this.src = meta.iframe;
+        }
+      }
+    }
+  }
+}
+</script>
--- a/src/components/ele-admin-pro/packages/ele-map-picker/index.js
+++ b/src/components/ele-admin-pro/packages/ele-map-picker/index.js
@@ -0,0 +1,8 @@
+/** 地图位置选择组件 license by http://eleadmin.com */
+import EleMapPicker from './src/main';
+
+EleMapPicker.install = function (app) {
+  app.component(EleMapPicker.name, EleMapPicker);
+}
+
+export default EleMapPicker;
--- a/src/components/ele-admin-pro/packages/ele-map-picker/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-map-picker/src/main.vue
@@ -0,0 +1,645 @@
+<!-- 地图位置选择组件 license by http://eleadmin.com -->
+<template>
+  <locale-receiver component-name="ele">
+    <template #default="locale">
+      <a-modal
+        :visible="visible"
+        :title="title || locale.map.title"
+        :width="width"
+        :centered="centered"
+        :closable="closable"
+        :destroy-on-close="destroyOnClose"
+        :force-render="forceRender"
+        :keyboard="keyboard"
+        :mask="mask"
+        :mask-closable="maskClosable"
+        :mask-style="maskStyle"
+        :wrap-class-name="wrapClassName"
+        :z-index="zIndex"
+        :dialog-style="dialogStyle"
+        :dialog-class="dialogClass"
+        :footer="null"
+        :body-style="{padding: 0}"
+        class="ele-map-picker-dialog"
+        @update:visible="updateVisible">
+        <template #title>
+          <slot name="title"/>
+        </template>
+        <a-spin v-if="show" :spinning="loading">
+          <div class="ele-map-picker-header">
+            <div class="ele-map-picker-header-search">
+              <a-auto-complete
+                v-model:value="suggestionKeywords"
+                :placeholder="searchPlaceholder || locale.map.placeholder"
+                :options="suggestionData"
+                @search="onSearch"
+                @select="onSelect">
+                <a-input>
+                  <template #suffix>
+                    <search-outlined class="ele-text-secondary"/>
+                  </template>
+                </a-input>
+              </a-auto-complete>
+            </div>
+            <a-button
+              :loading="doneLoading"
+              type="primary"
+              @click="onDone(locale.map.message)">
+              {{ okText || locale.map.ok }}
+            </a-button>
+          </div>
+          <div class="ele-map-picker-body">
+            <div class="ele-map-picker-main">
+              <div ref="eleMapPickerMap" :style="{height: height}"></div>
+              <plus-outlined v-if="searchType===0" class="ele-map-picker-main-plus"/>
+              <img v-if="searchType===0" :class="iconClass" :src="markerSrc" alt=""/>
+            </div>
+            <a-spin :spinning="poiLoading">
+              <div class="ele-map-picker-poi-list" :style="{height: height}">
+                <div
+                  v-for="(poi,index) in poiData"
+                  :key="index"
+                  :class="['ele-map-picker-poi-item', {'active': index===chooseIndex}]"
+                  @click="onChoose(index)">
+                  <environment-outlined class="ele-map-picker-poi-item-icon"/>
+                  <div class="ele-map-picker-poi-item-title">{{ poi.name }}</div>
+                  <div v-if="poi.address" class="ele-map-picker-poi-item-address">{{ poi.address }}</div>
+                  <check-circle-outlined class="ele-map-picker-poi-item-check"/>
+                </div>
+              </div>
+            </a-spin>
+          </div>
+        </a-spin>
+      </a-modal>
+    </template>
+  </locale-receiver>
+</template>
+
+<script>
+import LocaleReceiver from 'ant-design-vue/es/locale-provider/LocaleReceiver';
+import AMapLoader from '@amap/amap-jsapi-loader';
+import {
+  PlusOutlined,
+  SearchOutlined,
+  EnvironmentOutlined,
+  CheckCircleOutlined
+} from '@ant-design/icons-vue';
+
+export default {
+  name: 'EleMapPicker',
+  components: {
+    LocaleReceiver,
+    PlusOutlined,
+    SearchOutlined,
+    EnvironmentOutlined,
+    CheckCircleOutlined
+  },
+  emits: ['done', 'open', 'closed', 'update:visible'],
+  props: {
+    // 是否显示
+    visible: Boolean,
+    // 地图的高度
+    height: {
+      type: String,
+      default: '450px'
+    },
+    // 地图默认中心点
+    center: Array,
+    // 地图初始缩放级别
+    zoom: {
+      type: Number,
+      default: 11
+    },
+    // 地图选中后缩放级别
+    chooseZoom: {
+      type: Number,
+      default: 17
+    },
+    // poi检索每页数量
+    poiSize: {
+      type: Number,
+      default: 30
+    },
+    // poi检索兴趣点类别
+    poiType: {
+      type: String,
+      default: ''
+    },
+    // poi检索关键字
+    poiKeywords: {
+      type: String,
+      default: ''
+    },
+    // poi检索半径
+    poiRadius: {
+      type: Number,
+      default: 1000
+    },
+    // 是否返回行政区
+    needCity: Boolean,
+    // 是否强制选择
+    forceChoose: {
+      type: Boolean,
+      default: true
+    },
+    // 搜索建议的城市范围
+    suggestionCity: {
+      type: String,
+      default: '全国'
+    },
+    // 地点检索类型, 0: POI检索, 1: 关键字检索
+    searchType: {
+      type: Number,
+      default: 0
+    },
+    // 搜索框提示文本
+    searchPlaceholder: String,
+    // marker图标地址
+    markerSrc: {
+      type: String,
+      default: 'https://3gimg.qq.com/lightmap/components/locationPicker2/image/marker.png'
+    },
+    // 地图默认的key
+    mapKey: {
+      type: String,
+      default: '006d995d433058322319fa797f2876f5'
+    },
+    // 地图默认版本号
+    mapVersion: {
+      type: String,
+      default: '2.0'
+    },
+    // 地图风格
+    mapStyle: String,
+    // 弹窗属性
+    centered: Boolean,
+    closable: {
+      type: Boolean,
+      default: true
+    },
+    destroyOnClose: Boolean,
+    forceRender: Boolean,
+    keyboard: {
+      type: Boolean,
+      default: true
+    },
+    mask: {
+      type: Boolean,
+      default: true
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+    maskStyle: Object,
+    title: String,
+    width: {
+      type: String,
+      default: '780px'
+    },
+    wrapClassName: String,
+    zIndex: {
+      type: Number,
+      default: 1000
+    },
+    dialogStyle: Object,
+    dialogClass: String,
+    // 完成按钮文字
+    okText: String
+  },
+  data() {
+    return {
+      // 是否加载
+      show: false,
+      // 地图实例
+      map: null,
+      // 地图中心标记点
+      centerMarker: null,
+      // poi检索实例
+      placeSearch: null,
+      // 输入建议实例
+      autoComplete: null,
+      // poi检索的数据
+      poiData: [],
+      // 选中的数据索引
+      chooseIndex: null,
+      // 是否是点击poi列表移动地图
+      isSelMove: false,
+      // 图标是否显示跳动动画
+      showIconAnim: false,
+      // 搜索输入内容
+      suggestionKeywords: '',
+      // 上次搜索输入内容
+      lastSuggestion: '',
+      // 搜索建议列表
+      suggestionData: [],
+      // 选中的建议
+      chooseSuggestion: null,
+      // 初始化loading
+      loading: true,
+      // poi检索loading
+      poiLoading: false,
+      // 确定按钮loading
+      doneLoading: false
+    };
+  },
+  computed: {
+    // 跳动图标的class
+    iconClass() {
+      return [
+        'ele-map-picker-main-icon',
+        {'ele-map-picker-anim-bounce': this.showIconAnim}
+      ];
+    },
+    // 是否是暗黑模式
+    darkMode() {
+      try {
+        return this.$store.state.theme.darkMode;
+      } catch (e) {
+        return null;
+      }
+    }
+  },
+  watch: {
+    visible() {
+      if (this.visible) {
+        this.onOpen();
+      } else {
+        this.onClosed();
+      }
+    },
+    darkMode() {
+      if (this.map && !this.mapStyle) {
+        if (this.darkMode) {
+          this.map.setMapStyle('amap://styles/dark');
+        } else {
+          this.map.setMapStyle('amap://styles/normal');
+        }
+      }
+    }
+  },
+  mounted() {
+    if (this.visible) {
+      this.onOpen();
+    }
+  },
+  methods: {
+    /* 渲染地图 */
+    render() {
+      AMapLoader.load({
+        'key': this.mapKey,
+        'version': this.mapVersion,
+        'plugins': ['AMap.PlaceSearch', 'AMap.AutoComplete']
+      }).then((AMap) => {
+        this.loading = false;
+        this.poiLoading = true;
+        // 渲染地图
+        let option = {
+          resizeEnable: true, // 监控地图容器尺寸变化
+          zoom: this.zoom,  // 初缩放级别
+          center: this.center  // 初始中心点
+        };
+        if (this.mapStyle) {
+          option.mapStyle = this.mapStyle;
+        } else if (this.darkMode) {
+          option.mapStyle = 'amap://styles/dark';
+        }
+        this.map = new AMap.Map(this.$refs.eleMapPickerMap, option);
+        // 获取poi检索实例
+        this.placeSearch = new AMap.PlaceSearch({
+          type: this.poiType,
+          pageSize: this.poiSize,
+          pageIndex: 1
+        });
+        // 获取输入建议实例
+        this.autoComplete = new AMap.AutoComplete({
+          city: this.suggestionCity
+        });
+        // 地图加载完成事件
+        this.map.on('complete', () => {
+          this.chooseIndex = null;
+          let center = this.map.getCenter();
+          this.searchNearBy(center.lat, center.lng, true);
+        });
+        // 地图移动结束事件
+        this.map.on('moveend', () => {
+          // 是否是poi列表点击的移动
+          if (this.isSelMove) {
+            this.isSelMove = false;
+          } else {
+            this.showIconAnim = false;
+            this.$nextTick(() => {
+              setTimeout(() => {
+                this.showIconAnim = true;
+              }, 0);
+            });
+            let center = this.map.getCenter();
+            this.searchNearBy(center.lat, center.lng);
+          }
+        });
+        // 地图中心marker
+        this.centerMarker = new AMap.Marker({
+          icon: new AMap.Icon({
+            image: this.markerSrc,
+            size: new AMap.Size(26, 36.5),
+            imageSize: new AMap.Size(26, 36.5)
+          }),
+          offset: new AMap.Pixel(-13, -36.5)
+        });
+      }).catch(e => {
+        this.loading = false;
+        console.error(e);
+      });
+    },
+    /* poi检索 */
+    searchNearBy(lat, lng, force) {
+      if (!this.placeSearch) {
+        return;
+      }
+      // 非POI检索模式
+      if (!force && this.searchType !== 0) {
+        this.poiLoading = false;
+        return;
+      }
+      this.poiLoading = true;
+      this.placeSearch.searchNearBy(this.poiKeywords, [lng, lat], this.poiRadius, (status, result) => {
+        this.poiLoading = false;
+        if (status === 'complete') {
+          let data = result.poiList.pois.filter(p => p.location !== undefined);
+          // 如果选中的搜索建议不在poi列表中则添加
+          if (this.chooseSuggestion) {
+            if (data.length === 0 || data[0].name !== this.chooseSuggestion.name) {
+              data.unshift(Object.assign({}, this.chooseSuggestion));
+            }
+            this.chooseSuggestion = null;
+          } else {
+            this.chooseIndex = null;
+          }
+          this.poiData = data;
+        }
+      });
+    },
+    /* poi列表选中 */
+    onChoose(index) {
+      this.isSelMove = true;
+      this.chooseIndex = index;
+      const point = this.poiData[index].location;
+      this.map.setZoomAndCenter(this.chooseZoom, [point.lng, point.lat]);
+      // 非poi检索类型给地图添加中心标记点
+      if (this.searchType !== 0) {
+        this.centerMarker.setPosition([point.lng, point.lat]);
+        this.map.add(this.centerMarker);
+      } else {
+        // poi检索类型图标跳动
+        this.showIconAnim = false;
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.showIconAnim = true;
+          }, 0);
+        });
+      }
+    },
+    /* 搜索建议 */
+    onSearch(value) {
+      if (!this.autoComplete || !value || this.lastSuggestion === value) {
+        return;
+      }
+      if (this.searchType !== 0) {
+        this.poiLoading = true;
+      }
+      this.lastSuggestion = value;
+      this.autoComplete.search(value, (status, result) => {
+        let data = [];
+        if (result.tips) {
+          data = result.tips.map(d => {
+            return Object.assign({}, d, {
+              address: Array.isArray(d.address) ? d.address[0] : d.address,
+              text: d.name,
+              value: d.name
+            });
+          });
+        }
+        if (this.searchType === 0) {  // POI检索模式
+          this.suggestionData = data;
+        } else {  // 关键字检索模式
+          this.poiData = data;
+          this.chooseIndex = null;
+          this.poiLoading = false;
+          this.map.remove(this.centerMarker);
+        }
+      });
+    },
+    /* 搜索建议选中 */
+    onSelect(value, option) {
+      this.chooseSuggestion = option;
+      if (!this.poiData.length || this.poiData[0].name !== this.chooseSuggestion.name) {
+        this.poiData.unshift(Object.assign({}, this.chooseSuggestion));
+      }
+      this.chooseIndex = 0;
+      const point = this.chooseSuggestion.location;
+      if (point && this.map) {
+        this.map.setZoomAndCenter(this.chooseZoom, [point.lng, point.lat]);
+      }
+    },
+    /* 确定选择 */
+    onDone(msg) {
+      if (!this.map) {
+        return;
+      }
+      let location;
+      if (this.chooseIndex === null) {
+        if (this.forceChoose) {  // 强制选择
+          return this.$message.error(msg);
+        } else {  // 未选择使用地图中心点
+          location = Object.assign({}, this.map.getCenter());
+        }
+      } else {
+        location = Object.assign({
+          name: this.poiData[this.chooseIndex].name,
+          address: this.poiData[this.chooseIndex].address || ''
+        }, this.poiData[this.chooseIndex].location);
+      }
+      if (this.needCity) {  // 获取行政区
+        this.doneLoading = true;
+        this.map.setCenter([location.lng, location.lat]);
+        this.map.getCity((result) => {
+          this.doneLoading = false;
+          location.city = result;
+          this.$emit('done', location);
+        });
+      } else {
+        this.$emit('done', location);
+      }
+    },
+    /* 弹窗打开回调 */
+    onOpen() {
+      this.show = true;
+      if (this.destroyOnClose || this.map === null) {
+        this.render();  // 渲染地图
+      }
+      this.$emit('open');
+    },
+    /* 弹窗关闭回调 */
+    onClosed() {
+      if (this.destroyOnClose) {
+        this.show = false;
+        this.suggestionKeywords = '';
+        this.lastSuggestion = '';
+        this.poiData = [];
+        this.chooseIndex = null;
+        this.suggestionData = [];
+        this.chooseSuggestion = null;
+      }
+      this.$emit('closed');
+    },
+    /* 更新visible */
+    updateVisible(value) {
+      this.$emit('update:visible', value);
+    }
+  }
+}
+</script>
+
+<style>
+/* 工具栏 */
+.ele-map-picker-header {
+  display: flex;
+  align-items: center;
+  padding: 8px 18px;
+}
+
+.ele-map-picker-header .ele-map-picker-header-search {
+  flex: 1;
+  padding-right: 16px;
+}
+
+.ele-map-picker-header .ant-select-auto-complete {
+  max-width: 200px;
+}
+
+/* 地图 */
+.ele-map-picker-body {
+  display: flex;
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+  overflow: hidden;
+}
+
+.ele-map-picker-body .ele-map-picker-main {
+  flex: 1;
+  position: relative;
+}
+
+.ele-map-picker-body .ele-map-picker-main-plus {
+  color: #1890ff;
+  font-size: 12px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.ele-map-picker-body .ele-map-picker-main-icon {
+  width: 26px;
+  position: absolute;
+  left: 50%;
+  bottom: 50%;
+  margin-left: -13px;
+}
+
+/* poi列表 */
+.ele-map-picker-body .ele-map-picker-poi-list {
+  width: 300px;
+  overflow: auto;
+  border-top: 1px solid hsla(0, 0%, 60%, .15);
+}
+
+.ele-map-picker-body .ele-map-picker-poi-item {
+  padding: 8px 30px 8px 44px;
+  border-bottom: 1px solid hsla(0, 0%, 60%, .15);
+  position: relative;
+  cursor: pointer;
+}
+
+.ele-map-picker-body .ele-map-picker-poi-item:hover {
+  background: hsla(0, 0%, 60%, .05);
+}
+
+.ele-map-picker-body .ele-map-picker-poi-item-icon {
+  position: absolute;
+  top: 50%;
+  left: 14px;
+  transform: translateY(-50%);
+  font-size: 18px;
+  opacity: .4;
+}
+
+.ele-map-picker-body .ele-map-picker-poi-item-title {
+  font-size: 14px;
+}
+
+.ele-map-picker-body .ele-map-picker-poi-item-address {
+  font-size: 12px;
+  margin-top: 2px;
+  opacity: .6;
+}
+
+.ele-map-picker-body .ele-map-picker-poi-item-check {
+  position: absolute;
+  top: 50%;
+  right: 7px;
+  transform: translateY(-50%);
+  color: #1890ff;
+  font-size: 14px;
+  display: none;
+}
+
+.ele-map-picker-body .ele-map-picker-poi-item.active .ele-map-picker-poi-item-check {
+  display: block;
+}
+
+/* 地图图标跳动动画 */
+.ele-map-picker-body .ele-map-picker-anim-bounce {
+  animation: eleMapPickerAnimBounce 500ms;
+  animation-direction: alternate;
+}
+
+@keyframes eleMapPickerAnimBounce {
+  0%, 60%, 75%, 90%, to {
+    transition-timing-function: cubic-bezier(.215, .61, .355, 1)
+  }
+  0%, to {
+    transform: translate3d(0, 0, 0)
+  }
+  25% {
+    transform: translate3d(0, -10px, 0)
+  }
+  50% {
+    transform: translate3d(0, -20px, 0)
+  }
+  75% {
+    transform: translate3d(0, -10px, 0)
+  }
+}
+
+/* 小屏幕适应 */
+@media screen and (max-width: 768px) {
+  .ele-map-picker-dialog {
+    top: 0;
+    padding: 0;
+  }
+
+  .ele-map-picker-body {
+    display: block;
+  }
+
+  .ele-map-picker-body .ele-map-picker-main > div {
+    height: 250px !important;
+  }
+
+  .ele-map-picker-body .ele-map-picker-poi-list {
+    width: auto;
+    height: calc(100vh - 370px) !important;
+  }
+}
+</style>
--- a/src/components/ele-admin-pro/packages/ele-pro-header/index.js
+++ b/src/components/ele-admin-pro/packages/ele-pro-header/index.js
@@ -0,0 +1,8 @@
+/** 顶栏 license by http://eleadmin.com */
+import EleProHeader from './src/main';
+
+EleProHeader.install = function (Vue) {
+  Vue.component(EleProHeader.name, EleProHeader);
+};
+
+export default EleProHeader;
--- a/src/components/ele-admin-pro/packages/ele-pro-header/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-pro-header/src/main.vue
@@ -0,0 +1,134 @@
+<!-- 高级布局顶栏 license by http://eleadmin.com -->
+<template>
+  <div :class="['ele-admin-header', {'ele-bg-primary': isPrimary}]">
+    <!-- logo -->
+    <div class="ele-admin-logo" @click="onLogoClick">
+      <slot name="logo"/>
+      <span v-if="projectName">{{ projectName }}</span>
+    </div>
+    <!-- 左侧功能区 -->
+    <div class="ele-admin-header-tool" v-if="showLeftTool">
+      <div v-if="showCollapse" class="ele-admin-header-tool-item" @click="toggleCollapse">
+        <MenuUnfoldOutlined v-if="collapse"/>
+        <MenuFoldOutlined v-else/>
+      </div>
+      <div v-if="showRefresh" class="ele-admin-header-tool-item" @click="reloadPage">
+        <ReloadOutlined/>
+      </div>
+      <!-- 自定义左侧功能 -->
+      <slot name="left"/>
+    </div>
+    <!-- 面包屑导航 -->
+    <a-breadcrumb
+      v-if="showBreadcrumb"
+      class="ele-admin-breadcrumb"
+      :separator="breadcrumbSeparator">
+      <a-breadcrumb-item v-for="(d, i) in levels" :key="i">
+        <router-link v-if="d.home" to="/">
+          <home-outlined/>
+        </router-link>
+        <span v-else>{{ d.title }}</span>
+      </a-breadcrumb-item>
+    </a-breadcrumb>
+    <!-- 自定义中间区域 -->
+    <slot name="center"/>
+    <!-- 顶部菜单区 -->
+    <a-menu
+      v-if="useDeep"
+      :theme="theme"
+      mode="horizontal"
+      :selected-keys="active"
+      class="ele-admin-header-nav">
+      <template v-for="m in menus">
+        <ele-pro-sidebar-item v-if="!m.meta.hide" :key="m.path" :item="m"/>
+      </template>
+    </a-menu>
+    <ele-pro-sidebar-menus
+      v-else
+      :data="menus"
+      :theme="theme"
+      mode="horizontal"
+      :selected-keys="active"
+      class="ele-admin-header-nav"/>
+    <!-- 右侧功能区 -->
+    <slot name="right"/>
+  </div>
+</template>
+
+<script>
+import {
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  ReloadOutlined,
+  HomeOutlined
+} from '@ant-design/icons-vue';
+import EleProSidebarItem from '../../ele-pro-sidebar-item';
+import EleProSidebarMenus from '../../ele-pro-sidebar-menus';
+
+export default {
+  name: 'EleProHeader',
+  components: {
+    MenuFoldOutlined,
+    MenuUnfoldOutlined,
+    ReloadOutlined,
+    HomeOutlined,
+    EleProSidebarItem,
+    EleProSidebarMenus
+  },
+  emits: [
+    'logo-click',
+    'reload-page',
+    'toggle-collapse'
+  ],
+  props: {
+    // 项目名
+    projectName: String,
+    // 面包屑导航数据
+    levels: Array,
+    // 顶栏菜单数据
+    menus: Array,
+    // 顶栏菜单选中
+    active: Array,
+    // 顶栏风格
+    headStyle: String,
+    // 是否折叠侧栏
+    collapse: Boolean,
+    // 是否显示左边功能区
+    showLeftTool: Boolean,
+    // 是否显示折叠按钮
+    showCollapse: Boolean,
+    // 是否显示刷新按钮
+    showRefresh: Boolean,
+    // 是否显示面包屑导航
+    showBreadcrumb: Boolean,
+    // 面包屑导航分隔符
+    breadcrumbSeparator: String,
+    // 是否使用递归渲染顶栏菜单
+    useDeep: Boolean
+  },
+  computed: {
+    // 是否是主色顶栏
+    isPrimary() {
+      return this.headStyle === 'primary';
+    },
+    // 顶栏菜单主题
+    theme() {
+      return this.isPrimary ? 'light' : this.headStyle;
+    }
+  },
+  methods: {
+    /* 折叠展开侧栏 */
+    toggleCollapse() {
+      this.$emit('toggle-collapse');
+    },
+    /* 刷新页面 */
+    reloadPage() {
+      this.$emit('reload-page');
+    },
+    /* logo点击事件 */
+    onLogoClick() {
+      this.$emit('logo-click');
+    }
+  }
+}
+</script>
--- a/src/components/ele-admin-pro/packages/ele-pro-layout/index.js
+++ b/src/components/ele-admin-pro/packages/ele-pro-layout/index.js
@@ -0,0 +1,8 @@
+/** ele admin 布局 license by http://eleadmin.com */
+import EleProLayout from './src/main';
+
+EleProLayout.install = function (Vue) {
+  Vue.component(EleProLayout.name, EleProLayout);
+};
+
+export default EleProLayout;
--- a/src/components/ele-admin-pro/packages/ele-pro-layout/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-pro-layout/src/main.vue
@@ -0,0 +1,970 @@
+<!-- 高级布局 license by http://eleadmin.com -->
+<template>
+  <div :class="layoutClass">
+    <!-- 顶栏 -->
+    <ele-pro-header
+      :levels="levelData"
+      :use-deep="useDeep"
+      :collapse="collapse"
+      :menus="headMenuData"
+      :head-style="headStyle"
+      :active="headMenuActive"
+      :project-name="projectName"
+      :show-refresh="showRefresh"
+      :show-left-tool="showHeadLeftTool"
+      :breadcrumb-separator="breadcrumbSeparator"
+      :show-collapse="showCollapse && showSideMenu"
+      :show-breadcrumb="showBreadcrumb && layoutStyle === 'side'"
+      @toggle-collapse="toggleCollapse"
+      @reload-page="reloadPage"
+      @logo-click="onLogoClick">
+      <template #logo>
+        <slot name="logo"/>
+      </template>
+      <template #left>
+        <slot name="left"/>
+      </template>
+      <template #center>
+        <slot name="center"/>
+      </template>
+      <template #right>
+        <slot name="right"/>
+      </template>
+    </ele-pro-header>
+    <div class="ele-admin-main">
+      <!-- 侧栏一级导航 -->
+      <ele-pro-sidebar-nav
+        v-if="showSideNav"
+        :data="sideNavData"
+        :use-deep="useDeep"
+        :theme="sideNavTheme"
+        :collapse="navIsCollapse"
+        :menu-collapse="collapse"
+        :inline-indent="inlineIndent"
+        :show-nav-collapse="showNavCollapse"
+        :active="collapse ? sideMenuActive : sideNavActive"
+        @toggle-collapse="toggleNavCollapse">
+        <template #top>
+          <slot name="nav-top"/>
+        </template>
+        <template #bottom>
+          <slot name="nav-bottom"/>
+        </template>
+      </ele-pro-sidebar-nav>
+      <!-- 侧栏 -->
+      <ele-pro-sidebar
+        v-if="showSideMenu"
+        :use-deep="useDeep"
+        :data="sideMenuData"
+        :theme="sideMenuTheme"
+        :active="sideMenuActive"
+        :menu-opens="sideMenuOpen"
+        :collapse="sideMenuCollapse"
+        :unique-open="sideUniqueOpen"
+        :inline-indent="inlineIndent">
+        <template #top>
+          <slot name="top"/>
+        </template>
+        <template #bottom>
+          <slot name="bottom"/>
+        </template>
+      </ele-pro-sidebar>
+      <!-- 主体 -->
+      <div class="ele-admin-body">
+        <!-- 多页签 -->
+        <ele-pro-tabs
+          v-if="showTabs"
+          :tabs="tabData"
+          :active="tabActive"
+          :click-reload="clickReload"
+          :home-title="homeRouteTitle"
+          :show-refresh="showTabRefresh"
+          :body-fullscreen="bodyFullscreen"
+          @tab-change="tabChange"
+          @tab-remove="tabRemove"
+          @tab-remove-all="tabRemoveAll"
+          @tab-remove-left="tabRemoveLeft"
+          @tab-remove-right="tabRemoveRight"
+          @tab-remove-other="tabRemoveOther"
+          @fullscreen-body="toggleBodyFullscreen"
+          @reload-page="reloadPage">
+          <template #dropdown>
+            <slot name="dropdown"/>
+          </template>
+        </ele-pro-tabs>
+        <!-- 内容区域 -->
+        <div class="ele-admin-content">
+          <div v-if="showContent" class="ele-admin-content-view">
+            <slot name="content">
+              <ele-empty-layout/>
+            </slot>
+          </div>
+          <template v-if="showContent && showFooter && !hideFooter">
+            <slot name="footer"/>
+          </template>
+        </div>
+      </div>
+    </div>
+    <!-- 小屏幕遮罩层 -->
+    <div class="ele-admin-shade" @click="toggleCollapse"></div>
+    <!-- 自定义内容 -->
+    <slot/>
+    <!-- 返回顶部 -->
+    <a-back-top
+      v-if="showBackTop && !fixedBody"
+      :visibility-height="backTopVisibilityHeight"/>
+    <a-back-top
+      v-else-if="showBackTop"
+      :target="getContentElem"
+      :visibility-height="backTopVisibilityHeight"/>
+    <!-- 主题设置抽屉 -->
+    <ele-pro-setting
+      v-if="needSetting"
+      :tips="tips"
+      :color="color"
+      :themes="themes"
+      :dark-mode="darkMode"
+      :weak-mode="weakMode"
+      :show-tabs="showTabs"
+      :tab-style="tabStyle"
+      :body-full="bodyFull"
+      :visible="showSetting"
+      :head-style="headStyle"
+      :side-style="sideStyle"
+      :fixed-body="fixedBody"
+      :show-footer="showFooter"
+      :color-picker="colorPicker"
+      :fixed-header="fixedHeader"
+      :layout-style="layoutStyle"
+      :fixed-sidebar="fixedSidebar"
+      :colorful-icon="colorfulIcon"
+      :logo-auto-size="logoAutoSize"
+      :side-menu-style="sideMenuStyle"
+      :side-unique-open="sideUniqueOpen"
+      :predefine-colors="predefineColors"
+      @change-style="changeStyle"
+      @change-color="changeColor"
+      @change-dark-mode="changeDarkMode"
+      @change-weak-mode="changeWeakMode"
+      @update:visible="updateShowSetting"/>
+  </div>
+</template>
+
+<script>
+import debounce from 'lodash-es/debounce';
+import EleProHeader from '../../ele-pro-header';
+import EleProSidebar from '../../ele-pro-sidebar';
+import EleProSidebarNav from '../../ele-pro-sidebar-nav';
+import EleProTabs from '../../ele-pro-tabs';
+import EleProSetting from '../../ele-pro-setting';
+import EleEmptyLayout from '../../ele-empty-layout';
+import {eachTreeData, formatTreeData} from '../../util.js';
+// 用于刷新路由的path
+const REDIRECT_PATH = '/redirect/';
+// 默认主页标题
+const DEFAULT_HOME_TITLE = '主页';
+
+export default {
+  name: 'EleProLayout',
+  components: {
+    EleProHeader,
+    EleProSidebar,
+    EleProSidebarNav,
+    EleProTabs,
+    EleProSetting,
+    EleEmptyLayout
+  },
+  emits: [
+    'logo-click',
+    'reload-page',
+    'update-screen',
+    'update-collapse',
+    'tab-add',
+    'tab-remove',
+    'tab-remove-all',
+    'tab-remove-left',
+    'tab-remove-right',
+    'tab-remove-other',
+    'change-color',
+    'change-style',
+    'change-dark-mode',
+    'change-weak-mode',
+    'set-home-components',
+    'body-fullscreen-change',
+    'update:side-nav-collapse',
+    'update:show-setting'
+  ],
+  props: {
+    // 全部菜单数据
+    menus: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    // 标签页数据
+    tabs: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    // 项目名
+    projectName: String,
+    // 主页标题
+    homeTitle: String,
+    // 是否显示侧栏折叠按钮
+    showCollapse: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示一级侧栏折叠按钮
+    showNavCollapse: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示刷新按钮
+    showRefresh: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示面包屑导航
+    showBreadcrumb: {
+      type: Boolean,
+      default: true
+    },
+    // 面包屑导航分隔符
+    breadcrumbSeparator: {
+      type: String,
+      default: '/'
+    },
+    // 是否折叠侧栏
+    collapse: {
+      type: Boolean,
+      default: false
+    },
+    // 是否折叠侧栏一级菜单
+    sideNavCollapse: {
+      type: Boolean,
+      default: false
+    },
+    // 顶栏风格, light | dark
+    headStyle: {
+      type: String,
+      default: 'light'
+    },
+    // 侧边栏风格, light | dark
+    sideStyle: {
+      type: String,
+      default: 'dark'
+    },
+    // 布局风格, default | top | mix
+    layoutStyle: {
+      type: String,
+      default: 'default'
+    },
+    // 侧边栏菜单模式, default | mix
+    sideMenuStyle: {
+      type: String,
+      default: 'default'
+    },
+    // 是否固定顶栏
+    fixedHeader: {
+      type: Boolean,
+      default: false
+    },
+    // 是否固定侧栏
+    fixedSidebar: {
+      type: Boolean,
+      default: true
+    },
+    // 是否固定主体
+    fixedBody: {
+      type: Boolean,
+      default: false
+    },
+    // 内容区域宽度是否铺满
+    bodyFull: {
+      type: Boolean,
+      default: true
+    },
+    // logo宽度是否自适应
+    logoAutoSize: Boolean,
+    // 是否显示全局页脚
+    showFooter: Boolean,
+    // 侧栏菜单是否彩色图标
+    colorfulIcon: Boolean,
+    // 侧栏是否只保持一个子菜单展开
+    sideUniqueOpen: {
+      type: Boolean,
+      default: true
+    },
+    // 是否开启多页签
+    showTabs: {
+      type: Boolean,
+      default: true
+    },
+    // 标签页风格, default | dot | card
+    tabStyle: {
+      type: String,
+      default: 'dot'
+    },
+    // 是否色弱模式
+    weakMode: Boolean,
+    // 是否暗黑模式
+    darkMode: Boolean,
+    // 当前主题色
+    color: String,
+    // 是否需要主题设置抽屉
+    needSetting: {
+      type: Boolean,
+      default: true
+    },
+    // 是否打开主题设置抽屉, 支持v-model绑定
+    showSetting: Boolean,
+    // 主题设置抽屉界面显示的主题列表
+    themes: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    // 主题设置抽屉界面提示文字
+    tips: {
+      type: String,
+      default: ''
+    },
+    // 主题设置抽屉是否显示颜色选择器
+    colorPicker: {
+      type: Boolean,
+      default: true
+    },
+    // 主题设置抽屉颜色选择器预设颜色
+    predefineColors: {
+      type: Array,
+      default() {
+        return [
+          '#f5222d',
+          '#fa541c',
+          '#fa8c16',
+          '#faad14',
+          '#a0d911',
+          '#52c41a',
+          '#13c2c2',
+          '#2f54eb',
+          '#722ed1',
+          '#eb2f96'
+        ];
+      }
+    },
+    // 内容区域全屏时是否不显示页签栏
+    contentFullscreen: {
+      type: Boolean,
+      default: false
+    },
+    // 是否按返回键退出内容区域全屏
+    fullscreenExitOnEsc: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示主体部分
+    showContent: {
+      type: Boolean,
+      default: true
+    },
+    // 是否再次点击选中页签刷新
+    clickReload: Boolean,
+    // 开启多页签是否缓存组件
+    tabKeepAlive: {
+      type: Boolean,
+      default: true
+    },
+    // 菜单缩进
+    inlineIndent: {
+      type: Number,
+      default: 16
+    },
+    // 是否需要返回顶部组件
+    showBackTop: {
+      type: Boolean,
+      default: true
+    },
+    // 返回顶部的滚动高度
+    backTopVisibilityHeight: {
+      type: Number,
+      default: 200
+    },
+    // 不显示全局页脚的路由
+    hideFooters: Array,
+    // 不显示侧边栏的路由
+    hideSidebars: Array,
+    // 可重复打开页签的路由地址
+    repeatableTabs: Array,
+    // 是否使用递归渲染菜单
+    useDeep: Boolean,
+    // 自定义菜单标题的i18n
+    i18n: Function
+  },
+  data() {
+    return {
+      // 国际化处理后的菜单数据
+      menuData: [],
+      // 国际化处理后的多页签数据
+      tabData: [],
+      // 面包屑导航数据
+      levelData: [],
+      // 侧栏一级菜单数据
+      sideNavData: [],
+      // 侧栏一级菜单选中
+      sideNavActive: [],
+      // 侧栏菜单数据
+      sideMenuData: [],
+      // 侧栏菜单选中
+      sideMenuActive: [],
+      // 侧栏菜单展开
+      sideMenuOpen: [],
+      // 顶栏菜单数据
+      headMenuData: [],
+      // 顶栏菜单选中
+      headMenuActive: [],
+      // 多页签选中
+      tabActive: '/',
+      // 当前路由是否隐藏侧栏
+      hideSidebar: false,
+      // 当前路由是否隐藏页脚
+      hideFooter: false,
+      // 是否全屏内容区域
+      bodyFullscreen: false,
+      // 主页路由标题
+      homeRouteTitle: this.homeTitle || DEFAULT_HOME_TITLE,
+      // 是否折叠一级菜单
+      navIsCollapse: this.sideNavCollapse,
+      // 内容区域元素
+      contentElem: '.ele-admin-layout>.ele-admin-main>.ele-admin-body>.ele-admin-content',
+      // 当前屏幕宽度
+      screenWidth: document.documentElement.clientWidth || document.body.clientWidth,
+      // 窗口大小改变监听器
+      onResizeListener: debounce(() => {
+        this.updateScreen();
+      }, 300)
+    };
+  },
+  computed: {
+    // 布局class
+    layoutClass() {
+      const showSidebar = this.showSideNav || this.showSideMenu;
+      return [
+        'ele-admin-layout',
+        // 折叠侧边栏
+        {'ele-admin-collapse': this.collapse},
+        // 固定顶栏
+        {'ele-admin-fixed-header': this.fixedHeader},
+        // 固定侧边栏
+        {'ele-admin-fixed-sidebar': this.fixedSidebar && !this.isTopMenu && showSidebar},
+        // 固定主体
+        {'ele-admin-fixed-body': this.fixedBody},
+        // 暗色顶栏
+        {'ele-admin-head-dark': this.headStyle !== 'light'},
+        // 暗色侧边栏
+        {'ele-admin-side-dark': this.sideStyle === 'dark'},
+        // 侧边栏双排菜单
+        {'ele-admin-side-mix': this.isMixSideMenu && !this.isMobile},
+        // 侧边栏彩色图标
+        {'ele-admin-side-colorful': this.colorfulIcon},
+        // logo宽度自适应
+        {'ele-admin-logo-auto': (this.logoAutoSize || this.isTopMenu || !showSidebar) && !this.isMobile},
+        // 开启多页签
+        {'ele-admin-show-tabs': this.showTabs},
+        // 圆点风格页签
+        {'ele-admin-tab-dot': this.tabStyle === 'dot'},
+        // 卡片风格页签
+        {'ele-admin-tab-card': this.tabStyle === 'card'},
+        // 主体内容定宽
+        {'ele-admin-body-limit': !this.bodyFull},
+        // 内容区域全屏
+        {'ele-admin-body-fullscreen': this.bodyFullscreen},
+        // 内容区域全屏不显示页签栏
+        {'ele-admin-content-fullscreen': this.bodyFullscreen && this.contentFullscreen},
+        // 侧栏双排菜单布局时折叠一级菜单
+        {'ele-admin-nav-collapse': this.navIsCollapse && !this.isMobile}
+      ]
+    },
+    // 是否是移动端小屏幕
+    isMobile() {
+      return this.screenWidth < 768;
+    },
+    // 是否折叠侧栏菜单
+    sideMenuCollapse() {
+      return (this.isMobile || this.isMixSideMenu) ? false : this.collapse;
+    },
+    // 侧栏一级菜单主题
+    sideNavTheme() {
+      return this.sideStyle === 'dark' ? 'dark' : 'light';
+    },
+    // 侧栏菜单主题
+    sideMenuTheme() {
+      return (this.isMixSideMenu && !this.isMobile) ? 'light' : this.sideNavTheme;
+    },
+    // 是否显示顶栏左侧功能区
+    showHeadLeftTool() {
+      return this.isMobile || !this.isTopMenu;
+    },
+    // 是否显示侧栏一级菜单
+    showSideNav() {
+      return !(
+        !this.isMixSideMenu ||
+        this.isMobile ||
+        this.isTopMenu ||
+        (this.sideNavData.length === 0 && this.menuData.length !== 0) ||
+        this.hideSidebar
+      );
+    },
+    // 是否显示侧栏菜单
+    showSideMenu() {
+      return this.isMobile ? true : !(
+        this.isTopMenu ||
+        (this.sideMenuData.length === 0 && this.menuData.length !== 0) ||
+        this.hideSidebar
+      );
+    },
+    // 是否是栏菜单布局
+    isTopMenu() {
+      return this.layoutStyle === 'top';
+    },
+    // 是否是混合菜单布局
+    isMixMenu() {
+      return this.layoutStyle === 'mix';
+    },
+    // 是否是双栏菜单侧栏
+    isMixSideMenu() {
+      return this.sideMenuStyle === 'mix';
+    },
+    // 页签栏右侧下拉是否显示刷新按钮
+    showTabRefresh() {
+      return this.bodyFullscreen || (this.isTopMenu && !this.isMobile);
+    }
+  },
+  created() {
+    this.changeLanguage();
+    const current = this.$route;
+    if (current) {
+      this.onRouteChange(current);
+    }
+    // 监听浏览器窗口大小改变
+    window.addEventListener('resize', this.onResizeListener);
+    window.addEventListener('keydown', this.onKeydownListener);
+  },
+  methods: {
+    /* 折叠展开侧栏 */
+    toggleCollapse() {
+      this.updateCollapse(!this.collapse);
+    },
+    /* 更新侧栏折叠状态 */
+    updateCollapse(value) {
+      this.$emit('update-collapse', value);
+    },
+    /* 折叠展开一级菜单 */
+    toggleNavCollapse() {
+      this.navIsCollapse = !this.navIsCollapse;
+      this.$emit('update:side-nav-collapse', this.navIsCollapse);
+    },
+    /* logo点击事件 */
+    onLogoClick() {
+      this.$emit('logo-click', this.isHome(this.$route));
+    },
+    /* 刷新页面 */
+    reloadPage() {
+      this.$emit('reload-page');
+    },
+    /* 内容区域全屏切换 */
+    toggleBodyFullscreen() {
+      this.bodyFullscreen = !this.bodyFullscreen;
+      this.$emit('body-fullscreen-change', this.bodyFullscreen);
+    },
+    /* 键盘事件监听 */
+    onKeydownListener(event) {
+      if (event.keyCode === 27) {
+        if (this.fullscreenExitOnEsc && this.bodyFullscreen) {
+          this.bodyFullscreen = false;
+          event.stopPropagation();
+        }
+      }
+    },
+    /* 更新屏幕尺寸 */
+    updateScreen() {
+      this.screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
+      const screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
+      this.$emit('update-screen', {width: this.screenWidth, height: screenHeight});
+    },
+    /* tab切换 */
+    tabChange({fullPath, key}) {
+      this.$router.push(fullPath || key);
+    },
+    /* 移除tab */
+    tabRemove(value) {
+      this.$emit('tab-remove', value);
+    },
+    /* 移除左边tab */
+    tabRemoveLeft(value) {
+      this.$emit('tab-remove-left', value);
+    },
+    /* 移除右边tab */
+    tabRemoveRight(value) {
+      this.$emit('tab-remove-right', value);
+    },
+    /* 移除其它tab */
+    tabRemoveOther(value) {
+      this.$emit('tab-remove-other', value);
+    },
+    /* 移除全部tab */
+    tabRemoveAll(active) {
+      this.$emit('tab-remove-all', active);
+    },
+    /* 切换布局配置 */
+    changeStyle(value) {
+      this.$emit('change-style', value);
+    },
+    /* 切换主题色 */
+    changeColor(value) {
+      this.$emit('change-color', value);
+    },
+    /* 切换暗黑模式 */
+    changeDarkMode(value) {
+      this.$emit('change-dark-mode', value);
+    },
+    /* 切换色弱模式 */
+    changeWeakMode(value) {
+      this.$emit('change-weak-mode', value);
+    },
+    /* 设置主页的组件用于keep-alive */
+    setHomeComponents(components) {
+      this.$emit('set-home-components', components);
+    },
+    /* 修改设置抽屉的visible */
+    updateShowSetting(value) {
+      this.$emit('update:show-setting', value);
+    },
+    /* 处理路由切换 */
+    onRouteChange(current) {
+      const {meta, matched, path, fullPath} = current;
+      if (path.startsWith(REDIRECT_PATH)) {
+        return;
+      }
+
+      // 判断是否需要隐藏侧栏
+      if (this.hideSidebars && this.hideSidebars.includes(current.path)) {
+        this.hideSidebar = true;
+      } else {
+        this.hideSidebar = meta.hideSidebar;
+      }
+
+      // 判断是否需要隐藏页脚
+      if (this.hideFooters && this.hideFooters.includes(current.path)) {
+        this.hideFooter = true;
+      } else {
+        this.hideFooter = meta.hideFooter;
+      }
+
+      // 获取面包屑导航数据
+      const levels = [], isHome = this.isHome(current), components = [];
+      if (!isHome) {
+        levels.push({home: true, title: this.homeRouteTitle});
+      }
+      matched.forEach((m) => {
+        if (m.meta && m.meta.title && m.meta.breadcrumb !== false) {
+          levels.push(this.toLevelObject(m.path, m.meta.title));
+        }
+        if (m.components && m.components.default && m.components.default.name) {
+          components.push(m.components.default.name);
+        }
+      });
+      this.levelData = levels;
+
+      // 添加页签
+      if (isHome) {
+        this.tabActive = '/';
+        this.setHomeComponents(components);
+      } else {
+        let title = meta.title, closable = (meta.closable !== false), key = path;
+        if (meta.tabUnique === false || (this.repeatableTabs && this.repeatableTabs.includes(key))) {
+          key = fullPath;
+        }
+        if (title) {
+          this.$emit('tab-add', {key, path, title, fullPath, components, closable});
+        }
+        this.tabActive = key;
+      }
+
+      // 获取顶栏和侧栏的菜单数据和选中
+      this.updateMenuActive(current);
+      if (this.isMixMenu || this.isMixSideMenu) {
+        this.splitMenuData();
+      }
+
+      // 移动端自动收起侧边栏
+      if (this.isMobile) {
+        this.updateCollapse(true);
+      }
+    },
+    /* 判断路由是否是主页 */
+    isHome(route) {
+      if (route) {
+        const {path, matched} = route;
+        return ('/' === path) || (matched.length ? (matched[0].redirect === path) : false);
+      }
+    },
+    /* 获取path对应的面包屑导航数据 */
+    toLevelObject(path, title) {
+      const menu = this.findMenuByPath(path);
+      return {path: path, title: (menu && menu.meta && menu.meta.title) || title};
+    },
+    /* 获取path对应的菜单数据 */
+    findMenuByPath(path) {
+      let data;
+      eachTreeData(this.menuData, (d) => {
+        if (path === d.path) {
+          data = d;
+          return false;
+        }
+      });
+      return data;
+    },
+    /* 更新顶栏和侧栏的菜单选中 */
+    updateMenuActive(current) {
+      const {matched, meta, path} = current;
+      let active = path, active1 = null, active2 = null, openKeys = [];
+      if (meta && typeof meta.active === 'string') {
+        active = meta.active;
+      }
+      if (matched && matched.length) {
+        let match1 = matched[matched.length - 1], match2 = match1;
+        if (matched.length > 1) {
+          match1 = matched[1];
+        }
+        if (matched.length > 2) {
+          match2 = matched[2];
+        }
+        if (match1.meta && typeof match1.meta.active === 'string') {
+          active1 = match1.meta.active;
+        } else {
+          active1 = match1.path;
+        }
+        if (match2.meta && typeof match2.meta.active === 'string') {
+          active2 = match2.meta.active;
+        } else {
+          active2 = match2.path;
+        }
+        // 获取菜单展开的key
+        matched.forEach((d, i) => {
+          if (i !== 0 && i !== (matched.length - 1)) {
+            openKeys.push(d.path);
+          }
+        });
+      }
+      if (this.isTopMenu) {  // 顶栏导航
+        this.headMenuActive = [active].concat(openKeys);
+        this.sideNavActive = [];
+      } else if (this.isMixMenu) {  // 混合导航
+        this.headMenuActive = [active1];
+        this.sideNavActive = [active2];
+      } else {  // 左侧导航
+        this.headMenuActive = [];
+        this.sideNavActive = [active1];
+      }
+      this.sideMenuActive = [active].concat(openKeys);
+      if (this.sideUniqueOpen) {
+        this.sideMenuOpen = openKeys;
+      } else {
+        this.sideMenuOpen = Array.from(new Set(this.sideMenuOpen.concat(openKeys)));
+      }
+    },
+    /* 分割出顶栏和侧栏的菜单数据 */
+    splitMenuData() {
+      if (!this.menuData || !this.menuData.length) {
+        this.headMenuData = [];
+        this.sideNavData = [];
+        this.sideMenuData = [];
+      } else if (this.isMobile) {  // 移动端
+        this.headMenuData = [];
+        this.sideNavData = [];
+        this.sideMenuData = this.menuData;
+      } else if (this.isTopMenu) {  // 顶部导航
+        this.headMenuData = this.menuData;
+        this.sideNavData = [];
+        this.sideMenuData = [];
+      } else if (this.isMixMenu) {  // 混合导航
+        this.headMenuData = this.menuData.map((d) => {
+          return {path: d.path, meta: d.meta};
+        });
+        let sideMenus = this.headMenuActive ? this.menuData.filter((d) => {
+          return this.headMenuActive[0] === d.path;
+        }) : [];
+        sideMenus = (sideMenus.length ? sideMenus[0].children : this.menuData[0].children) || [];
+        if (!sideMenus.length) {
+          this.sideNavData = [];
+          this.sideMenuData = [];
+        } else if (this.isMixSideMenu) {  // 左侧双菜单
+          this.sideNavData = sideMenus.map((d) => {
+            return {
+              path: d.path,
+              meta: d.meta,
+              children: this.collapse ? d.children : null,
+              tempChildren: d.children
+            };
+          });
+          let temps = this.sideNavActive ? sideMenus.filter((d) => {
+            return this.sideNavActive[0] === d.path;
+          }) : [];
+          temps = (temps.length ? temps[0].children : sideMenus[0].children) || [];
+          this.sideMenuData = temps;
+        } else {  // 左侧单菜单
+          this.sideNavData = [];
+          this.sideMenuData = sideMenus;
+        }
+      } else {  // 左侧导航
+        this.headMenuData = [];
+        if (this.isMixSideMenu) {  // 左侧双菜单
+          this.sideNavData = this.menuData.map((d) => {
+            return {
+              path: d.path,
+              meta: d.meta,
+              children: this.collapse ? d.children : null,
+              tempChildren: d.children
+            };
+          });
+          let temps = this.sideNavActive ? this.menuData.filter((d) => {
+            return this.sideNavActive[0] === d.path;
+          }) : [];
+          temps = (temps.length ? temps[0].children : this.menuData[0].children) || [];
+          this.sideMenuData = temps;
+        } else {  // 左侧单菜单
+          this.sideNavData = [];
+          this.sideMenuData = this.menuData;
+        }
+      }
+    },
+    /* 语言切换后重新处理数据 */
+    changeLanguage() {
+      this.updateMenuData();
+      this.updateLevelData();
+      this.updateTabData();
+    },
+    /* 国际化改变后更新菜单数据 */
+    updateMenuData() {
+      let tempHomeTitle = null;
+      this.menuData = formatTreeData(this.menus, (item) => {
+        const title = item.meta ? item.meta.title : null;
+        if (!tempHomeTitle && (!item.children || !item.children.length)) {
+          tempHomeTitle = title;
+        }
+        return Object.assign({}, item, {
+          meta: Object.assign({}, item.meta, {
+            title: this.routeI18n(item.path, item) || title
+          })
+        });
+      });
+      this.splitMenuData();
+      this.homeRouteTitle = this.homeTitle || tempHomeTitle || DEFAULT_HOME_TITLE;
+    },
+    /* 国际化改变后更新页签数据 */
+    updateTabData() {
+      const tabs = [];
+      this.tabs.forEach((item) => {
+        const menu = this.findMenuByPath(item.path);
+        tabs.push(Object.assign({}, item, {
+          title: this.routeI18n(item.path, menu) || item.title
+        }));
+      });
+      this.tabData = tabs;
+    },
+    /* 国际化改变后更新面包屑导航数据 */
+    updateLevelData() {
+      const levels = [];
+      this.levelData.forEach((d) => {
+        if (d.home) {
+          levels.push({home: true, title: this.homeRouteTitle});
+        } else {
+          levels.push(this.toLevelObject(d.path, d.title));
+        }
+      });
+      this.levelData = levels;
+    },
+    /* 获取路由地址对应的il8n名称 */
+    routeI18n(path, menu) {
+      if (this.i18n && path) {
+        let key;
+        if (path.startsWith('http://') || path.startsWith('https://') || path.startsWith('//')) {
+          key = path.replace(/\.(\w)/g, ($0, $1) => $1.toUpperCase());
+        } else {
+          key = (path.indexOf('/') === 0 ? path.substring(1) : path);
+          key = key.replace(/-(\w)/g, ($0, $1) => $1.toUpperCase())
+            .replace(/_(\w)/g, ($0, $1) => $1.toUpperCase())
+            .replace(/\//g, '.');
+        }
+        return this.i18n(path, key, menu);
+      }
+    },
+    /* 侧栏折叠状态改变处理 */
+    onCollapseChange() {
+      if (this.isMixSideMenu) {
+        if (this.collapse) {
+          this.sideNavData.forEach((d) => {
+            d.children = d.tempChildren;
+          });
+        } else {
+          this.sideNavData.forEach((d) => {
+            d.children = null;
+          });
+        }
+      }
+    },
+    /* 获取内容elem */
+    getContentElem() {
+      return document.querySelector(this.contentElem);
+    }
+  },
+  watch: {
+    $route() {
+      this.onRouteChange(this.$route);
+    },
+    layoutStyle() {
+      const current = this.$route;
+      if (current) {
+        this.updateMenuActive(current);
+        this.splitMenuData();
+      }
+    },
+    sideMenuStyle() {
+      this.splitMenuData();
+    },
+    isMobile() {
+      this.splitMenuData();
+    },
+    menus() {
+      this.updateMenuData();
+    },
+    tabs() {
+      this.updateTabData();
+    },
+    homeTitle() {
+      if (this.homeTitle) {
+        this.homeRouteTitle = this.homeTitle;
+      } else {
+        this.updateMenuData();
+      }
+      this.updateLevelData();
+    },
+    sideNavCollapse() {
+      this.navIsCollapse = this.sideNavCollapse;
+    },
+    collapse() {
+      this.onCollapseChange();
+    }
+  },
+  unmounted() {
+    // 销毁监听
+    window.removeEventListener('resize', this.onResizeListener);
+    window.removeEventListener('keydown', this.onKeydownListener);
+  }
+}
+</script>
--- a/src/components/ele-admin-pro/packages/ele-pro-setting/index.js
+++ b/src/components/ele-admin-pro/packages/ele-pro-setting/index.js
@@ -0,0 +1,8 @@
+/**  ele admin 主题设置抽屉 license by http://eleadmin.com */
+import EleProSetting from './src/main';
+
+EleProSetting.install = function (Vue) {
+  Vue.component(EleProSetting.name, EleProSetting);
+};
+
+export default EleProSetting;
--- a/src/components/ele-admin-pro/packages/ele-pro-setting/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-pro-setting/src/main.vue
@@ -0,0 +1,523 @@
+<!-- 主题设置抽屉 license by http://eleadmin.com -->
+<template>
+  <locale-receiver component-name="ele">
+    <template #default="locale">
+      <a-drawer
+        :width="280"
+        :visible="visible"
+        :body-style="{padding: 0}"
+        @update:visible="updateVisible">
+        <div :class="['ele-setting-wrapper', {'ele-setting-dark': darkMode}]">
+          <!-- 侧栏风格 -->
+          <div class="ele-setting-title">{{ locale.setting.title }}</div>
+          <div class="ele-setting-theme ele-text-primary">
+            <a-tooltip :title="locale.setting.sideStyles.dark">
+              <div class="ele-bg-base ele-side-dark" @click="setSideStyle('dark')">
+                <check-outlined v-if="sideStyle === 'dark'"/>
+              </div>
+            </a-tooltip>
+            <a-tooltip :title="locale.setting.sideStyles.light">
+              <div class="ele-bg-base" @click="setSideStyle('light')">
+                <check-outlined v-if="sideStyle === 'light'"/>
+              </div>
+            </a-tooltip>
+          </div>
+          <!-- 顶栏风格 -->
+          <div class="ele-setting-theme ele-text-primary">
+            <a-tooltip :title="locale.setting.headStyles.light">
+              <div class="ele-bg-base ele-head-light" @click="setHeadStyle('light')">
+                <check-outlined v-if="headStyle === 'light'"/>
+              </div>
+            </a-tooltip>
+            <a-tooltip :title="locale.setting.headStyles.dark">
+              <div class="ele-bg-base ele-head-dark" @click="setHeadStyle('dark')">
+                <check-outlined v-if="headStyle === 'dark'"/>
+              </div>
+            </a-tooltip>
+            <a-tooltip :title="locale.setting.headStyles.primary">
+              <div class="ele-bg-base ele-head-primary" @click="setHeadStyle('primary')">
+                <div class="ele-bg-primary"></div>
+                <check-outlined v-if="headStyle === 'primary'"/>
+              </div>
+            </a-tooltip>
+          </div>
+          <!-- 主题色 -->
+          <div v-if="(typeof themes !== 'undefined') && (themes !== null)" class="ele-setting-colors">
+            <template v-if="themes.length">
+              <div
+                v-for="(t, i) in themes"
+                :key="i"
+                class="ele-setting-color-item"
+                :style="{'background-color': t.color || t.value}"
+                @click="changeColor(t.value)">
+                <check-outlined v-if="t.value ? (t.value === color) : !color"/>
+                <a-tooltip :title="t.name">
+                  <div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;"></div>
+                </a-tooltip>
+              </div>
+            </template>
+            <template v-else>
+              <div
+                v-for="(t, i) in defaultThemes"
+                :key="i"
+                class="ele-setting-color-item"
+                :style="{'background-color': t.color || t.value}"
+                @click="changeColor(t.value)">
+                <check-outlined v-if="t.value ? (t.value === color) : !color"/>
+                <a-tooltip :title="locale.setting.colors[t.name]">
+                  <div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;"></div>
+                </a-tooltip>
+              </div>
+            </template>
+            <ele-color-picker
+              v-if="colorPicker"
+              v-model:value="chooseColor"
+              :predefine="predefineColors"
+              custom-class="ele-setting-color-picker"
+              @change="changeColor"/>
+          </div>
+          <div class="ele-setting-item">
+            <div class="setting-item-title">{{ locale.setting.darkMode }}</div>
+            <div class="setting-item-control">
+              <a-switch size="small" :checked="darkMode" @change="setDarkMode"/>
+            </div>
+          </div>
+          <a-divider/>
+          <!-- 导航模式 -->
+          <div class="ele-setting-title ele-text-secondary">{{ locale.setting.layoutStyle }}</div>
+          <div class="ele-setting-theme ele-text-primary">
+            <a-tooltip :title="locale.setting.layoutStyles.side">
+              <div class="ele-bg-base ele-side-dark" @click="setLayoutStyle('side')">
+                <CheckOutlined v-if="layoutStyle === 'side'"/>
+              </div>
+            </a-tooltip>
+            <a-tooltip :title="locale.setting.layoutStyles.top">
+              <div class="ele-bg-base ele-head-dark" @click="setLayoutStyle('top')">
+                <CheckOutlined v-if="layoutStyle === 'top'"/>
+              </div>
+            </a-tooltip>
+            <a-tooltip :title="locale.setting.layoutStyles.mix">
+              <div class="ele-bg-base ele-layout-mix" @click="setLayoutStyle('mix')">
+                <CheckOutlined v-if="layoutStyle === 'mix'"/>
+              </div>
+            </a-tooltip>
+          </div>
+          <div class="ele-setting-item">
+            <div class="setting-item-title">{{ locale.setting.sideMenuStyle }}</div>
+            <div class="setting-item-control">
+              <a-switch size="small" :checked="sideMenuStyle === 'mix'" @change="setSideMenuStyle"/>
+            </div>
+          </div>
+          <div class="ele-setting-item">
+            <div class="setting-item-title">{{ locale.setting.bodyFull }}</div>
+            <div class="setting-item-control">
+              <a-switch size="small" :checked="bodyFull" @change="setBodyFull"/>
+            </div>
+          </div>
+          <!-- 其它配置 -->
+          <a-divider/>
+          <div class="ele-setting-title ele-text-secondary">{{ locale.setting.other }}</div>
+          <div class="ele-setting-item">
+            <div class="setting-item-title">{{ locale.setting.fixedHeader }}</div>
+            <div class="setting-item-control">
+              <a-switch size="small" :checked="fixedHeader" @change="setFixedHeader"/>
+            </div>
+          </div>
+          <div class="ele-setting-item">
+            <div class="setting-item-title">{{ locale.setting.fixedSidebar }}</div>
+            <div class="setting-item-control">
+              <a-switch size="small" :checked="fixedSidebar" @change="setFixedSidebar"/>
+            </div>
+          </div>
+          <div class="ele-setting-item">
+            <div class="setting-item-title">{{ locale.setting.fixedBody }}</div>
+            <div class="setting-item-control">
+              <a-switch size="small" :checked="fixedBody" @change="setFixedBody"/>
+            </div>
+          </div>
+          <div class="ele-setting-item">
+            <div class="setting-item-title">{{ locale.setting.logoAutoSize }}</div>
+            <div class="setting-item-control">
+              <a-switch size="small" :checked="logoAutoSize" @change="setLogoAutoSize"/>
+            </div>
+          </div>
+          <div class="ele-setting-item">
+            <div class="setting-item-title">{{ locale.setting.colorfulIcon }}</div>
+            <div class="setting-item-control">
+              <a-switch size="small" :checked="colorfulIcon" @change="setColorfulIcon"/>
+            </div>
+          </div>
+          <div class="ele-setting-item">
+            <div class="setting-item-title">{{ locale.setting.sideUniqueOpen }}</div>
+            <div class="setting-item-control">
+              <a-switch size="small" :checked="sideUniqueOpen" @change="setSideUniqueOpen"/>
+            </div>
+          </div>
+          <div class="ele-setting-item">
+            <div class="setting-item-title">{{ locale.setting.showFooter }}</div>
+            <div class="setting-item-control">
+              <a-switch size="small" :checked="showFooter" @change="setShowFooter"/>
+            </div>
+          </div>
+          <div class="ele-setting-item">
+            <div class="setting-item-title">{{ locale.setting.weakMode }}</div>
+            <div class="setting-item-control">
+              <a-switch size="small" :checked="weakMode" @change="setWeakMode"/>
+            </div>
+          </div>
+          <div class="ele-setting-item">
+            <div class="setting-item-title">{{ locale.setting.showTabs }}</div>
+            <div class="setting-item-control">
+              <a-switch size="small" :checked="showTabs" @change="setShowTabs"/>
+            </div>
+          </div>
+          <div class="ele-setting-item">
+            <div class="setting-item-title">{{ locale.setting.tabStyle }}</div>
+            <div class="setting-item-control">
+              <a-select size="small" :value="tabStyle" style="width: 95px;" @change="setTabStyle">
+                <a-select-option value="default">{{ locale.setting.tabStyles.default }}</a-select-option>
+                <a-select-option value="dot">{{ locale.setting.tabStyles.dot }}</a-select-option>
+                <a-select-option value="card">{{ locale.setting.tabStyles.card }}</a-select-option>
+              </a-select>
+            </div>
+          </div>
+          <template v-if="(typeof tips !== 'undefined') && (tips !== null)">
+            <a-divider/>
+            <a-alert show-icon type="warning" :message="tips || locale.setting.tips">
+              <template #icon>
+                <sound-outlined/>
+              </template>
+            </a-alert>
+          </template>
+        </div>
+      </a-drawer>
+    </template>
+  </locale-receiver>
+</template>
+
+<script>
+import LocaleReceiver from 'ant-design-vue/es/locale-provider/LocaleReceiver';
+import {CheckOutlined, SoundOutlined} from '@ant-design/icons-vue';
+import EleColorPicker from '../../ele-color-picker';
+// 默认主题色
+const DEFAULT_THEMES = [
+  {
+    name: 'default',
+    value: null,
+    color: '#1890ff'
+  },
+  {
+    name: 'dust',
+    value: '#5f80c7'
+  },
+  {
+    name: 'sunset',
+    value: '#faad14'
+  },
+  {
+    name: 'volcano',
+    value: '#f5686f'
+  },
+  {
+    name: 'purple',
+    value: '#9266f9'
+  },
+  {
+    name: 'green',
+    value: '#33cc99'
+  },
+  {
+    name: 'geekblue',
+    value: '#32a2d4'
+  }
+];
+
+export default {
+  name: 'EleProSetting',
+  components: {
+    LocaleReceiver,
+    CheckOutlined,
+    SoundOutlined,
+    EleColorPicker
+  },
+  emits: [
+    'change-style',
+    'change-color',
+    'change-dark-mode',
+    'change-weak-mode',
+    'update:visible'
+  ],
+  props: {
+    // 是否显示, 支持 v-model 绑定
+    visible: Boolean,
+    // 顶栏风格
+    headStyle: String,
+    // 侧边栏风格
+    sideStyle: String,
+    // 布局风格
+    layoutStyle: String,
+    // 侧栏边菜单风格
+    sideMenuStyle: String,
+    // 内容区域宽度是否铺满
+    bodyFull: Boolean,
+    // 是否固定顶栏
+    fixedHeader: Boolean,
+    // 是否固定侧栏
+    fixedSidebar: Boolean,
+    // 是否固定主体
+    fixedBody: Boolean,
+    // logo是否自适应宽度
+    logoAutoSize: Boolean,
+    // 侧栏是否多彩图标
+    colorfulIcon: Boolean,
+    // 侧边栏是否只保持一个子菜单展开
+    sideUniqueOpen: Boolean,
+    // 是否开启页脚
+    showFooter: Boolean,
+    // 是否色弱模式
+    weakMode: Boolean,
+    // 是否开启多标签
+    showTabs: Boolean,
+    // 标签页风格
+    tabStyle: String,
+    // 是否暗黑模式
+    darkMode: Boolean,
+    // 当前主题色
+    color: String,
+    // 主题列表
+    themes: Array,
+    // 提示文字
+    tips: String,
+    // 是否显示颜色选择器
+    colorPicker: Boolean,
+    // 颜色选择器预设颜色
+    predefineColors: Array
+  },
+  data() {
+    let chooseColor = this.color;
+    if (this.color && typeof this.themes !== 'undefined' && this.themes !== null) {
+      (this.themes.length ? this.themes : DEFAULT_THEMES).forEach((t) => {
+        if (this.color === t.value) {
+          chooseColor = null;
+        }
+      });
+    }
+    return {
+      // 默认的主题色
+      defaultThemes: DEFAULT_THEMES,
+      // 颜色选择器选中颜色
+      chooseColor: chooseColor
+    };
+  },
+  methods: {
+    /* 修改visible */
+    updateVisible(value) {
+      this.$emit('update:visible', value);
+    },
+    /* 切换主题色 */
+    changeColor(value) {
+      if (value !== this.color) {
+        this.$emit('change-color', value);
+      }
+    },
+    /* 修改主题风格 */
+    changeStyle(key, value) {
+      this.$emit('change-style', {key: key, value: value});
+    },
+    setHeadStyle(value) {
+      this.changeStyle('headStyle', value);
+    },
+    setSideStyle(value) {
+      this.changeStyle('sideStyle', value);
+    },
+    setLayoutStyle(value) {
+      this.changeStyle('layoutStyle', value);
+    },
+    setSideMenuStyle(value) {
+      this.changeStyle('sideMenuStyle', value ? 'mix' : 'default');
+    },
+    setBodyFull(value) {
+      this.changeStyle('bodyFull', value);
+    },
+    setFixedHeader(value) {
+      this.changeStyle('fixedHeader', value);
+    },
+    setFixedSidebar(value) {
+      this.changeStyle('fixedSidebar', value);
+    },
+    setFixedBody(value) {
+      this.changeStyle('fixedBody', value);
+      if (value) {
+        document.body.style.width = null;
+      }
+    },
+    setLogoAutoSize(value) {
+      this.changeStyle('logoAutoSize', value);
+    },
+    setColorfulIcon(value) {
+      this.changeStyle('colorfulIcon', value);
+    },
+    setSideUniqueOpen(value) {
+      this.changeStyle('sideUniqueOpen', value);
+    },
+    setWeakMode(value) {
+      this.$emit('change-weak-mode', value);
+    },
+    setDarkMode(value) {
+      this.$emit('change-dark-mode', value);
+    },
+    setShowFooter(value) {
+      this.changeStyle('showFooter', value);
+      if (!value) {
+        document.body.style.width = null;
+      }
+    },
+    setShowTabs(value) {
+      this.changeStyle('showTabs', value);
+    },
+    setTabStyle(value) {
+      this.changeStyle('tabStyle', value);
+    }
+  }
+}
+</script>
+
+<style>
+.ele-setting-wrapper {
+  padding: 20px 18px;
+}
+
+.ele-setting-wrapper .ele-setting-title {
+  font-size: 13px;
+  margin-bottom: 15px;
+}
+
+/* 主题风格 */
+.ele-setting-wrapper .ele-setting-theme > div {
+  width: 52px;
+  height: 36px;
+  line-height: 1;
+  border-radius: 3px;
+  margin: 0 20px 30px 0;
+  padding: 16px 0 0 26px;
+  box-sizing: border-box;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  transition: background-color .2s;
+}
+
+.ele-setting-wrapper .ele-setting-theme > div:before,
+.ele-setting-wrapper .ele-setting-theme > div:after,
+.ele-setting-wrapper .ele-setting-theme > div > .ele-bg-primary {
+  content: "";
+  width: 100%;
+  height: 10px;
+  background: #fff;
+  position: absolute;
+  left: 0;
+  top: 0;
+  transition: background-color .2s;
+}
+
+.ele-setting-dark .ele-setting-theme > div {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
+}
+
+.ele-setting-dark .ele-setting-theme > div:before,
+.ele-setting-dark .ele-setting-theme > div:after,
+.ele-setting-dark .ele-setting-theme > div > .ele-bg-primary {
+  background: #1f1f1f;
+}
+
+.ele-setting-wrapper .ele-setting-theme > div:after {
+  width: 14px;
+  height: 100%;
+}
+
+.ele-setting-wrapper .ele-setting-theme > div.ele-side-dark:after,
+.ele-setting-wrapper .ele-setting-theme > div.ele-head-dark:before,
+.ele-setting-wrapper .ele-setting-theme > div.ele-layout-mix:before,
+.ele-setting-wrapper .ele-setting-theme > div.ele-layout-mix:after {
+  background: #001529;
+}
+
+.ele-setting-dark .ele-setting-theme > div.ele-side-dark:after,
+.ele-setting-dark .ele-setting-theme > div.ele-head-dark:before,
+.ele-setting-dark .ele-setting-theme > div.ele-layout-mix:before,
+.ele-setting-dark .ele-setting-theme > div.ele-layout-mix:after {
+  background: #262626;
+}
+
+.ele-setting-wrapper .ele-setting-theme > div.ele-head-light:before,
+.ele-setting-wrapper .ele-setting-theme > div.ele-head-dark:before,
+.ele-setting-wrapper .ele-setting-theme > div > .ele-bg-primary {
+  z-index: 1;
+}
+
+/* 主题色选择 */
+.ele-setting-wrapper .ele-setting-colors {
+  color: #fff;
+  margin-bottom: 20px;
+}
+
+.ele-setting-wrapper .ele-setting-color-item {
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  border-radius: 2px;
+  margin: 8px 8px 0 0;
+  display: inline-block;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
+  vertical-align: top;
+  position: relative;
+  text-align: center;
+  cursor: pointer;
+}
+
+/* 主题配置项 */
+.ele-setting-wrapper .ele-setting-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.ele-setting-wrapper .ele-setting-item .setting-item-title {
+  flex: 1;
+  line-height: 28px;
+}
+
+.ele-setting-wrapper .ele-setting-item .setting-item-control {
+  line-height: 1;
+}
+
+.ele-setting-wrapper .ant-divider {
+  margin-bottom: 20px;
+}
+
+/* 颜色选择器 */
+.ele-setting-color-picker {
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  margin-top: 8px;
+  border: none !important;
+  background: none !important;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
+}
+
+.ele-setting-color-picker > .ele-color-picker-trigger-inner {
+  background: none;
+}
+
+.ele-setting-color-picker > .ele-color-picker-trigger-inner.is-empty {
+  background: linear-gradient(45deg, #00dbde 5%, #fc00ff 105%);
+}
+
+.ele-setting-color-picker > .ele-color-picker-trigger-inner.is-empty + .ele-color-picker-trigger-arrow {
+  display: none;
+}
+</style>
--- a/src/components/ele-admin-pro/packages/ele-pro-sidebar-item/index.js
+++ b/src/components/ele-admin-pro/packages/ele-pro-sidebar-item/index.js
@@ -0,0 +1,8 @@
+/** 侧边栏菜单 item license by http://eleadmin.com */
+import EleProSidebarItem from './src/main';
+
+EleProSidebarItem.install = function (Vue) {
+  Vue.component(EleProSidebarItem.name, EleProSidebarItem);
+};
+
+export default EleProSidebarItem;
--- a/src/components/ele-admin-pro/packages/ele-pro-sidebar-item/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-pro-sidebar-item/src/main.vue
@@ -0,0 +1,51 @@
+<!-- 侧边栏菜单item license by http://eleadmin.com -->
+<template>
+  <a-sub-menu v-if="haveChildren" :key="item.path" :popup-class-name="firstPopClass">
+    <template v-if="item.meta.icon" #icon>
+      <component :is="item.meta.icon"/>
+    </template>
+    <template #title>
+      <span>{{ item.meta.title }}</span>
+    </template>
+    <template v-for="child in item.children">
+      <ele-pro-sidebar-item v-if="!child.meta.hide" :key="child.path" :item="child"/>
+    </template>
+  </a-sub-menu>
+  <a-menu-item v-else :key="item.path">
+    <template v-if="item.meta.icon" #icon>
+      <component :is="item.meta.icon"/>
+    </template>
+    <span>{{ item.meta.title }}</span>
+    <a v-if="isUrl" :href="item.path" target="_blank"></a>
+    <router-link v-else :to="item.path"></router-link>
+  </a-menu-item>
+</template>
+
+<script>
+import * as antIcons from '@ant-design/icons-vue';
+import {isUrl} from '../../util.js';
+
+export default {
+  name: 'EleProSidebarItem',
+  components: {...antIcons},
+  props: {
+    // item数据
+    item: {
+      type: Object,
+      required: true
+    },
+    // 一级pop菜单class
+    firstPopClass: String
+  },
+  computed: {
+    /* 是否有子级 */
+    haveChildren() {
+      return !!(this.item.children && this.item.children.filter((d) => !d.meta.hide).length);
+    },
+    /* 是否是网址 */
+    isUrl() {
+      return isUrl(this.item.path);
+    }
+  }
+}
+</script>
--- a/src/components/ele-admin-pro/packages/ele-pro-sidebar-menus/index.js
+++ b/src/components/ele-admin-pro/packages/ele-pro-sidebar-menus/index.js
@@ -0,0 +1,8 @@
+/** 侧边栏菜单非递归 license by http://eleadmin.com */
+import EleProSidebarMenus from './src/main';
+
+EleProSidebarMenus.install = function (Vue) {
+  Vue.component(EleProSidebarMenus.name, EleProSidebarMenus);
+};
+
+export default EleProSidebarMenus;
--- a/src/components/ele-admin-pro/packages/ele-pro-sidebar-menus/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-pro-sidebar-menus/src/main.vue
@@ -0,0 +1,205 @@
+<!-- 非递归渲染侧边栏菜单 license by http://eleadmin.com -->
+<template>
+  <a-menu
+    :mode="mode"
+    :theme="theme"
+    :open-keys="openKeys"
+    :selected-keys="selectedKeys"
+    :inline-indent="inlineIndent"
+    :inline-collapsed="inlineCollapsed"
+    @openChange="onOpenChange">
+    <template v-for="m1 in data">
+      <template v-if="!m1.meta.hide">
+        <a-sub-menu v-if="haveChildren(m1)" :key="m1.path" :popup-class-name="firstPopClass">
+          <template v-if="m1.meta.icon" #icon>
+            <component :is="m1.meta.icon"/>
+          </template>
+          <template #title>
+            <span>{{ m1.meta.title }}</span>
+          </template>
+          <template v-for="m2 in m1.children">
+            <template v-if="!m2.meta.hide">
+              <a-sub-menu v-if="haveChildren(m2)" :key="m2.path">
+                <template v-if="m2.meta.icon" #icon>
+                  <component :is="m2.meta.icon"/>
+                </template>
+                <template #title>
+                  <span>{{ m2.meta.title }}</span>
+                </template>
+                <template v-for="m3 in m2.children">
+                  <template v-if="!m3.meta.hide">
+                    <a-sub-menu v-if="haveChildren(m3)" :key="m3.path">
+                      <template v-if="m3.meta.icon" #icon>
+                        <component :is="m3.meta.icon"/>
+                      </template>
+                      <template #title>
+                        <span>{{ m3.meta.title }}</span>
+                      </template>
+                      <template v-for="m4 in m3.children">
+                        <template v-if="!m4.meta.hide">
+                          <a-sub-menu v-if="haveChildren(m4)" :key="m4.path">
+                            <template v-if="m4.meta.icon" #icon>
+                              <component :is="m4.meta.icon"/>
+                            </template>
+                            <template #title>
+                              <span>{{ m4.meta.title }}</span>
+                            </template>
+                            <template v-for="m5 in m4.children">
+                              <template v-if="!m5.meta.hide">
+                                <a-sub-menu v-if="haveChildren(m5)" :key="m5.path">
+                                  <template v-if="m5.meta.icon" #icon>
+                                    <component :is="m5.meta.icon"/>
+                                  </template>
+                                  <template #title>
+                                    <span>{{ m5.meta.title }}</span>
+                                  </template>
+                                  <template v-for="m6 in m5.children">
+                                    <template v-if="!m6.meta.hide">
+                                      <a-sub-menu v-if="haveChildren(m6)" :key="m6.path">
+                                        <template v-if="m6.meta.icon" #icon>
+                                          <component :is="m6.meta.icon"/>
+                                        </template>
+                                        <template #title>
+                                          <span>{{ m6.meta.title }}</span>
+                                        </template>
+                                        <template v-for="m7 in m6.children">
+                                          <template v-if="!m7.meta.hide">
+                                            <a-sub-menu v-if="haveChildren(m7)" :key="m7.path">
+                                              <template v-if="m7.meta.icon" #icon>
+                                                <component :is="m7.meta.icon"/>
+                                              </template>
+                                              <template #title>
+                                                <span>{{ m7.meta.title }}</span>
+                                              </template>
+                                              <template v-for="m8 in m7.children">
+                                                <a-menu-item v-if="!m8.meta.hide" :key="m8.path">
+                                                  <template v-if="m8.meta.icon" #icon>
+                                                    <component :is="m8.meta.icon"/>
+                                                  </template>
+                                                  <span>{{ m8.meta.title }}</span>
+                                                  <a v-if="isUrl(m8)" :href="m8.path" target="_blank"></a>
+                                                  <router-link v-else :to="m8.path"></router-link>
+                                                </a-menu-item>
+                                              </template>
+                                            </a-sub-menu>
+                                            <a-menu-item v-else :key="m7.path">
+                                              <template v-if="m7.meta.icon" #icon>
+                                                <component :is="m7.meta.icon"/>
+                                              </template>
+                                              <span>{{ m7.meta.title }}</span>
+                                              <a v-if="isUrl(m7)" :href="m7.path" target="_blank"></a>
+                                              <router-link v-else :to="m7.path"></router-link>
+                                            </a-menu-item>
+                                          </template>
+                                        </template>
+                                      </a-sub-menu>
+                                      <a-menu-item v-else :key="m6.path">
+                                        <template v-if="m6.meta.icon" #icon>
+                                          <component :is="m6.meta.icon"/>
+                                        </template>
+                                        <span>{{ m6.meta.title }}</span>
+                                        <a v-if="isUrl(m6)" :href="m6.path" target="_blank"></a>
+                                        <router-link v-else :to="m6.path"></router-link>
+                                      </a-menu-item>
+                                    </template>
+                                  </template>
+                                </a-sub-menu>
+                                <a-menu-item v-else :key="m5.path">
+                                  <template v-if="m5.meta.icon" #icon>
+                                    <component :is="m5.meta.icon"/>
+                                  </template>
+                                  <span>{{ m5.meta.title }}</span>
+                                  <a v-if="isUrl(m5)" :href="m5.path" target="_blank"></a>
+                                  <router-link v-else :to="m5.path"></router-link>
+                                </a-menu-item>
+                              </template>
+                            </template>
+                          </a-sub-menu>
+                          <a-menu-item v-else :key="m4.path">
+                            <template v-if="m4.meta.icon" #icon>
+                              <component :is="m4.meta.icon"/>
+                            </template>
+                            <span>{{ m4.meta.title }}</span>
+                            <a v-if="isUrl(m4)" :href="m4.path" target="_blank"></a>
+                            <router-link v-else :to="m4.path"></router-link>
+                          </a-menu-item>
+                        </template>
+                      </template>
+                    </a-sub-menu>
+                    <a-menu-item v-else :key="m3.path">
+                      <template v-if="m3.meta.icon" #icon>
+                        <component :is="m3.meta.icon"/>
+                      </template>
+                      <span>{{ m3.meta.title }}</span>
+                      <a v-if="isUrl(m3)" :href="m3.path" target="_blank"></a>
+                      <router-link v-else :to="m3.path"></router-link>
+                    </a-menu-item>
+                  </template>
+                </template>
+              </a-sub-menu>
+              <a-menu-item v-else :key="m2.path">
+                <template v-if="m2.meta.icon" #icon>
+                  <component :is="m2.meta.icon"/>
+                </template>
+                <span>{{ m2.meta.title }}</span>
+                <a v-if="isUrl(m2)" :href="m2.path" target="_blank"></a>
+                <router-link v-else :to="m2.path"></router-link>
+              </a-menu-item>
+            </template>
+          </template>
+        </a-sub-menu>
+        <a-menu-item v-else :key="m1.path">
+          <template v-if="m1.meta.icon" #icon>
+            <component :is="m1.meta.icon"/>
+          </template>
+          <span>{{ m1.meta.title }}</span>
+          <a v-if="isUrl(m1)" :href="m1.path" target="_blank"></a>
+          <router-link v-else :to="m1.path"></router-link>
+        </a-menu-item>
+      </template>
+    </template>
+  </a-menu>
+</template>
+
+<script>
+import * as antIcons from '@ant-design/icons-vue';
+import {isUrl} from '../../util.js';
+
+export default {
+  name: 'EleProSidebarMenus',
+  components: {...antIcons},
+  emits: ['openChange'],
+  props: {
+    // 菜单数据
+    data: Array,
+    // 导航模式
+    mode: String,
+    // 主题, light | dark
+    theme: String,
+    // 展开的key
+    openKeys: Array,
+    // 选中的key
+    selectedKeys: Array,
+    // 子级缩进
+    inlineIndent: Number,
+    // 是否折叠
+    inlineCollapsed: Boolean,
+    // 一级pop菜单class
+    firstPopClass: String
+  },
+  methods: {
+    /* 子级展开事件 */
+    onOpenChange(e) {
+      this.$emit('openChange', e);
+    },
+    /* 是否有子级 */
+    haveChildren(item) {
+      return !!(item.children && item.children.filter((d) => !d.meta.hide).length);
+    },
+    /* 是否是网址 */
+    isUrl(item) {
+      return isUrl(item.path);
+    }
+  }
+}
+</script>
--- a/src/components/ele-admin-pro/packages/ele-pro-sidebar-nav/index.js
+++ b/src/components/ele-admin-pro/packages/ele-pro-sidebar-nav/index.js
@@ -0,0 +1,8 @@
+/** 侧边栏双排菜单一级 license by http://eleadmin.com */
+import EleProSidebarNav from './src/main';
+
+EleProSidebarNav.install = function (Vue) {
+  Vue.component(EleProSidebarNav.name, EleProSidebarNav);
+};
+
+export default EleProSidebarNav;
--- a/src/components/ele-admin-pro/packages/ele-pro-sidebar-nav/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-pro-sidebar-nav/src/main.vue
@@ -0,0 +1,86 @@
+<!-- 侧边栏双排菜单一级 license by http://eleadmin.com -->
+<template>
+  <div class="ele-admin-sidebar-nav ele-scrollbar-hide">
+    <slot name="top"/>
+    <div class="ele-admin-sidebar-nav-menu ele-scrollbar-hide">
+      <a-menu
+        v-if="useDeep"
+        mode="inline"
+        :theme="theme"
+        :selected-keys="active"
+        :inline-indent="inlineIndent"
+        :inline-collapsed="isCollapse">
+        <template v-for="m in data">
+          <ele-pro-sidebar-item v-if="!m.meta.hide" :key="m.path" :item="m" :first-pop-class="firstPopClass"/>
+        </template>
+      </a-menu>
+      <ele-pro-sidebar-menus
+        v-else
+        :data="data"
+        mode="inline"
+        :theme="theme"
+        :selected-keys="active"
+        :inline-indent="inlineIndent"
+        :inline-collapsed="isCollapse"
+        :first-pop-class="firstPopClass"/>
+    </div>
+    <div v-if="showNavCollapse" class="ele-admin-sidebar-nav-tool-item" @click="toggleCollapse">
+      <menu-unfold-outlined v-if="collapse"/>
+      <menu-fold-outlined v-else/>
+    </div>
+    <slot name="bottom"/>
+  </div>
+</template>
+
+<script>
+import {MenuFoldOutlined, MenuUnfoldOutlined} from '@ant-design/icons-vue';
+import EleProSidebarItem from '../../ele-pro-sidebar-item';
+import EleProSidebarMenus from '../../ele-pro-sidebar-menus';
+
+export default {
+  name: 'EleProSidebarNav',
+  components: {
+    MenuFoldOutlined,
+    MenuUnfoldOutlined,
+    EleProSidebarItem,
+    EleProSidebarMenus
+  },
+  emits: ['toggle-collapse'],
+  props: {
+    // 导航数据
+    data: Array,
+    // 导航选中
+    active: Array,
+    // 主题, light | dark
+    theme: String,
+    // 导航是否折叠
+    collapse: Boolean,
+    // 菜单是否折叠
+    menuCollapse: Boolean,
+    // 子级缩进
+    inlineIndent: Number,
+    // 是否显示折叠按钮
+    showNavCollapse: Boolean,
+    // 是否使用递归渲染菜单item
+    useDeep: Boolean
+  },
+  data() {
+    return {
+      // 一级pop菜单class
+      firstPopClass: 'ele-admin-sidebar-nav-menu-pop'
+    };
+  },
+  computed: {
+    // 是否折叠
+    isCollapse() {
+      return this.collapse || this.menuCollapse;
+    }
+  },
+  methods: {
+    /* 折叠展开侧栏 */
+    toggleCollapse() {
+      this.$emit('toggle-collapse');
+    }
+  }
+}
+</script>
--- a/src/components/ele-admin-pro/packages/ele-pro-sidebar/index.js
+++ b/src/components/ele-admin-pro/packages/ele-pro-sidebar/index.js
@@ -0,0 +1,8 @@
+/** 侧边栏 license by http://eleadmin.com */
+import EleProSidebar from './src/main';
+
+EleProSidebar.install = function (Vue) {
+  Vue.component(EleProSidebar.name, EleProSidebar);
+};
+
+export default EleProSidebar;
--- a/src/components/ele-admin-pro/packages/ele-pro-sidebar/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-pro-sidebar/src/main.vue
@@ -0,0 +1,119 @@
+<!-- 侧边栏 license by http://eleadmin.com -->
+<template>
+  <div class="ele-admin-sidebar ele-scrollbar-hide">
+    <slot name="top"/>
+    <div class="ele-admin-sidebar-menus">
+      <a-menu
+        v-if="useDeep"
+        mode="inline"
+        :theme="theme"
+        :open-keys="openKeys"
+        :selected-keys="active"
+        :inline-collapsed="collapse"
+        :inline-indent="inlineIndent"
+        @openChange="onOpenChange">
+        <template v-for="m in data">
+          <ele-pro-sidebar-item v-if="!m.meta.hide" :key="m.path" :item="m"/>
+        </template>
+      </a-menu>
+      <ele-pro-sidebar-menus
+        v-else
+        :data="data"
+        mode="inline"
+        :theme="theme"
+        :open-keys="openKeys"
+        :selected-keys="active"
+        :inline-collapsed="collapse"
+        :inline-indent="inlineIndent"
+        @openChange="onOpenChange"/>
+    </div>
+    <slot name="bottom"/>
+  </div>
+</template>
+
+<script>
+import EleProSidebarItem from '../../ele-pro-sidebar-item';
+import EleProSidebarMenus from '../../ele-pro-sidebar-menus';
+
+export default {
+  name: 'EleProSidebar',
+  components: {EleProSidebarItem, EleProSidebarMenus},
+  props: {
+    // 菜单数据
+    data: Array,
+    // 菜单选中
+    active: Array,
+    // 主题, light | dark
+    theme: String,
+    // 展开的key
+    menuOpens: Array,
+    // 是否折叠
+    collapse: Boolean,
+    // 是否只保持一个子菜单展开
+    uniqueOpen: Boolean,
+    // 菜单缩进
+    inlineIndent: {
+      type: Number,
+      default: 16
+    },
+    // 是否使用递归渲染菜单
+    useDeep: Boolean
+  },
+  data() {
+    return {
+      // 侧栏展开的key
+      openKeys: this.collapse ? [] : this.menuOpens,
+      // 侧栏展开的key备份
+      openKeysCopy: this.menuOpens
+    };
+  },
+  methods: {
+    /* 子级展开事件 */
+    onOpenChange(keys) {
+      if (this.collapse) {
+        this.openKeys = keys;
+      } else {
+        if (this.uniqueOpen && keys.length && (keys.length > this.openKeysCopy.length)) {
+          const cks = keys.filter((k) => !this.openKeysCopy.some((t) => (k === t)));
+          this.openKeysCopy = this.getTreeKeys(this.data, cks[0]) || [];
+        } else {
+          this.openKeysCopy = keys;
+        }
+        this.openKeys = this.openKeysCopy;
+      }
+    },
+    /* 获取key及所有父级key */
+    getTreeKeys(data, key, pks) {
+      if (!pks) {
+        pks = [];
+      }
+      for (let i = 0; i < data.length; i++) {
+        const d = data[i];
+        if (d.path === key) {
+          return pks.concat([key]);
+        } else if (d.children && d.children.length) {
+          const ks = this.getTreeKeys(d.children, key, pks.concat([d.path]));
+          if (ks) {
+            return ks;
+          }
+        }
+      }
+    }
+  },
+  watch: {
+    collapse() {
+      if (this.collapse) {
+        this.openKeys = [];
+      } else {
+        this.openKeys = this.openKeysCopy;
+      }
+    },
+    menuOpens() {
+      this.openKeysCopy = this.menuOpens;
+      if (!this.collapse) {
+        this.openKeys = this.openKeysCopy;
+      }
+    }
+  }
+}
+</script>
--- a/src/components/ele-admin-pro/packages/ele-pro-table-tools/index.js
+++ b/src/components/ele-admin-pro/packages/ele-pro-table-tools/index.js
@@ -0,0 +1,8 @@
+/** 表格工具按钮组件 license by http://eleadmin.com */
+import EleProTableTools from './src/main';
+
+EleProTableTools.install = function (app) {
+  app.component(EleProTableTools.name, EleProTableTools);
+};
+
+export default EleProTableTools;
--- a/src/components/ele-admin-pro/packages/ele-pro-table-tools/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-pro-table-tools/src/main.vue
@@ -0,0 +1,363 @@
+<!-- 表格工具按钮组件 license by http://eleadmin.com -->
+<template>
+  <locale-receiver component-name="ele">
+    <template #default="locale">
+      <a-space :size="space" class="ele-tool" :style="customStyle">
+        <slot/>
+        <template v-for="tool in tools">
+          <template v-if="tool==='reload'">
+            <div class="ele-tool-item" :key="tool">
+              <a-tooltip :title="locale.tableTools.refresh" :placement="tipsPlacement">
+                <reload-outlined @click="reload"/>
+              </a-tooltip>
+            </div>
+          </template>
+          <template v-if="tool==='size'">
+            <div class="ele-tool-item" :key="tool">
+              <a-tooltip :title="locale.tableTools.size" :placement="tipsPlacement">
+                <a-dropdown
+                  :trigger="['click']"
+                  :overlay-style="{minWidth: '80px'}"
+                  placement="bottomRight">
+                  <column-height-outlined/>
+                  <template #overlay>
+                    <a-menu
+                      :selected-keys="selectedKeys"
+                      @click="updateSize">
+                      <a-menu-item key="default">{{ locale.tableTools.sizeOption.medium }}</a-menu-item>
+                      <a-menu-item key="middle">{{ locale.tableTools.sizeOption.small }}</a-menu-item>
+                      <a-menu-item key="small">{{ locale.tableTools.sizeOption.mini }}</a-menu-item>
+                    </a-menu>
+                  </template>
+                </a-dropdown>
+              </a-tooltip>
+            </div>
+          </template>
+          <template v-if="tool==='columns'">
+            <div class="ele-tool-item" :key="tool">
+              <a-tooltip :title="locale.tableTools.columns" :placement="tipsPlacement">
+                <a-dropdown
+                  :trigger="['click']"
+                  placement="bottomRight">
+                  <setting-outlined/>
+                  <template #overlay>
+                    <div class="ant-dropdown-menu ele-tool-column">
+                      <div @click.stop="">
+                        <div class="ele-tool-column-header ele-tool-column-item">
+                          <div v-if="columnsSort" style="width: 20px;"></div>
+                          <div v-else style="width: 10px;"></div>
+                          <a-checkbox
+                            v-model:checked="columnIsAllChecked"
+                            :indeterminate="columnIsIndeterminate"
+                            @change="onColumnCheckAllChange">
+                            {{ locale.tableTools.columnsOption.columns }}
+                          </a-checkbox>
+                          <a @click="resetColumnChecked">
+                            {{ locale.tableTools.columnsOption.reset }}</a>
+                        </div>
+                        <a-divider/>
+                        <a-checkbox-group
+                          v-model:value="columnChecked"
+                          @change="onColumnCheckedChange">
+                          <draggable
+                            v-model="columnList"
+                            item-key="key"
+                            animation="300"
+                            handle=".ele-tool-column-handle"
+                            @change="onColumnSortChange">
+                            <template #item="{element}">
+                              <div class="ele-tool-column-item">
+                                <div class="ele-tool-column-handle" v-if="columnsSort">
+                                  <more-outlined/>
+                                  <more-outlined/>
+                                </div>
+                                <div v-else style="width: 10px;"></div>
+                                <a-checkbox :value="element.key">
+                                  {{
+                                  element.pname +  element.title || (element.key === 'index' ? locale.tableTools.columnsOption.index : locale.tableTools.columnsOption.untitled)
+                                  }}
+                                </a-checkbox>
+                              </div>
+                            </template>
+                          </draggable>
+                        </a-checkbox-group>
+                      </div>
+                    </div>
+                  </template>
+                </a-dropdown>
+              </a-tooltip>
+            </div>
+          </template>
+          <template v-if="tool==='fullscreen'">
+            <div
+              class="ele-tool-item"
+              :key="tool"
+              @click="toggleFullscreen">
+              <a-tooltip
+                :placement="tipsPlacement"
+                :title="locale.tableTools.fullscreen"
+                v-model:visible="fullScreenTipVisible">
+                <fullscreen-exit-outlined v-if="isFullscreen"/>
+                <fullscreen-outlined v-else/>
+              </a-tooltip>
+            </div>
+          </template>
+        </template>
+      </a-space>
+    </template>
+  </locale-receiver>
+</template>
+
+<script>
+import LocaleReceiver from 'ant-design-vue/es/locale-provider/LocaleReceiver';
+import {
+  ReloadOutlined,
+  ColumnHeightOutlined,
+  SettingOutlined,
+  FullscreenOutlined,
+  FullscreenExitOutlined,
+  MoreOutlined
+} from '@ant-design/icons-vue';
+import draggable from 'vuedraggable';
+import {eachTreeData} from '../../util.js';
+
+export default {
+  name: 'EleProTableTools',
+  components: {
+    LocaleReceiver,
+    ReloadOutlined,
+    ColumnHeightOutlined,
+    SettingOutlined,
+    FullscreenOutlined,
+    FullscreenExitOutlined,
+    MoreOutlined,
+    draggable
+  },
+  emits: [
+    'reload',
+    'update:size',
+    'update:columns',
+    'fullscreen'
+  ],
+  props: {
+    // 间距
+    space: {
+      type: String,
+      default: 'middle'
+    },
+    // 表格尺寸
+    size: {
+      type: String,
+      default: 'default'
+    },
+    // 表格列配置
+    columns: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    // 工具按钮布局
+    tools: {
+      type: Array,
+      default() {
+        return ['reload', 'size', 'columns', 'fullscreen'];
+      }
+    },
+    // 是否开启列拖拽排序
+    columnsSort: {
+      type: Boolean,
+      default: true
+    },
+    // 是否是全屏状态
+    isFullscreen: Boolean,
+    // 自定义样式
+    customStyle: Object
+  },
+  data() {
+    return {
+      // 列配置原始数据
+      orgColumns: this.columns,
+      // 列配置下拉列表数据
+      columnList: [],
+      // 列配置下拉列表选中数据
+      columnChecked: [],
+      // 列配置下拉列表是否全选
+      columnIsAllChecked: false,
+      // 列配置下拉列表是否半选
+      columnIsIndeterminate: false,
+      // 全屏切换tooltip是否显示
+      fullScreenTipVisible: false
+    };
+  },
+  computed: {
+    // 表格尺寸下拉选中
+    selectedKeys() {
+      return [this.size];
+    },
+    // tooltips的方向
+    tipsPlacement() {
+      return this.isFullscreen ? 'bottom' : 'top';
+    }
+  },
+  mounted() {
+    // 获取列配置下拉列表数据
+    this.initColumnList();
+  },
+  methods: {
+    /* 刷新表格 */
+    reload() {
+      this.$emit('reload');
+    },
+    /* 修改表格尺寸 */
+    updateSize({key}) {
+      this.$emit('update:size', key);
+    },
+    /* 获取列配置下拉列表数据 */
+    initColumnList(reset) {
+      let data = [];
+      eachTreeData(this.orgColumns, d => {
+        if (d.children && d.children.length) {
+          return;
+        }
+        if (d.dataIndex || d.key) {
+          data.push({
+            key: d.key || d.dataIndex,
+            title: d.title/* || (d.key === 'index' ? '序号' : '无标题')*/,
+            show: d.show !== false,
+            pname: d.pname || ''
+          });
+        }
+      });
+      this.columnList = data;
+      this.columnChecked = data.filter(d => d.show).map(d => d.key);
+      this.columnIsAllChecked = this.columnList.length && this.columnList.length === this.columnChecked.length;
+      this.columnIsIndeterminate = this.columnList.length !== this.columnChecked.length;
+      // 默认有隐藏列或者强制重置
+      if (reset || !this.columnIsAllChecked) {
+        let columns = this.getCheckedColumns(this.orgColumns, this.columnChecked);
+        this.$emit('update:columns', columns);
+      }
+    },
+    /* 列配置改变 */
+    onColumnCheckedChange() {
+      this.columnIsAllChecked = !!this.columnList.length && this.columnList.length === this.columnChecked.length;
+      this.columnIsIndeterminate = !!this.columnChecked.length && this.columnList.length !== this.columnChecked.length;
+      let columns = this.getCheckedColumns(this.orgColumns, this.columnChecked);
+      this.$emit('update:columns', columns);
+    },
+    /* 列配置全选/取消全选 */
+    onColumnCheckAllChange() {
+      if (this.columnIsAllChecked) {
+        this.columnChecked = this.columnList.map(d => d.key);
+      } else {
+        this.columnChecked = [];
+      }
+      this.columnIsIndeterminate = false;
+      let columns = this.getCheckedColumns(this.orgColumns, this.columnChecked);
+      this.$emit('update:columns', columns);
+    },
+    /* 重置列配置 */
+    resetColumnChecked() {
+      this.initColumnList(true);
+    },
+    /* 获取显示的列配置 */
+    getCheckedColumns(columns, checked) {
+      let data = [];
+      columns.forEach(d => {
+        if (this.columnList.some(c => c.key === d.key || c.key === d.dataIndex)) {
+          if (checked.indexOf(d.key) === -1 && checked.indexOf(d.dataIndex) === -1) {
+            return;
+          }
+        }
+        if (d.children) {
+          let children = this.getCheckedColumns(d.children, checked);
+          if (children.length) {
+            data.push(Object.assign({}, d, {children: children}));
+          }
+        } else {
+          data.push(Object.assign({}, d));
+        }
+      });
+      // 排序
+      if (this.columnsSort) {
+        data.sort((a, b) => {
+          let ai = this.columnList.findIndex(c => c.key === a.key || c.key === a.dataIndex),
+            bi = this.columnList.findIndex(c => c.key === b.key || c.key === b.dataIndex);
+          // 父级列处理
+          if (ai === -1 && a.children && a.children.length) {
+            ai = this.columnList.findIndex(c => c.key === a.children[0].key || c.key === a.children[0].dataIndex);
+          }
+          if (bi === -1 && b.children && b.children.length) {
+            bi = this.columnList.findIndex(c => c.key === b.children[0].key || c.key === b.children[0].dataIndex);
+          }
+          // 固定列处理
+          if (a.fixed === true || a.fixed === 'left') {
+            ai -= this.columnList.length;
+          } else if (a.fixed === 'right') {
+            ai += this.columnList.length;
+          }
+          if (b.fixed === true || b.fixed === 'left') {
+            bi -= this.columnList.length;
+          } else if (b.fixed === 'right') {
+            bi += this.columnList.length;
+          }
+          return ai - bi;
+        });
+      }
+      return data;
+    },
+    /* 列配置拖动改变顺序 */
+    onColumnSortChange() {
+      let columns = this.getCheckedColumns(this.orgColumns, this.columnChecked);
+      this.$emit('update:columns', columns);
+    },
+    /* 全屏切换 */
+    toggleFullscreen() {
+      this.fullScreenTipVisible = false;
+      this.$emit('fullscreen', !this.isFullscreen);
+    }
+  }
+}
+</script>
+
+<style>
+/* 列配置 */
+.ele-tool-column-item {
+  display: flex;
+  align-items: center;
+  padding: 4px 16px 4px 4px;
+}
+
+.ele-tool-column-header {
+  padding: 5px 16px 10px 4px;
+  min-width: 180px;
+}
+
+.ele-tool-column .ant-checkbox-group {
+  padding: 4px 0;
+  display: block;
+}
+
+.ele-tool-column-item .ant-checkbox-wrapper {
+  flex: 1;
+}
+
+.ele-tool-column-item .ele-tool-column-handle {
+  opacity: .8;
+  cursor: move;
+}
+
+.ele-tool-column-item .ele-tool-column-handle .anticon-more {
+  font-size: 12px;
+  margin-top: 2px;
+}
+
+.ele-tool-column-item .ele-tool-column-handle .anticon-more + .anticon-more {
+  margin: 2px 4px 0 -8px;
+}
+
+.ele-tool-column-item.sortable-chosen {
+  background: hsla(0, 0%, 60%, .1);
+}
+</style>
--- a/src/components/ele-admin-pro/packages/ele-pro-table/index.js
+++ b/src/components/ele-admin-pro/packages/ele-pro-table/index.js
@@ -0,0 +1,8 @@
+/** 高级表格组件 license by http://eleadmin.com */
+import EleProTable from './src/main';
+
+EleProTable.install = function (Vue) {
+  Vue.component(EleProTable.name, EleProTable);
+};
+
+export default EleProTable;
--- a/src/components/ele-admin-pro/packages/ele-pro-table/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-pro-table/src/main.vue
@@ -0,0 +1,755 @@
+<!-- 高级表格组件 license by http://eleadmin.com -->
+<template>
+  <div
+    :class="['ele-pro-table ele-bg-white', {'ele-pro-table-fullscreen': isFullscreen}]"
+    :style="{zIndex: fullZIndex}">
+    <ele-toolbar
+      v-if="toolbar"
+      ref="toolbar"
+      :theme="toolsTheme"
+      :title="title"
+      :sub-title="subTitle"
+      :size="tableSize"
+      :columns="cols"
+      :tools="toolkit"
+      :columns-sort="columnsSort"
+      :toolkit-style="toolkitStyle"
+      :style="toolStyle"
+      :class="toolClass"
+      :is-fullscreen="isFullscreen"
+      @reload="onRefresh"
+      @update:size="updateSize"
+      @update:columns="updateColumns"
+      @fullscreen="toggleFullscreen">
+      <slot name="toolbar"/>
+      <template #action>
+        <slot name="toolkit"/>
+      </template>
+    </ele-toolbar>
+    <!-- 表格 -->
+    <a-table
+      ref="table"
+      :table-layout="tableLayout"
+      :bordered="bordered"
+      :children-column-name="childrenColumnName"
+      :columns="cols"
+      :components="components"
+      :data-source="list"
+      :default-expand-all-rows="defaultExpandAllRows"
+      :default-expanded-row-keys="defaultExpandedRowKeys"
+      :expanded-row-keys="expandedRowKeys"
+      :expanded-row-render="expandedRowRender"
+      :expand-icon="expandIcon"
+      :expand-row-by-click="expandRowByClick"
+      :expand-icon-column-index="expandIconColumnIndex"
+      :footer="footer"
+      :indent-size="indentSize"
+      :loading="isLoading"
+      :locale="localeText"
+      :pagination="pagination"
+      :row-class-name="rowClassName"
+      :row-key="rowKey"
+      :row-selection="tableRowSelection"
+      :scroll="scroll"
+      :show-header="showHeader"
+      :size="tableSize"
+      :custom-header-row="customHeaderRow"
+      :custom-row="customRow"
+      :get-popup-container="getPopupContainer"
+      :transform-cell-text="transformCellText"
+      @expandedRowsChange="onExpandedRowsChange"
+      @change="onChange"
+      @expand="onExpand">
+      <template
+        v-for="name in Object.keys($slots)"
+        :key="name"
+        v-slot:[name]="{text, record, index, indent, expanded, props}">
+        <slot
+          :name="name"
+          :text="text"
+          :record="record"
+          :index="index"
+          :indent="indent"
+          :expanded="expanded"
+          :props="props"/>
+      </template>
+    </a-table>
+  </div>
+</template>
+
+<script>
+import {eachTreeData} from '../../util';
+import EleToolbar from '../../ele-toolbar';
+// 如果是服务端数据源默认请求参数名称
+const defaultRequest = {
+  // 页码的参数名称
+  pageName: 'page',
+  // 每页数据量的参数名
+  limitName: 'limit',
+  // 排序字段参数名称
+  sortName: 'sort',
+  // 排序方式的参数名称
+  orderName: 'order'
+};
+// 如果是服务端数据源默认请求参数名称
+const defaultResponse = {
+  // 数据状态的字段名称
+  statusName: 'code',
+  // 成功的状态码
+  statusCode: 0,
+  // 信息的字段名称
+  msgName: 'msg',
+  // 数据列表的字段名称
+  dataName: 'data',
+  // 数据总数的字段名称
+  countName: 'count'
+};
+
+export default {
+  name: 'EleProTable',
+  components: {EleToolbar},
+  emits: [
+    'done',
+    'update:selection',
+    'update:current',
+    'columns-change',
+    'size-change',
+    'fullscreen-change',
+    'refresh',
+    'expandedRowsChange',
+    'change',
+    'expand'
+  ],
+  props: {
+    // 数据源
+    datasource: [String, Array, Function],
+    // 如果是服务端数据源设定请求方式
+    method: {
+      type: String,
+      default: 'GET'
+    },
+    // 如果是服务端数据源设定请求的参数
+    where: Object,
+    // 如果是服务端数据源设定请求的header
+    headers: Object,
+    // 如果是服务端数据源设定请求数据类型
+    contentType: {
+      type: String,
+      default: 'application/json'
+    },
+    // 如果是服务端数据源设定请求参数名称
+    request: Object,
+    // 如果是服务端数据源设定响应参数名称
+    response: Object,
+    // 如果是服务端数据源自定义返回格式解析
+    parseData: Function,
+    // 如果是服务端数据源自定义参数格式解析
+    parseParam: Function,
+    // 列表选中数据(多选)，支持 v-model 绑定
+    selection: Array,
+    // 列表选中数据(单选)，支持 v-model 绑定
+    current: Object,
+    // 是否需要分页组件
+    needPage: {
+      type: Boolean,
+      default: true
+    },
+    // 如果是服务端数据源默认是否请求数据
+    initLoad: {
+      type: Boolean,
+      default: true
+    },
+    // 表格请求状态
+    loading: Boolean,
+    // 表格列配置
+    columns: {
+      type: Array,
+      required: true
+    },
+    // 表格元素的 table-layout 属性，设为 fixed 表示内容不会影响列的布局
+    tableLayout: String,
+    // 是否展示外边框和列边框
+    bordered: Boolean,
+    // 指定树形结构的列名
+    childrenColumnName: Array,
+    // 覆盖默认的 table 元素
+    components: Object,
+    // 初始时，是否展开所有行
+    defaultExpandAllRows: Boolean,
+    // 默认展开的行
+    defaultExpandedRowKeys: Array,
+    // 展开的行，控制属性
+    expandedRowKeys: Array,
+    // 额外的展开行
+    expandedRowRender: Function,
+    // 自定义展开图标
+    expandIcon: Object,
+    // 通过点击行来展开子行
+    expandRowByClick: Boolean,
+    // 展开的图标显示在哪一列，如果没有 rowSelection，默认显示在第一列，否则显示在选择框后面
+    expandIconColumnIndex: Number,
+    // 表格尾部
+    footer: Function,
+    // 展示树形数据时，每层缩进的宽度，以 px 为单位
+    indentSize: {
+      type: Number,
+      default: 15
+    },
+    // 默认文案设置，目前包括排序、过滤、空数据文案
+    locale: Object,
+    // 表格行的类名
+    rowClassName: Function,
+    // 表格行 key 的取值，可以是字符串或一个函数
+    rowKey: {
+      type: [String, Function],
+      default: 'key'
+    },
+    // 列表项是否可选择
+    rowSelection: Object,
+    // 设置横向或纵向滚动，也可用于指定滚动区域的宽和高
+    scroll: Object,
+    // 是否显示表头
+    showHeader: {
+      type: Boolean,
+      default: true
+    },
+    // 表格大小
+    size: {
+      type: String,
+      default: 'middle'
+    },
+    // 设置头部行属性
+    customHeaderRow: Function,
+    // 设置行属性
+    customRow: Function,
+    // 设置表格内各类浮层的渲染节点，如筛选菜单
+    getPopupContainer: Function,
+    // 数据渲染前可以再次改变，一般用户空数据的默认配置
+    transformCellText: Function,
+    // 分页组件默认页码
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    // 分页组件每页显示条目个数
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    // 分页组件只有一页时是否隐藏
+    hideOnSinglePage: Boolean,
+    // 分页组件每页显示个数选择器的选项设置
+    pageSizeOptions: {
+      type: Array,
+      default() {
+        return ['10', '20', '30', '40', '50', '100'];
+      }
+    },
+    // 分页组件是否显示较少页面内容
+    showLessItems: Boolean,
+    // 分页组件是否可以快速跳转至某页
+    showQuickJumper: {
+      type: Boolean,
+      default: true
+    },
+    // 分页组件是否可以改变 pageSize
+    showSizeChanger: {
+      type: Boolean,
+      default: true
+    },
+    // 分页组件用于显示数据总量
+    showTotal: {
+      type: Function,
+      default(total) {
+        return `共 ${total} 条`;
+      }
+    },
+    // 分页组件是否显示为简单分页
+    simple: Boolean,
+    // 指定分页显示的位置
+    position: {
+      type: String,
+      default: 'bottom'
+    },
+    // 表头工具栏主题风格
+    toolsTheme: String,
+    // 标题
+    title: String,
+    // 二级标题
+    subTitle: String,
+    // 表头工具按钮布局
+    toolkit: {
+      type: Array,
+      default() {
+        return ['reload', 'size', 'columns', 'fullscreen'];
+      }
+    },
+    // 是否开启列拖拽排序
+    columnsSort: {
+      type: Boolean,
+      default: true
+    },
+    // 行点击选中
+    rowClickChecked: Boolean,
+    // 行点击选中当单个选中时互斥
+    rowClickCheckedIntelligent: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示顶部工具栏
+    toolbar: {
+      type: Boolean,
+      default: true
+    },
+    // 顶部工具栏样式
+    toolStyle: [Object, String],
+    // 自定义顶部工具栏class
+    toolClass: String,
+    // 顶部工具栏右侧样式
+    toolkitStyle: [Object, String],
+    // 表格全屏时的z-index
+    fullZIndex: {
+      type: Number,
+      default: 999
+    },
+    // 是否自动修正页码
+    autoAmendPage: {
+      type: Boolean,
+      default: true
+    },
+    // 单选多选列类型
+    selectionType: String
+  },
+  data() {
+    const globalRequest = this.$ELEADMIN ? this.$ELEADMIN.request : null;
+    let isServer = !Array.isArray(this.datasource), order = {}, filters = {},
+      requestNames = Object.assign({}, defaultRequest, globalRequest, this.request);
+    // 获取默认的排序信息
+    eachTreeData(this.columns, (d) => {
+      if (d.defaultSortOrder && d.dataIndex) {
+        order[requestNames.sortName] = d.dataIndex;
+        order[requestNames.orderName] = {
+          ascend: 'asc',
+          descend: 'desc'
+        }[d.defaultSortOrder];
+      }
+    });
+    return {
+      // 数据请求状态
+      isLoading: isServer ? true : this.loading,
+      // 是否是服务端返回数据
+      isServer: isServer,
+      // 全部数据
+      data: isServer ? [] : this.datasource,
+      // 数据总数量
+      total: isServer ? 0 : this.datasource.length,
+      // 当前在第几页
+      page: this.currentPage,
+      // 每页显示数量
+      limit: this.pageSize,
+      // 当前排序参数
+      order: order,
+      // 当前筛选参数
+      filters: filters,
+      // 请求参数名称
+      requestNames: requestNames,
+      // 请求错误后的提示信息
+      errorText: null,
+      // 表格列配置
+      cols: this.columns,
+      // 表格尺寸
+      tableSize: this.size,
+      // 是否是全屏状态
+      isFullscreen: false,
+      // 表格选中行的key
+      selectedRowKeys: []
+    };
+  },
+  computed: {
+    // 表格当前显示数据
+    list() {
+      if (this.isServer) {
+        return this.data;
+      }
+      let data = this.data,
+        sort = this.order[this.requestNames.sortName],
+        order = this.order[this.requestNames.orderName];
+      // 前端排序
+      if (sort) {
+        data.sort((a, b) => {
+          if (b[sort] == a[sort]) {
+            return 0;
+          }
+          if (order === 'desc') {
+            return (a[sort] < b[sort]) ? 1 : -1;
+          }
+          return (a[sort] < b[sort]) ? -1 : 1;
+        });
+      }
+      // 前端分页
+      if (this.needPage) {
+        let start = (this.page - 1) * this.limit;
+        let end = start + this.limit;
+        if (end > data.length) {
+          end = data.length;
+        }
+        return data.slice(start, end);
+      }
+      return data;
+    },
+    // 表格索引开始序号
+    tableIndex() {
+      return this.needPage ? ((this.page - 1) * this.limit + 1) : 1;
+    },
+    // 表格分页组件参数
+    pagination() {
+      if (!this.needPage) {
+        return false;
+      }
+      return {
+        position: this.position,
+        current: this.page,
+        pageSize: this.limit,
+        hideOnSinglePage: this.hideOnSinglePage,
+        pageSizeOptions: this.pageSizeOptions,
+        showLessItems: this.showLessItems,
+        showQuickJumper: this.showQuickJumper,
+        showSizeChanger: this.showSizeChanger,
+        showTotal: this.showTotal,
+        simple: this.simple,
+        size: this.tableSize === 'default' ? '' : 'small',
+        total: this.total
+      };
+    },
+    // 表格文案设置
+    localeText() {
+      if (this.errorText) {
+        if (this.locale) {
+          return Object.assign({}, this.locale, {
+            emptyText: this.errorText
+          });
+        } else {
+          return {emptyText: this.errorText};
+        }
+      }
+      return this.locale;
+    },
+    // 表格复选框
+    tableRowSelection() {
+      let type;
+      if (this.current || this.current === null) {
+        type = 'radio';
+      }
+      if (!type && !this.selection && !this.rowSelection) {
+        return null;
+      }
+      return Object.assign({}, this.rowSelection || {}, {
+        selectedRowKeys: this.selectedRowKeys,
+        onChange: this.onSelectionChange,
+        type: this.selectionType || type
+      });
+    }
+  },
+  watch: {
+    datasource() {
+      this.isServer = !Array.isArray(this.datasource);
+      if (!this.isServer) {
+        this.total = this.datasource.length;
+        if (this.needPage) {
+          const maxPage = Math.ceil(this.total / this.limit);
+          if (maxPage && this.page > maxPage) {
+            this.page = maxPage;
+          }
+        }
+        this.data = this.datasource;
+      }
+      this.reload();
+    },
+    request() {
+      const globalRequest = this.$ELEADMIN ? this.$ELEADMIN.request : null;
+      this.requestNames = Object.assign({}, defaultRequest, globalRequest, this.request);
+    },
+    pageSize() {
+      this.limit = this.pageSize;
+      this.reload();
+    },
+    currentPage() {
+      this.page = this.currentPage;
+      this.reload();
+    },
+    columns() {
+      this.cols = this.columns;
+      if (this.toolbar) {
+        this.$refs.toolbar.initColumnList();
+      }
+    },
+    size() {
+      this.tableSize = this.size;
+    },
+    loading() {
+      this.isLoading = this.loading;
+    },
+    selection() {
+      this.selectedRowKeys = this.selection.map(d => d[this.rowKey]);
+    },
+    current() {
+      if (this.current) {
+        this.selectedRowKeys = [this.current[this.rowKey]];
+      } else {
+        this.selectedRowKeys = [];
+      }
+    }
+  },
+  mounted() {
+    if (this.initLoad) {
+      this.reload();
+    }
+  },
+  methods: {
+    /* 获取数据 */
+    reload(obj) {
+      if (obj) {
+        if (obj.page) {
+          this.page = obj.page;
+        }
+        if (obj.limit) {
+          this.limit = obj.limit;
+        }
+      }
+      this.errorText = null;
+      // 前端分页
+      if (!this.isServer) {
+        this.total = this.datasource.length;
+        //this.isLoading = false;
+        this.$emit('done', {
+            data: this.list,
+            total: this.total
+          },
+          this.needPage ? this.page : 1,
+          this.total,
+          this.$refs.table
+        );
+        return;
+      }
+      // 后端分页
+      this.isLoading = true;
+      if (typeof this.datasource === 'function') {
+        // 自定义请求方法
+        this.datasource({
+          page: this.page,
+          limit: this.limit,
+          where: Object.assign({}, ((obj && obj.where) || this.where) || {}),
+          order: this.order,
+          filters: this.filters
+        }, (data, total) => {
+          this.isLoading = false;
+          if (Array.isArray(data)) {
+            // 自动修正页码
+            if (this.autoAmendPage && this.needPage && !data.length && total) {
+              let maxPage = Math.ceil(total / this.limit);
+              if (maxPage && this.page > maxPage) {
+                this.page = maxPage;
+                this.reload();
+                return;
+              }
+            }
+            // 获取返回的数据
+            this.data = data;
+            this.total = total || data.length;
+            this.$emit('done', {
+                data: data,
+                total: total
+              },
+              this.needPage ? this.page : 1,
+              this.total,
+              this.$refs.table
+            );
+          } else if (typeof data === 'string') {
+            this.errorText = data;
+          } else {
+            this.errorText = '获取数据失败';
+            console.error('callback返回的data格式错误: ', data);
+          }
+        });
+      } else {
+        // 数据源为url方式
+        let pageParam = {};
+        if (this.needPage) {
+          pageParam[this.requestNames.pageName] = this.page;
+          pageParam[this.requestNames.limitName] = this.limit;
+        }
+        let params = Object.assign(
+          {},
+          ((obj && obj.where) || this.where) || {},
+          this.filters,
+          this.order,
+          pageParam
+        ), data = null;
+        if (this.parseParam) {
+          params = this.parseParam(params);
+        }
+        let method = this.method ? this.method.toUpperCase() : 'GET';
+        if (['POST', 'PUT', 'PATCH'].indexOf(method) !== -1) {
+          data = params;
+          params = null;
+          if (this.contentType && this.contentType.toLowerCase().indexOf('form') !== -1) {
+            let formData = new FormData();
+            for (let key in data) {
+              if (!Object.prototype.hasOwnProperty.call(data, key)) {
+                continue;
+              }
+              formData.append(key, data[key]);
+            }
+            data = formData;
+          }
+        }
+        this.$http.request({
+          url: this.datasource,
+          method: method,
+          params: params,
+          data: data,
+          headers: this.headers
+        }).then(res => {
+          this.isLoading = false;
+          const result = this.getResponseResult(res.data);
+          if (result.code === 0) {
+            // 自动修正页码
+            if (this.autoAmendPage && this.needPage && result.data && !result.data.length && result.count) {
+              let maxPage = Math.ceil(result.count / this.limit);
+              if (maxPage && this.page > maxPage) {
+                this.page = maxPage;
+                this.reload();
+                return;
+              }
+            }
+            // 获取请求的数据
+            this.data = result.data;
+            this.total = result.count || result.data.length;
+            this.$emit('done',
+              res.data,
+              this.needPage ? this.page : 1,
+              this.total,
+              this.$refs.table
+            );
+          } else {
+            this.errorText = result.msg || '获取数据失败, 正确的状态码为0';
+          }
+        }).catch(e => {
+          this.isLoading = false;
+          this.errorText = e.message;
+        });
+      }
+    },
+    // 展开的行变化时触发
+    onExpandedRowsChange(expandedRows) {
+      this.$emit('expandedRowsChange', expandedRows);
+    },
+    // 分页、排序、筛选变化时触发
+    onChange(pagination, filters, sorter, {currentDataSource}) {
+      this.$emit('change', pagination, filters, sorter, {currentDataSource});
+      // 更新分页信息
+      this.limit = pagination.pageSize;
+      this.page = pagination.current;
+      // 更新排序信息
+      let temp = {};
+      if (sorter.order) {
+        temp[this.requestNames.sortName] = sorter.field;
+        temp[this.requestNames.orderName] = {ascend: 'asc', descend: 'desc'}[sorter.order];
+      }
+      this.order = temp;
+      // 更新列筛选信息
+      this.filters = Object.assign({}, filters);
+      // 重新获取数据
+      this.reload();
+    },
+    // 点击展开图标时触发
+    onExpand(expanded, record) {
+      this.$emit('expand', expanded, record);
+    },
+    /* 选择项发生变化时会触发 */
+    onSelectionChange(selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys;
+      this.$emit('update:selection', selectedRows);
+      this.$emit('update:current', selectedRows.length ? selectedRows[0] : null);
+    },
+    /* 修改表格尺寸 */
+    updateSize(value) {
+      this.tableSize = value;
+      this.$emit('size-change', value);
+    },
+    /* 修改表格列配置 */
+    updateColumns(value) {
+      this.cols = value;
+      this.$emit('columns-change', value);
+    },
+    /* 全屏切换 */
+    toggleFullscreen(value) {
+      this.isFullscreen = value;
+      this.$emit('fullscreen-change', value);
+    },
+    /* 工具栏刷新按钮点击 */
+    onRefresh() {
+      if (this.isServer) {
+        this.reload();
+      } else {
+        this.$emit('refresh');
+      }
+    },
+    /* 获取返回的结果(解析格式) */
+    getResponseResult(data) {
+      let result = this.parseData ? this.parseData(data) : data;
+      const globalResponse = this.$ELEADMIN ? this.$ELEADMIN.response : null;
+      const responseNames = Object.assign({}, defaultResponse, globalResponse, this.response);
+      let code = this.getFieldValue(result, responseNames.statusName);
+      if (responseNames.statusCode === code) {
+        code = 0;
+      }
+      return {
+        code: code,
+        msg: this.getFieldValue(result, responseNames.msgName),
+        data: this.getFieldValue(result, responseNames.dataName),
+        count: this.getFieldValue(result, responseNames.countName)
+      };
+    },
+    /* 获取字段的值(支持多层*.*) */
+    getFieldValue(obj, field) {
+      if (!field) {
+        return;
+      }
+      let value = obj;
+      field.split('.').forEach(f => {
+        if (value) {
+          value = value[f];
+        } else {
+          value = null;
+        }
+      });
+      return value;
+    }
+  }
+}
+</script>
+
+<style>
+/* 表格全屏样式 */
+.ele-pro-table.ele-pro-table-fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  padding: 0 0 16px 0;
+  box-sizing: border-box;
+}
+
+.ele-pro-table.ele-pro-table-fullscreen .ant-table-pagination {
+  margin-bottom: 0;
+  padding: 0 16px;
+}
+
+.ele-pro-table.ele-pro-table-fullscreen .ele-table-tool:not(.ele-table-tool-default) {
+  margin-top: 10px;
+  padding: 0 16px;
+}
+</style>
--- a/src/components/ele-admin-pro/packages/ele-pro-tabs/index.js
+++ b/src/components/ele-admin-pro/packages/ele-pro-tabs/index.js
@@ -0,0 +1,8 @@
+/** 标签页 license by http://eleadmin.com */
+import EleProTabs from './src/main';
+
+EleProTabs.install = function (Vue) {
+  Vue.component(EleProTabs.name, EleProTabs);
+};
+
+export default EleProTabs;
--- a/src/components/ele-admin-pro/packages/ele-pro-tabs/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-pro-tabs/src/main.vue
@@ -0,0 +1,192 @@
+<!-- 标签页 license by http://eleadmin.com -->
+<template>
+  <locale-receiver component-name="ele">
+    <template #default="locale">
+      <a-tabs
+        :hide-add="true"
+        :animated="false"
+        :active-key="active"
+        type="editable-card"
+        class="ele-admin-tabs"
+        @tabClick="onTabClick"
+        @edit="onTabEdit">
+        <a-tab-pane key="/" :tab="homeTitle" :closable="false"/>
+        <template v-for="t in tabs" :key="t.key">
+          <a-tab-pane :tab="t.title" :closable="t.closable"/>
+        </template>
+        <template #tabBarExtraContent>
+          <a-dropdown :overlay-style="{paddingRight: '5px', minWidth: '120px'}" placement="bottomRight">
+            <div class="ele-admin-tabs-drop">
+              <down-outlined/>
+            </div>
+            <template #overlay>
+              <slot name="dropdown">
+                <a-menu @click="onDropClick">
+                  <a-menu-item key="fullscreen">
+                    <div v-if="bodyFullscreen" class="ele-cell">
+                      <compress-outlined/>
+                      <div class="ele-cell-content">{{ locale.tabs.fullscreenExit }}</div>
+                    </div>
+                    <div v-else class="ele-cell">
+                      <expand-outlined/>
+                      <div class="ele-cell-content">{{ locale.tabs.fullscreen }}</div>
+                    </div>
+                  </a-menu-item>
+                  <a-menu-item key="left">
+                    <div class="ele-cell">
+                      <arrow-left-outlined/>
+                      <div class="ele-cell-content">{{ locale.tabs.closeLeft }}</div>
+                    </div>
+                  </a-menu-item>
+                  <a-menu-item key="right">
+                    <div class="ele-cell">
+                      <arrow-right-outlined/>
+                      <div class="ele-cell-content">{{ locale.tabs.closeRight }}</div>
+                    </div>
+                  </a-menu-item>
+                  <a-menu-item key="other">
+                    <div class="ele-cell">
+                      <close-outlined/>
+                      <div class="ele-cell-content">{{ locale.tabs.closeOther }}</div>
+                    </div>
+                  </a-menu-item>
+                  <a-menu-item key="all">
+                    <div class="ele-cell">
+                      <close-circle-outlined/>
+                      <div class="ele-cell-content">{{ locale.tabs.closeAll }}</div>
+                    </div>
+                  </a-menu-item>
+                  <a-menu-item v-if="showRefresh" key="reload">
+                    <div class="ele-cell">
+                      <reload-outlined/>
+                      <div class="ele-cell-content">{{ locale.tabs.reload }}</div>
+                    </div>
+                  </a-menu-item>
+                </a-menu>
+              </slot>
+            </template>
+          </a-dropdown>
+        </template>
+      </a-tabs>
+    </template>
+  </locale-receiver>
+</template>
+
+<script>
+import LocaleReceiver from 'ant-design-vue/es/locale-provider/LocaleReceiver';
+import {
+  DownOutlined,
+  ReloadOutlined,
+  ArrowLeftOutlined,
+  ArrowRightOutlined,
+  CloseOutlined,
+  CloseCircleOutlined,
+  ExpandOutlined,
+  CompressOutlined
+} from '@ant-design/icons-vue';
+
+export default {
+  name: 'EleProTabs',
+  components: {
+    LocaleReceiver,
+    DownOutlined,
+    ReloadOutlined,
+    ArrowLeftOutlined,
+    ArrowRightOutlined,
+    CloseOutlined,
+    CloseCircleOutlined,
+    ExpandOutlined,
+    CompressOutlined
+  },
+  emits: [
+    'tab-change',
+    'tab-remove',
+    'tab-remove-all',
+    'tab-remove-left',
+    'tab-remove-right',
+    'tab-remove-other',
+    'fullscreen-body',
+    'reload-page'
+  ],
+  props: {
+    // 标签页数据
+    tabs: Array,
+    // 页签选中
+    active: String,
+    // 主页标题
+    homeTitle: String,
+    // 右侧下拉是否显示刷新按钮
+    showRefresh: Boolean,
+    // 是否再次点击选中tab刷新
+    clickReload: Boolean,
+    // 内容区域是否处于全屏状态
+    bodyFullscreen: Boolean
+  },
+  methods: {
+    /* 处理tab点击 */
+    onTabClick(key) {
+      if (this.active === key) {
+        if (this.clickReload) {
+          this.reloadPage();
+        }
+        return;
+      }
+      let tab;
+      for (let i = 0; i < this.tabs.length; i++) {
+        if (this.tabs[i].key === key) {
+          tab = this.tabs[i];
+          break;
+        }
+      }
+      this.$emit('tab-change', tab ? tab : {key: key});
+    },
+    /* 处理tab编辑 */
+    onTabEdit(key, action) {
+      if (action === 'remove') {
+        this.$emit('tab-remove', {name: key, active: this.active});
+      }
+    },
+    /* 下拉菜单点击 */
+    onDropClick(obj) {
+      switch (obj.key) {
+        // 关闭左侧
+        case 'left':
+          this.$emit('tab-remove-left', this.active);
+          break;
+        // 关闭右侧
+        case 'right':
+          if (this.active === '/') {
+            this.removeAllTab();
+          } else {
+            this.$emit('tab-remove-right', this.active);
+          }
+          break;
+        // 关闭其他
+        case 'other':
+          this.$emit('tab-remove-other', this.active);
+          break;
+        // 关闭全部
+        case 'all':
+          this.removeAllTab();
+          break;
+        // 刷新当前
+        case 'reload':
+          this.reloadPage();
+          break;
+        // 内容全屏
+        case 'fullscreen':
+          this.$emit('fullscreen-body', !this.bodyFullscreen);
+          break;
+      }
+    },
+    /* 关闭全部Tab */
+    removeAllTab() {
+      this.$emit('tab-remove-all', this.active);
+    },
+    /* 刷新页面 */
+    reloadPage() {
+      this.$emit('reload-page');
+    }
+  }
+}
+</script>
--- a/src/components/ele-admin-pro/packages/ele-redirect/index.js
+++ b/src/components/ele-admin-pro/packages/ele-redirect/index.js
@@ -0,0 +1,8 @@
+/** 用于刷新路由 license by http://eleadmin.com */
+import EleRedirect from './src/main';
+
+EleRedirect.install = function (Vue) {
+  Vue.component(EleRedirect.name, EleRedirect);
+};
+
+export default EleRedirect;
--- a/src/components/ele-admin-pro/packages/ele-redirect/src/main.js
+++ b/src/components/ele-admin-pro/packages/ele-redirect/src/main.js
@@ -0,0 +1,26 @@
+/** 用于刷新路由 license by http://eleadmin.com */
+import {createVNode, defineComponent, unref} from 'vue';
+import {useRouter} from 'vue-router';
+import {useStore} from 'vuex';
+
+export default defineComponent({
+  name: 'EleRedirect',
+  setup() {
+    const {currentRoute, replace} = useRouter();
+    const {dispatch} = useStore();
+    const {params, query} = unref(currentRoute);
+    const {path} = params;
+    const _path = Array.isArray(path) ? path.join('/') : path;
+    dispatch('theme/setKeepAliveExclude', []).then(() => {
+      replace({
+        path: '/' + _path,
+        query: query,
+      }).then(() => {
+      });
+    });
+    return {};
+  },
+  render() {
+    return createVNode('div');
+  }
+});
--- a/src/components/ele-admin-pro/packages/ele-tag/index.js
+++ b/src/components/ele-admin-pro/packages/ele-tag/index.js
@@ -0,0 +1,8 @@
+/** 标签组件 license by http://eleadmin.com */
+import EleTag from './src/main';
+
+EleTag.install = function (app) {
+  app.component(EleTag.name, EleTag);
+};
+
+export default EleTag;
--- a/src/components/ele-admin-pro/packages/ele-tag/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-tag/src/main.vue
@@ -0,0 +1,155 @@
+<!-- 标签组件 license by http://eleadmin.com -->
+<template>
+  <a-tag
+    :class="tagClass"
+    :closable="closable"
+    :color="color"
+    :visible="true"
+    @close="onClose">
+    <slot/>
+  </a-tag>
+</template>
+
+<script>
+export default {
+  name: 'EleTag',
+  props: {
+    closable: Boolean,
+    color: String,
+    size: {
+      type: String,
+      default: 'mini',
+      validator: function (value) {
+        return ['large', 'middle', 'small', 'mini'].indexOf(value) !== -1;
+      }
+    },
+    shape: {
+      type: String,
+      default: 'default',
+      validator: function (value) {
+        return ['round', 'default', 'circle'].indexOf(value) !== -1;
+      }
+    }
+  },
+  emits: ['close'],
+  computed: {
+    tagClass() {
+      return [
+        'ele-tag',
+        {'ele-tag-round': this.shape === 'round'},
+        {'ele-tag-circle': this.shape === 'circle'},
+        {'ele-tag-lg': this.size === 'large'},
+        {'ele-tag-md': this.size === 'middle'},
+        {'ele-tag-mini': this.size === 'mini'}
+      ];
+    }
+  },
+  methods: {
+    /* close事件 */
+    onClose(e) {
+      this.$emit('close', e);
+    }
+  }
+}
+</script>
+
+<style>
+.ele-tag.ant-tag {
+  margin: 0;
+  height: 24px;
+  line-height: 24px;
+  box-sizing: content-box;
+  padding: 0 8px;
+  transition: none;
+}
+
+.ele-tag.ant-tag .anticon-close {
+  transition: none;
+}
+
+.ele-tag + .ele-tag {
+  margin-left: 8px;
+}
+
+.ele-tag.ant-tag > .anticon + span,
+.ele-tag.ant-tag > span + .anticon {
+  margin-left: 4px;
+}
+
+/* 圆形、圆角 */
+.ele-tag.ele-tag-circle {
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  border-radius: 50%;
+  text-align: center;
+  padding: 0 !important;
+}
+
+.ele-tag.ele-tag-round {
+  border-radius: 24px;
+}
+
+/* 中型尺寸 */
+.ele-tag.ele-tag-md {
+  height: 28px;
+  line-height: 28px;
+  padding: 0 10px;
+  font-size: 14px;
+  vertical-align: top;
+}
+
+.ele-tag.ele-tag-md.ele-tag-circle {
+  width: 28px;
+}
+
+.ele-tag.ele-tag-md.ele-tag-round {
+  border-radius: 28px;
+}
+
+.ele-tag.ele-tag-md > .anticon + span,
+.ele-tag.ele-tag-md > span + .anticon {
+  margin-left: 6px;
+}
+
+/* 大型尺寸 */
+.ele-tag.ele-tag-lg {
+  height: 32px;
+  line-height: 32px;
+  padding: 0 12px;
+  font-size: 15px;
+}
+
+.ele-tag.ele-tag-lg.ele-tag-circle {
+  width: 32px;
+}
+
+.ele-tag.ele-tag-lg.ele-tag-round {
+  border-radius: 32px;
+}
+
+.ele-tag.ele-tag-lg > .anticon + span,
+.ele-tag.ele-tag-lg > span + .anticon {
+  margin-left: 8px;
+}
+
+/* 超小尺寸 */
+.ele-tag.ele-tag-mini {
+  height: 20px;
+  line-height: 20px;
+  padding: 0 6px;
+}
+
+.ele-tag.ele-tag-mini.ele-tag-circle {
+  width: 20px;
+}
+
+.ele-tag.ele-tag-mini.ele-tag-round {
+  border-radius: 20px;
+}
+
+.ele-tag.ele-tag-mini > .anticon + span,
+.ele-tag.ele-tag-mini > span + .anticon {
+  margin-left: 2px;
+}
+</style>
--- a/src/components/ele-admin-pro/packages/ele-toolbar/index.js
+++ b/src/components/ele-admin-pro/packages/ele-toolbar/index.js
@@ -0,0 +1,8 @@
+/** 表格工具栏组件 license by http://eleadmin.com */
+import EleToolbar from './src/main';
+
+EleToolbar.install = function (Vue) {
+  Vue.component(EleToolbar.name, EleToolbar);
+};
+
+export default EleToolbar;
--- a/src/components/ele-admin-pro/packages/ele-toolbar/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-toolbar/src/main.vue
@@ -0,0 +1,123 @@
+<!-- 表格工具栏组件 license by http://eleadmin.com -->
+<template>
+  <div :class="['ele-table-tool', {'ele-table-tool-default': 'default'===theme}]">
+    <div class="ele-table-tool-title ele-cell">
+      <div v-if="title||subTitle" style="margin-right: 8px;">
+        <h6 v-if="title">{{ title }}</h6>
+        <div v-if="subTitle">{{ subTitle }}</div>
+      </div>
+      <div class="ele-cell-content" style="margin-left: 0;">
+        <slot/>
+      </div>
+    </div>
+    <ele-pro-table-tools
+      v-if="tools"
+      ref="tool"
+      :size="size"
+      :columns="columns"
+      :tools="tools"
+      :space="space"
+      :columns-sort="columnsSort"
+      :custom-style="toolkitStyle"
+      :is-fullscreen="isFullscreen||fullscreen"
+      @reload="reload"
+      @update:size="updateSize"
+      @update:columns="updateColumns"
+      @fullscreen="toggleFullscreen">
+      <slot name="action"/>
+    </ele-pro-table-tools>
+  </div>
+</template>
+
+<script>
+import EleProTableTools from '../../ele-pro-table-tools';
+
+export default {
+  name: 'EleToolbar',
+  components: {EleProTableTools},
+  emits: [
+    'reload',
+    'update:size',
+    'update:columns',
+    'fullscreen'
+  ],
+  props: {
+    // 主题风格
+    theme: String,
+    // 标题
+    title: String,
+    // 二级标题
+    subTitle: String,
+    // 表格尺寸
+    size: {
+      type: String,
+      default: 'default'
+    },
+    // 表格列配置
+    columns: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    // 工具按钮布局
+    tools: {
+      type: Array,
+      default() {
+        return ['reload', 'size', 'columns', 'fullscreen'];
+      }
+    },
+    // 是否开启列拖拽排序
+    columnsSort: {
+      type: Boolean,
+      default: true
+    },
+    // 工具栏右侧样式
+    toolkitStyle: [Object, String],
+    // 是否是全屏状态
+    isFullscreen: Boolean
+  },
+  data() {
+    return {
+      fullscreen: false
+    };
+  },
+  computed: {
+    // 右侧工具按钮间距
+    space() {
+      return this.theme === 'default' ? 'small' : 'middle';
+    }
+  },
+  methods: {
+    /* 初始化列配置 */
+    initColumnList() {
+      this.$refs.tool.initColumnList();
+    },
+    /* 刷新表格 */
+    reload() {
+      this.$emit('reload');
+    },
+    /* 修改表格尺寸 */
+    updateSize(value) {
+      this.$emit('update:size', value);
+    },
+    /* 修改表格尺寸 */
+    updateColumns(value) {
+      this.$emit('update:columns', value);
+    },
+    /* 全屏切换 */
+    toggleFullscreen(value) {
+      if (this.isFullscreen !== null && this.isFullscreen !== undefined) {
+        this.$emit('fullscreen', value);
+      } else {
+        this.fullscreen = !this.fullscreen;
+        this.$emit('fullscreen', this.fullscreen);
+      }
+    }
+  },
+  /* 全屏切换 */
+  toggleFullscreen(el, fullscreen) {
+    EleProTableTools.toggleFullscreen(el, fullscreen);
+  }
+}
+</script>
--- a/src/components/ele-admin-pro/packages/ele-word-cloud/index.js
+++ b/src/components/ele-admin-pro/packages/ele-word-cloud/index.js
@@ -0,0 +1,8 @@
+/** echarts 词云组件封装 license by http://eleadmin.com */
+import EleWordCloud from './src/main';
+
+EleWordCloud.install = function (app) {
+  app.component(EleWordCloud.name, EleWordCloud);
+};
+
+export default EleWordCloud;
--- a/src/components/ele-admin-pro/packages/ele-word-cloud/src/main.vue
+++ b/src/components/ele-admin-pro/packages/ele-word-cloud/src/main.vue
@@ -0,0 +1,99 @@
+<!-- echarts 词云组件封装 license by http://eleadmin.com -->
+<template>
+  <ele-chart ref="chart" :options="options" :click="onClick"/>
+</template>
+
+<script>
+import 'echarts-wordcloud';
+import EleChart from '../../ele-chart';
+
+export default {
+  name: 'EleWordCloud',
+  components: {EleChart},
+  emits: ['click'],
+  props: {
+    // 词云数据
+    data: Array
+  },
+  data() {
+    return {
+      // 词云文字颜色
+      colors: [
+        'rgb(24,144,255)',
+        'rgb(102,181,255)',
+        'rgb(65, 217, 199)',
+        'rgb(47, 194, 91)',
+        'rgb(110, 219, 143)',
+        'rgb(154, 230, 92)',
+        'rgb(250, 204, 20)',
+        'rgb(230, 150, 92)',
+        'rgb(87, 173, 113)',
+        'rgb(34, 50, 115)',
+        'rgb(115, 138, 230)',
+        'rgb(117, 100, 204)',
+        'rgb(133, 67, 224)',
+        'rgb(168, 119, 237)',
+        'rgb(92, 142, 230)',
+        'rgb(19, 194, 194)',
+        'rgb(112, 224, 224)',
+        'rgb(92, 163, 230)',
+        'rgb(52, 54, 199)',
+        'rgb(128, 130, 255)',
+        'rgb(221, 129, 230)',
+        'rgb(240, 72, 100)',
+        'rgb(250, 125, 146)',
+        'rgb(213, 152, 217)'
+      ]
+    };
+  },
+  computed: {
+    // echarts配置
+    options() {
+      return {
+        tooltip: {
+          show: true
+        },
+        series: [
+          {
+            type: 'wordCloud',
+            width: '100%',
+            height: '100%',
+            sizeRange: [12, 24],
+            gridSize: 6,
+            textStyle: {
+              color: () => {
+                return this.randomColor();
+              }
+            },
+            emphasis: {
+              textStyle: {
+                shadowBlur: 8,
+                shadowColor: 'rgba(0, 0, 0, .15)'
+              }
+            },
+            data: this.data
+          }
+        ]
+      };
+    }
+  },
+  methods: {
+    /* 取随机颜色 */
+    randomColor() {
+      return this.colors[this.random(0, this.colors.length)];
+    },
+    /* 取随机数 */
+    random(m, n) {
+      return Math.floor(Math.random() * (m - n) + n);
+    },
+    /* 图表渲染完成回调 */
+    onClick(e) {
+      this.$emit('click', e.data);
+    },
+    /* 重置尺寸 */
+    resize() {
+      this.$refs.chart.resize();
+    }
+  }
+}
+</script>
--- a/src/components/ele-admin-pro/packages/index.js
+++ b/src/components/ele-admin-pro/packages/index.js
@@ -0,0 +1,60 @@
+/** ele admin pro license by http://eleadmin.com */
+import NProgress from 'nprogress';
+import Antd from 'ant-design-vue';
+import EleAvatarList from './ele-avatar-list';
+import EleEditTag from './ele-edit-tag';
+import EleProLayout from './ele-pro-layout';
+import EleProTable from './ele-pro-table';
+import EleProTableTools from './ele-pro-table-tools';
+import EleTag from './ele-tag';
+import EleToolbar from './ele-toolbar';
+import * as util from './util.js';
+import messageLoading from './message-loading.js';
+import {menuToRoutes, formatMenus} from './menu-util.js';
+
+export {
+  EleAvatarList,
+  EleEditTag,
+  EleProLayout,
+  EleProTable,
+  EleProTableTools,
+  EleTag,
+  EleToolbar,
+  messageLoading,
+  menuToRoutes,
+  formatMenus,
+  util
+}
+
+export default {
+  install: function (app, opt) {
+    // 配置nprogress
+    NProgress.configure(Object.assign({
+      speed: 200,
+      minimum: 0.02,
+      trickleRate: 0.1,
+      trickleSpeed: 200,
+      showSpinner: false
+    }, opt ? opt.nProgress : null));
+
+    // 安装antd
+    app.use(Antd);
+
+    // 添加全局属性
+    app.config.globalProperties.$ELEADMIN = {
+      request: opt ? opt.request : null,
+      response: opt ? opt.response : null
+    };
+    app.config.globalProperties.$util = util;
+    app.config.globalProperties.$messageLoading = messageLoading;
+
+    // 注册全局组件
+    app.component(EleAvatarList.name, EleAvatarList);
+    app.component(EleEditTag.name, EleEditTag);
+    app.component(EleProLayout.name, EleProLayout);
+    app.component(EleProTable.name, EleProTable);
+    app.component(EleProTableTools.name, EleProTableTools);
+    app.component(EleTag.name, EleTag);
+    app.component(EleToolbar.name, EleToolbar);
+  }
+}
--- a/src/components/ele-admin-pro/packages/lang/ar_EG.js
+++ b/src/components/ele-admin-pro/packages/lang/ar_EG.js
@@ -0,0 +1,113 @@
+/** 阿拉伯语 */
+import lang from 'ant-design-vue/es/locale/ar_EG';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'منعش',
+      fullscreen: 'فول سكرين',
+      fullscreenExit: 'فول سكرين',
+      closeLeft: 'إغلاق الجانب الأيسر',
+      closeRight: 'إغلاق اليمين',
+      closeOther: 'إغلاق أخرى',
+      closeAll: 'إغلاق جميع'
+    },
+    setting: {
+      title: 'إعدادات الموضوع',
+      sideStyles: {
+        dark: 'الجانب المظلم',
+        light: 'ضوء الشريط الجانبي'
+      },
+      headStyles: {
+        light: 'مصباح حامل',
+        dark: 'عنوان الظلام',
+        primary: 'الجدول الرئيسي'
+      },
+      layoutStyles: {
+        side: 'الجانب قائمة تخطيط',
+        top: 'أعلى القائمة تخطيط',
+        mix: 'مزيج من تصميم القائمة'
+      },
+      colors: {
+        default: 'لي مينغ',
+        dust: 'رمادي أزرق',
+        sunset: 'الغروب البرتقالي',
+        volcano: 'البراكين',
+        purple: 'الذهب الأرجواني',
+        cyan: 'سماوي',
+        green: 'القطبية الخضراء',
+        geekblue: 'المهوس الأزرق'
+      },
+      darkMode: 'نمط الظلام',
+      layoutStyle: 'نمط الملاحة',
+      sideMenuStyle: 'القائمة المزدوجة للشريط الجانبي',
+      bodyFull: 'كامل الشاشة',
+      other: 'إعدادات أخرى',
+      fixedHeader: 'ثابت الجدول الحصاد',
+      fixedSidebar: 'شريط جانبي ثابت',
+      fixedBody: 'جسم ثابت',
+      logoAutoSize: 'تعديل التوقيع',
+      colorfulIcon: 'رمز اللون',
+      sideUniqueOpen: 'القائمة مفتوحة فقط',
+      weakMode: 'وضع ضعيف',
+      showFooter: 'عرض تذييل',
+      showTabs: 'عرض علامة التبويب',
+      tabStyle: 'نمط التسمية',
+      tabStyles: {
+        default: 'خرق العقد',
+        dot: 'رقصة البولكا النقاط',
+        card: 'البطاقات'
+      },
+      tips: 'في المرة القادمة التي تفتح ، وسوف تذكر التكوين الخاص بك'
+    },
+    tableTools: {
+      refresh: 'منعش',
+      size: 'كثافة',
+      sizeOption: {
+        large: 'سهل',
+        medium: 'خرق العقد',
+        small: 'الثانوية',
+        mini: 'عقد'
+      },
+      columns: 'عمود',
+      columnsOption: {
+        columns: 'عمود',
+        reset: 'ريست',
+        index: 'ديجيتال',
+        selection: 'اختار',
+        untitled: 'بدون عنوان'
+      },
+      fullscreen: 'فول سكرين'
+    },
+    fileList: {
+      selectAll: 'انتخاب كامل',
+      selectTips: 'اختار من {total} فايل/المحتويات',
+      fileName: 'الاسم الكامل',
+      fileSize: 'مقاس',
+      fileTimestamp: 'آخر تعديل'
+    },
+    cropper: {
+      zoomIn: 'مكبرة',
+      zoomOut: 'تصغير',
+      rotateLeft: 'تناوب اليسار',
+      rotateRight: 'تدوير الحق',
+      moveLeft: 'تحرك يسارا',
+      moveRight: 'رايت ›',
+      moveUp: 'صاعد صاعد',
+      moveDown: 'نزول',
+      flipX: 'فليب اكس',
+      flipY: 'الوجه ي',
+      reset: 'ريست',
+      upload: 'ابلود',
+      ok: 'حسناً',
+      title: 'آلة قطع'
+    },
+    map: {
+      title: 'آدرس',
+      placeholder: 'ادخل كلمة',
+      message: 'الرجاء اختيار العنوان',
+      ok: 'حسناً'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/bg_BG.js
+++ b/src/components/ele-admin-pro/packages/lang/bg_BG.js
@@ -0,0 +1,113 @@
+/** 保加利亚语 */
+import lang from 'ant-design-vue/es/locale/bg_BG';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'Освежаване',
+      fullscreen: 'пълен екран',
+      fullscreenExit: 'пълен екран',
+      closeLeft: 'Ляво затваряне',
+      closeRight: 'Затваряне надясно',
+      closeOther: 'Затваряне на други',
+      closeAll: 'Затваряне на всички'
+    },
+    setting: {
+      title: 'Настройки на тема',
+      sideStyles: {
+        dark: 'Тъмна страна',
+        light: 'Страничен панел'
+      },
+      headStyles: {
+        light: 'Светлина глава',
+        dark: 'Тъмна глава',
+        primary: 'Главна глава'
+      },
+      layoutStyles: {
+        side: 'Настройки на страничното меню',
+        top: 'Настройки на менюто',
+        mix: 'Настройки на менюто'
+      },
+      colors: {
+        default: 'Дневна Синьо',
+        dust: 'Dust Blue',
+        sunset: 'Залез Оранжев',
+        volcano: 'Вулкан',
+        purple: 'Златен Пурпурно',
+        cyan: 'Циан',
+        green: 'Полярно Зелено',
+        geekblue: 'Смотаняк Синьо'
+      },
+      darkMode: 'Мрачен режим',
+      layoutStyle: 'Навигационен режим',
+      sideMenuStyle: 'двойно меню',
+      bodyFull: 'Телесно покритие',
+      other: 'Други настройки',
+      fixedHeader: 'Настояща глава',
+      fixedSidebar: 'Постоянен панел',
+      fixedBody: 'Твърдо тяло',
+      logoAutoSize: 'Адаптация на логото',
+      colorfulIcon: 'Цветна икона',
+      sideUniqueOpen: 'Отваряне на меню',
+      weakMode: 'Слаб режим',
+      showFooter: 'Показване на стъпка',
+      showTabs: 'Показване на подпрозорците',
+      tabStyle: 'Стил на подпрозореца',
+      tabStyles: {
+        default: 'Стандартно',
+        dot: 'Точка',
+        card: 'Карта'
+      },
+      tips: 'Той ще запомни конфигурацията ти следващия път, когато я отвориш.'
+    },
+    tableTools: {
+      refresh: 'Освежаване',
+      size: 'Плътност',
+      sizeOption: {
+        large: 'Леко',
+        medium: 'Стандартно',
+        small: 'Вторичен',
+        mini: 'Компактен'
+      },
+      columns: 'Колони',
+      columnsOption: {
+        columns: 'Колони',
+        reset: 'Рестартиране',
+        index: 'Числа',
+        selection: 'Маркиране',
+        untitled: 'Без заглавие'
+      },
+      fullscreen: 'пълен екран'
+    },
+    fileList: {
+      selectAll: 'Избор на всичко',
+      selectTips: 'Избрано {total} файл/директория',
+      fileName: 'Име',
+      fileSize: 'Размер',
+      fileTimestamp: 'Последна модификация'
+    },
+    cropper: {
+      zoomIn: 'Увеличаване на',
+      zoomOut: 'Увеличаване на мащаба',
+      rotateLeft: 'Завъртане наляво',
+      rotateRight: 'Завъртане надясно',
+      moveLeft: 'Преместване наляво',
+      moveRight: 'Преместване надясно',
+      moveUp: 'Преместване нагоре',
+      moveDown: 'Преместване надолу',
+      flipX: 'Завъртане',
+      flipY: 'Завъртане',
+      reset: 'Рестартиране',
+      upload: 'Качване',
+      ok: 'Добре',
+      title: 'Кропър'
+    },
+    map: {
+      title: 'Адрес',
+      placeholder: 'Въведете ключова дума',
+      message: 'Моля, изберете адрес',
+      ok: 'Добре'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/ca_ES.js
+++ b/src/components/ele-admin-pro/packages/lang/ca_ES.js
@@ -0,0 +1,113 @@
+/** 加泰罗尼亚语 */
+import lang from 'ant-design-vue/es/locale/ca_ES';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'Actualitzar',
+      fullscreen: 'Pantalla completa',
+      fullscreenExit: 'Pantalla completa',
+      closeLeft: 'tancar a esquerra',
+      closeRight: 'Zarrar a la dreta',
+      closeOther: 'Zarrar altres',
+      closeAll: 'Zarrar tot'
+    },
+    setting: {
+      title: 'Configuració del tema',
+      sideStyles: {
+        dark: 'Barra lateral fosca',
+        light: 'Barra lateral llum'
+      },
+      headStyles: {
+        light: 'cap lliure',
+        dark: 'Cap negre',
+        primary: 'Cap principal'
+      },
+      layoutStyles: {
+        side: 'Disposició del menú lateral',
+        top: 'Disposició del menú superior',
+        mix: 'Distribució del Menú Mix'
+      },
+      colors: {
+        default: 'blau de la matinada',
+        dust: 'Blau de pols',
+        sunset: 'naranja del sol',
+        volcano: 'Volcà',
+        purple: 'Púrpura dorada',
+        cyan: 'Cian',
+        green: 'Verd Polar',
+        geekblue: 'blau geek'
+      },
+      darkMode: 'Mou fosc',
+      layoutStyle: 'Mod de navegació',
+      sideMenuStyle: 'doble menú',
+      bodyFull: 'Corp a pantalla completa',
+      other: 'altres condicions',
+      fixedHeader: 'cap fixa',
+      fixedSidebar: 'Barra lateral fixa',
+      fixedBody: 'Corp fixe',
+      logoAutoSize: 'Adaptació al logo',
+      colorfulIcon: 'Icó colorida',
+      sideUniqueOpen: 'Menú únic obert',
+      weakMode: 'Mod frac',
+      showFooter: 'Mostrar el pie',
+      showTabs: 'Mostrar les llingüetes',
+      tabStyle: 'Estil de llingüetes',
+      tabStyles: {
+        default: 'Predeterminat',
+        dot: 'Punt',
+        card: 'Carta'
+      },
+      tips: 'Recordarà la vostra configuració la propera vegada que l\'obreu.'
+    },
+    tableTools: {
+      refresh: 'Actualitzar',
+      size: 'La densitat',
+      sizeOption: {
+        large: 'Fàcil',
+        medium: 'Predeterminat',
+        small: 'Secundari',
+        mini: 'Compacte'
+      },
+      columns: 'Columnes',
+      columnsOption: {
+        columns: 'Columnes',
+        reset: 'Reiniciar',
+        index: 'Números',
+        selection: 'Selecció',
+        untitled: 'Sen títol'
+      },
+      fullscreen: 'Pantalla completa'
+    },
+    fileList: {
+      selectAll: 'Seleccionar tot',
+      selectTips: 'Seleccionat {total} arxiu/directori',
+      fileName: 'Nom',
+      fileSize: 'Tamañ',
+      fileTimestamp: 'Última modificació'
+    },
+    cropper: {
+      zoomIn: 'Ampliar',
+      zoomOut: 'Ampliar',
+      rotateLeft: 'Xirar a l\'esquerra',
+      rotateRight: 'Xirar a la dreta',
+      moveLeft: 'Movir a l\'esquerra',
+      moveRight: 'Movir a la dreta',
+      moveUp: 'Subir',
+      moveDown: 'Baixar',
+      flipX: 'Xirar X',
+      flipY: 'Xirar Y',
+      reset: 'Reiniciar',
+      upload: 'Enviar',
+      ok: 'D\'acord',
+      title: 'Cropper'
+    },
+    map: {
+      title: 'Adresa',
+      placeholder: 'Introdueix la paraula clau',
+      message: 'Si us plau seleccioneu una adreça',
+      ok: 'D\'acord'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/cs_CZ.js
+++ b/src/components/ele-admin-pro/packages/lang/cs_CZ.js
@@ -0,0 +1,113 @@
+/** 捷克语 */
+import lang from 'ant-design-vue/es/locale/cs_CZ';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'Obnovit',
+      fullscreen: 'Celoobrazovka',
+      fullscreenExit: 'Celoobrazovka',
+      closeLeft: 'Zavřít Doleva',
+      closeRight: 'Zavřít Vpravo',
+      closeOther: 'Zavřít Další',
+      closeAll: 'Zavřít Vše'
+    },
+    setting: {
+      title: 'Téma Nastavení',
+      sideStyles: {
+        dark: 'Tmavé Vedlejší',
+        light: 'Světlo Vedlejší'
+      },
+      headStyles: {
+        light: 'Světlo Hlavička',
+        dark: 'Tmavé Hlavička',
+        primary: 'Primární Hlavička'
+      },
+      layoutStyles: {
+        side: 'Strana Menu Uspořádání',
+        top: 'Nahoře Menu Uspořádání',
+        mix: 'Směs Menu Uspořádání'
+      },
+      colors: {
+        default: 'Svátek Modrá',
+        dust: 'Prach Modrá',
+        sunset: 'Západ Oranžová',
+        volcano: 'Sopky',
+        purple: 'Zlatá Fialová',
+        cyan: 'Kyan',
+        green: 'Polární Zelená',
+        geekblue: 'Geeku Modrá'
+      },
+      darkMode: 'Tmavý Režim',
+      layoutStyle: 'Navigační Režim',
+      sideMenuStyle: 'dvojité menu',
+      bodyFull: 'Tělo Celoobrazovka',
+      other: 'Ostatní Nastavení',
+      fixedHeader: 'Pevná hlavička',
+      fixedSidebar: 'Pevná postranní lišta',
+      fixedBody: 'Pevné Tělo',
+      logoAutoSize: 'Loga Přizpůsobení',
+      colorfulIcon: 'Barva Ikony',
+      sideUniqueOpen: 'Nabídka Unikátní',
+      weakMode: 'Slabý Režim',
+      showFooter: 'Zápatí Zobrazit',
+      showTabs: 'Karet Zobrazit',
+      tabStyle: 'Karet Styl',
+      tabStyles: {
+        default: 'Výchozí',
+        dot: 'tečka',
+        card: 'Karta'
+      },
+      tips: 'Bude si pamatovat vaši konfiguraci, až ji příště otevřete.'
+    },
+    tableTools: {
+      refresh: 'Obnovit',
+      size: 'Hustota',
+      sizeOption: {
+        large: 'Pomalu.',
+        medium: 'Výchozí',
+        small: 'Sekundární',
+        mini: 'Kompaktní'
+      },
+      columns: 'Sloupce',
+      columnsOption: {
+        columns: 'Sloupce',
+        reset: 'Obnovit',
+        index: 'Čísla',
+        selection: 'Výběr',
+        untitled: 'Nepojmenované'
+      },
+      fullscreen: 'Celoobrazovka'
+    },
+    fileList: {
+      selectAll: 'VybratVše',
+      selectTips: 'Vybrané {total} soubor/adresář',
+      fileName: 'Jméno',
+      fileSize: 'Velikost',
+      fileTimestamp: 'Poslední úpravy'
+    },
+    cropper: {
+      zoomIn: 'PřiblížitSe',
+      zoomOut: 'ZvětšitVen',
+      rotateLeft: 'RotovatDoleva',
+      rotateRight: 'RotovatVpravo',
+      moveLeft: 'PřesunoutDoleva',
+      moveRight: 'PřesunoutVpravo',
+      moveUp: 'PřesunoutNahoru',
+      moveDown: 'PřesunoutDolů',
+      flipX: 'PřevrátitX',
+      flipY: 'PřevrátitY',
+      reset: 'Obnovit',
+      upload: 'Nahrát',
+      ok: 'OK',
+      title: 'Plechovka'
+    },
+    map: {
+      title: 'Adresa',
+      placeholder: 'Klíčové slovo',
+      message: 'Prosím vyberte adresu',
+      ok: 'OK'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/da_DK.js
+++ b/src/components/ele-admin-pro/packages/lang/da_DK.js
@@ -0,0 +1,113 @@
+/** 丹麦语 */
+import lang from 'ant-design-vue/es/locale/da_DK';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'Genopfrisk',
+      fullscreen: 'FuldskærmName',
+      fullscreenExit: 'FuldskærmName',
+      closeLeft: 'Luk Venstre',
+      closeRight: 'Luk Højre',
+      closeOther: 'Luk Andet',
+      closeAll: 'Luk Alle'
+    },
+    setting: {
+      title: 'Tema Indstilling',
+      sideStyles: {
+        dark: 'Mørk Sidebjælke',
+        light: 'Lys Sidebjælke'
+      },
+      headStyles: {
+        light: 'Lys Overskrift',
+        dark: 'Mørkets Overskrift',
+        primary: 'Primær Overskrift'
+      },
+      layoutStyles: {
+        side: 'Side Menu Layout',
+        top: 'Øverste Menu Layout',
+        mix: 'Bland Menu Layout'
+      },
+      colors: {
+        default: 'Dagbreak Blå',
+        dust: 'Støv Blå',
+        sunset: 'Solnedgang Orange',
+        volcano: 'Vulcan',
+        purple: 'Gylden Lilla',
+        cyan: 'Cyan',
+        green: 'Grøn Polar',
+        geekblue: 'Nørd Blå'
+      },
+      darkMode: 'Mørke Tilstand',
+      layoutStyle: 'Navigation Tilstand',
+      sideMenuStyle: 'Sidemenu dobbeltmenu',
+      bodyFull: 'Krop Fuldskærm',
+      other: 'Anden Indstilling',
+      fixedHeader: 'Fast Overskrift',
+      fixedSidebar: 'Fast Sidebjælke',
+      fixedBody: 'Fast Krop',
+      logoAutoSize: 'Logo Tilpasning',
+      colorfulIcon: 'Farvestoffer Ikon',
+      sideUniqueOpen: 'Menu Unik Åbn',
+      weakMode: 'Svag Tilstand',
+      showFooter: 'Vis Foder',
+      showTabs: 'Vis Tabs',
+      tabStyle: 'Tab Stil',
+      tabStyles: {
+        default: 'Standard',
+        dot: 'Punkt',
+        card: 'KortName'
+      },
+      tips: 'Den vil huske din indstilling næste gang du åbner den.'
+    },
+    tableTools: {
+      refresh: 'Genopfrisk',
+      size: 'Tæthed',
+      sizeOption: {
+        large: 'Nemt',
+        medium: 'Standard',
+        small: 'Sekundær',
+        mini: 'Kompakt'
+      },
+      columns: 'Kolonner',
+      columnsOption: {
+        columns: 'Kolonner',
+        reset: 'Nulstil',
+        index: 'Tal',
+        selection: 'Valg',
+        untitled: 'Unavngivet'
+      },
+      fullscreen: 'FuldskærmName'
+    },
+    fileList: {
+      selectAll: 'Markér alle',
+      selectTips: 'Udvalgt {total} fil/mappe',
+      fileName: 'Navn',
+      fileSize: 'Størrelse',
+      fileTimestamp: 'Senest ændret'
+    },
+    cropper: {
+      zoomIn: 'Vergrößern',
+      zoomOut: 'Rauszoomen',
+      rotateLeft: 'RotérVenstre',
+      rotateRight: 'RotérHøjre',
+      moveLeft: 'FlytVenstre',
+      moveRight: 'FlytHøjre',
+      moveUp: 'FlytOp',
+      moveDown: 'FlytNed',
+      flipX: 'FlipX',
+      flipY: 'FlipY',
+      reset: 'Nulstil',
+      upload: 'Hochladen',
+      ok: 'OK',
+      title: 'Markør'
+    },
+    map: {
+      title: 'Adresse',
+      placeholder: 'Indtast søgeord',
+      message: 'Vælg venligst en adresse',
+      ok: 'OK'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/de_DE.js
+++ b/src/components/ele-admin-pro/packages/lang/de_DE.js
@@ -0,0 +1,113 @@
+/** 德语 */
+import lang from 'ant-design-vue/es/locale/de_DE';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'Aktualisieren',
+      fullscreen: 'Vollbild',
+      fullscreenExit: 'Vollbild',
+      closeLeft: 'Links Schließen',
+      closeRight: 'Rechtes Schließen',
+      closeOther: 'Andere Schließen',
+      closeAll: 'Alle Schließen'
+    },
+    setting: {
+      title: 'Designs Einstellung',
+      sideStyles: {
+        dark: 'Dunkle Seitenleiste',
+        light: 'Leichte Seitenleiste'
+      },
+      headStyles: {
+        light: 'Lichts Kopfzeile',
+        dark: 'Dunkler Kopfzeile',
+        primary: 'Primärer Kopfzeile'
+      },
+      layoutStyles: {
+        side: 'Seitenmenüs Layout',
+        top: 'Oben Menüs Layout',
+        mix: 'Mix Menü Layout'
+      },
+      colors: {
+        default: 'Blaue Morgendämmerung',
+        dust: 'Staub Blau',
+        sunset: 'Orange Sonnenuntergang',
+        volcano: 'Vulkan',
+        purple: 'Goldenes Purpur',
+        cyan: 'Cyan',
+        green: 'Polares Grün',
+        geekblue: 'Geek Blue'
+      },
+      darkMode: 'Dunkler Modus',
+      layoutStyle: 'Navigation Modus',
+      sideMenuStyle: 'Seitenleiste Doppelmenü',
+      bodyFull: 'Körper Vollbild',
+      other: 'Sonstige Einstellung',
+      fixedHeader: 'Feste Kopfzeile',
+      fixedSidebar: 'Feste Seitenleiste',
+      fixedBody: 'Feste Karosserie',
+      logoAutoSize: 'Logo Anpassung',
+      colorfulIcon: 'Farbiges Symbol',
+      sideUniqueOpen: 'Menü Einmaliges Öffnen',
+      weakMode: 'Schwacher Modus',
+      showFooter: 'Anzeigen Fußzeile',
+      showTabs: 'Anzeigen Tabulatoren',
+      tabStyle: 'Unterfenster Stil',
+      tabStyles: {
+        default: 'Standard',
+        dot: 'Punkt',
+        card: 'Karte'
+      },
+      tips: 'Sie wird sich beim nächsten Öffnen an Ihre Konfiguration erinnern.'
+    },
+    tableTools: {
+      refresh: 'Aktualisieren',
+      size: 'Dichte',
+      sizeOption: {
+        large: 'Ruhig',
+        medium: 'Standard',
+        small: 'Sekundär',
+        mini: 'Kompakt'
+      },
+      columns: 'Spalten',
+      columnsOption: {
+        columns: 'Spalten',
+        reset: 'Zurücksetzen',
+        index: 'Zahlen',
+        selection: 'Auswahl',
+        untitled: 'Ohne Titel'
+      },
+      fullscreen: 'Vollbild'
+    },
+    fileList: {
+      selectAll: 'AuswählenAlle',
+      selectTips: 'Ausgewählte {total} datei/verzeichnis',
+      fileName: 'Name',
+      fileSize: 'Größe',
+      fileTimestamp: 'ZuletztGeändert'
+    },
+    cropper: {
+      zoomIn: 'VergrößernIn',
+      zoomOut: 'VergrößernSie',
+      rotateLeft: 'DrehenLinks',
+      rotateRight: 'DrehenRechts',
+      moveLeft: 'BewegungLinks',
+      moveRight: 'BewegungRechts',
+      moveUp: 'BewegungHoch',
+      moveDown: 'BewegungUnten',
+      flipX: 'DrehenX',
+      flipY: 'DrehenY',
+      reset: 'Zurücksetzen',
+      upload: 'Hochladen',
+      ok: 'OK',
+      title: 'Cropper'
+    },
+    map: {
+      title: 'Adresse',
+      placeholder: 'Einträge filtern',
+      message: 'Bitte wählen Sie eine Adresse',
+      ok: 'OK'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/el_GR.js
+++ b/src/components/ele-admin-pro/packages/lang/el_GR.js
@@ -0,0 +1,113 @@
+/** 希腊语 */
+import lang from 'ant-design-vue/es/locale/el_GR';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'Ανανέωση',
+      fullscreen: 'Πλήρης οθόνη',
+      fullscreenExit: 'Πλήρης οθόνη',
+      closeLeft: 'Κλείσιμο Αριστερά',
+      closeRight: 'Κλείσιμο Σωστά',
+      closeOther: 'Κλείσιμο Άλλα',
+      closeAll: 'Κλείσιμο Όλα'
+    },
+    setting: {
+      title: 'Θέμα Ρύθμιση',
+      sideStyles: {
+        dark: 'Σκοτεινή Πλευρικό',
+        light: 'Ελαφρά Πλευρικό'
+      },
+      headStyles: {
+        light: 'Ελαφρά Κεφαλίδα',
+        dark: 'Σκοτεινή Κεφαλίδα',
+        primary: 'Κύρια Κεφαλίδα'
+      },
+      layoutStyles: {
+        side: 'Πλαίσιο μενού πλευρών',
+        top: 'Διάταξη άνω μενού',
+        mix: 'Ρύθμιση μενού Mix'
+      },
+      colors: {
+        default: 'Μπλε ξημέρωμα',
+        dust: 'Μπλε σκόνη',
+        sunset: 'Ηλιοβασίλεμα πορτοκάλι',
+        volcano: 'Ηφαίστειο',
+        purple: 'Χρυσό μωβ',
+        cyan: 'Κυανή',
+        green: 'Πολικό πράσινο',
+        geekblue: 'Κομπιουτεράκιας Μπλε'
+      },
+      darkMode: 'Σκοτεινή κατάσταση',
+      layoutStyle: 'Λειτουργία πλοήγησης',
+      sideMenuStyle: 'διπλό μενού',
+      bodyFull: 'Πλήρης οθόνη σώματος',
+      other: 'Άλλες ρυθμίσεις',
+      fixedHeader: 'Σταθερή επικεφαλίδα',
+      fixedSidebar: 'Σταθερή πλευρική γραμμή',
+      fixedBody: 'Σταθερό σώμα',
+      logoAutoSize: 'Προσαρμογή ημερολογίου',
+      colorfulIcon: 'Χρωματικό εικονίδιο',
+      sideUniqueOpen: 'Μοναδικό άνοιγμα μενού',
+      weakMode: 'Αδύναμη κατάσταση',
+      showFooter: 'Εμφάνιση υποδήματος',
+      showTabs: 'Εμφάνιση καρτελών',
+      tabStyle: 'Στυλ καρτελών',
+      tabStyles: {
+        default: 'Προκαθορισμένο',
+        dot: 'Ντοτ',
+        card: 'Κάρτα'
+      },
+      tips: 'Θα θυμάται τις ρυθμίσεις σας την επόμενη φορά που θα τις ανοίξετε.'
+    },
+    tableTools: {
+      refresh: 'Ανανέωση',
+      size: 'πυκνότητα',
+      sizeOption: {
+        large: 'Εύκολο',
+        medium: 'Προκαθορισμένο',
+        small: 'Δευτερογενής',
+        mini: 'Συμπίεση'
+      },
+      columns: 'Στήλες',
+      columnsOption: {
+        columns: 'Στήλες',
+        reset: 'Επαναφορά',
+        index: 'Αριθμοί',
+        selection: 'Επιλογή',
+        untitled: 'Χωρίς'
+      },
+      fullscreen: 'Πλήρης οθόνη'
+    },
+    fileList: {
+      selectAll: 'Επιλογή όλων',
+      selectTips: 'Επιλεγμένο {total} αρχείο/κατάλογος',
+      fileName: 'όνομα',
+      fileSize: 'Μέγεθος',
+      fileTimestamp: 'Τελευταία τροποποίηση'
+    },
+    cropper: {
+      zoomIn: 'Μεγέθυνση μέσα',
+      zoomOut: 'Μεγέθυνση έξω',
+      rotateLeft: 'Περιστροφή αριστερά',
+      rotateRight: 'Περιστροφή δεξιά',
+      moveLeft: 'Μετακίνηση αριστερά',
+      moveRight: 'Μετακίνηση δεξιά',
+      moveUp: 'Μετακίνηση πάνω',
+      moveDown: 'Μετακίνηση κάτω',
+      flipX: 'Αναστροφή X',
+      flipY: 'Αναστροφή Υ',
+      reset: 'Επαναφορά',
+      upload: 'Αποστολή',
+      ok: 'Εντάξει',
+      title: 'Θεριστής'
+    },
+    map: {
+      title: 'Διεύθυνση',
+      placeholder: 'Αναζήτηση',
+      message: 'Παρακαλώ επιλέξτε μια διεύθυνση',
+      ok: 'Εντάξει'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/en_GB.js
+++ b/src/components/ele-admin-pro/packages/lang/en_GB.js
@@ -0,0 +1,113 @@
+/** 英语 */
+import lang from 'ant-design-vue/es/locale/en_GB';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'Refresh',
+      fullscreen: 'Fullscreen',
+      fullscreenExit: 'Fullscreen',
+      closeLeft: 'Close Left',
+      closeRight: 'Close Right',
+      closeOther: 'Close Other',
+      closeAll: 'Close All'
+    },
+    setting: {
+      title: 'Theme Setting',
+      sideStyles: {
+        dark: 'Dark Sidebar',
+        light: 'Light Sidebar'
+      },
+      headStyles: {
+        light: 'Light Header',
+        dark: 'Dark Header',
+        primary: 'Primary Header'
+      },
+      layoutStyles: {
+        side: 'Side Menu Layout',
+        top: 'Top Menu Layout',
+        mix: 'Mix Menu Layout'
+      },
+      colors: {
+        default: 'Daybreak Blue',
+        dust: 'Dust Blue',
+        sunset: 'Sunset Orange',
+        volcano: 'Volcano',
+        purple: 'Golden Purple',
+        cyan: 'Cyan',
+        green: 'Polar Green',
+        geekblue: 'Geek Blue'
+      },
+      darkMode: 'Dark Mode',
+      layoutStyle: 'Navigation Mode',
+      sideMenuStyle: 'Sidebar Double Menu',
+      bodyFull: 'Body Fullscreen',
+      other: 'Other Setting',
+      fixedHeader: 'Fixed Header',
+      fixedSidebar: 'Fixed Sidebar',
+      fixedBody: 'Fixed Body',
+      logoAutoSize: 'Logo Adaptation',
+      colorfulIcon: 'Colorful Icon',
+      sideUniqueOpen: 'Menu Unique Open',
+      weakMode: 'Weak Mode',
+      showFooter: 'Show Footer',
+      showTabs: 'Show Tabs',
+      tabStyle: 'Tab Style',
+      tabStyles: {
+        default: 'Default',
+        dot: 'Dot',
+        card: 'Card'
+      },
+      tips: 'It will remember your configuration the next time you open it.'
+    },
+    tableTools: {
+      refresh: 'Refresh',
+      size: 'Density',
+      sizeOption: {
+        large: 'Easy',
+        medium: 'Default',
+        small: 'Secondary',
+        mini: 'Compact'
+      },
+      columns: 'Columns',
+      columnsOption: {
+        columns: 'Columns',
+        reset: 'Reset',
+        index: 'Numbers',
+        selection: 'Selection',
+        untitled: 'Untitled'
+      },
+      fullscreen: 'Fullscreen'
+    },
+    fileList: {
+      selectAll: 'SelectAll',
+      selectTips: 'Selected {total} file/directory',
+      fileName: 'Name',
+      fileSize: 'Size',
+      fileTimestamp: 'LastModified'
+    },
+    cropper: {
+      zoomIn: 'ZoomIn',
+      zoomOut: 'ZoomOut',
+      rotateLeft: 'RotateLeft',
+      rotateRight: 'RotateRight',
+      moveLeft: 'MoveLeft',
+      moveRight: 'MoveRight',
+      moveUp: 'MoveUp',
+      moveDown: 'MoveDown',
+      flipX: 'FlipX',
+      flipY: 'FlipY',
+      reset: 'Reset',
+      upload: 'Upload',
+      ok: 'OK',
+      title: 'Cropper'
+    },
+    map: {
+      title: 'Address',
+      placeholder: 'Enter keyword',
+      message: 'Please select an address',
+      ok: 'OK'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/en_US.js
+++ b/src/components/ele-admin-pro/packages/lang/en_US.js
@@ -0,0 +1,115 @@
+/** 英语 */
+import lang from 'ant-design-vue/es/locale/en_US';
+import ColorPicker from 'ant-design-vue/es/color-picker/locale/en_US.js';
+
+export default {
+  ColorPicker: ColorPicker,
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'Refresh',
+      fullscreen: 'Fullscreen',
+      fullscreenExit: 'Fullscreen',
+      closeLeft: 'Close Left',
+      closeRight: 'Close Right',
+      closeOther: 'Close Other',
+      closeAll: 'Close All'
+    },
+    setting: {
+      title: 'Theme Setting',
+      sideStyles: {
+        dark: 'Dark Sidebar',
+        light: 'Light Sidebar'
+      },
+      headStyles: {
+        light: 'Light Header',
+        dark: 'Dark Header',
+        primary: 'Primary Header'
+      },
+      layoutStyles: {
+        side: 'Side Menu Layout',
+        top: 'Top Menu Layout',
+        mix: 'Mix Menu Layout'
+      },
+      colors: {
+        default: 'Daybreak Blue',
+        dust: 'Dust Blue',
+        sunset: 'Sunset Orange',
+        volcano: 'Volcano',
+        purple: 'Golden Purple',
+        cyan: 'Cyan',
+        green: 'Polar Green',
+        geekblue: 'Geek Blue'
+      },
+      darkMode: 'Dark Mode',
+      layoutStyle: 'Navigation Mode',
+      sideMenuStyle: 'Sidebar Double Menu',
+      bodyFull: 'Body Fullscreen',
+      other: 'Other Setting',
+      fixedHeader: 'Fixed Header',
+      fixedSidebar: 'Fixed Sidebar',
+      fixedBody: 'Fixed Body',
+      logoAutoSize: 'Logo Adaptation',
+      colorfulIcon: 'Colorful Icon',
+      sideUniqueOpen: 'Menu Unique Open',
+      weakMode: 'Weak Mode',
+      showFooter: 'Show Footer',
+      showTabs: 'Show Tabs',
+      tabStyle: 'Tab Style',
+      tabStyles: {
+        default: 'Default',
+        dot: 'Dot',
+        card: 'Card'
+      },
+      tips: 'It will remember your configuration the next time you open it.'
+    },
+    tableTools: {
+      refresh: 'Refresh',
+      size: 'Density',
+      sizeOption: {
+        large: 'Easy',
+        medium: 'Default',
+        small: 'Secondary',
+        mini: 'Compact'
+      },
+      columns: 'Columns',
+      columnsOption: {
+        columns: 'Columns',
+        reset: 'Reset',
+        index: 'Numbers',
+        selection: 'Selection',
+        untitled: 'Untitled'
+      },
+      fullscreen: 'Fullscreen'
+    },
+    fileList: {
+      selectAll: 'SelectAll',
+      selectTips: 'Selected {total} file/directory',
+      fileName: 'Name',
+      fileSize: 'Size',
+      fileTimestamp: 'LastModified'
+    },
+    cropper: {
+      zoomIn: 'ZoomIn',
+      zoomOut: 'ZoomOut',
+      rotateLeft: 'RotateLeft',
+      rotateRight: 'RotateRight',
+      moveLeft: 'MoveLeft',
+      moveRight: 'MoveRight',
+      moveUp: 'MoveUp',
+      moveDown: 'MoveDown',
+      flipX: 'FlipX',
+      flipY: 'FlipY',
+      reset: 'Reset',
+      upload: 'Upload',
+      ok: 'OK',
+      title: 'Cropper'
+    },
+    map: {
+      title: 'Address',
+      placeholder: 'Enter keyword',
+      message: 'Please select an address',
+      ok: 'OK'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/es_ES.js
+++ b/src/components/ele-admin-pro/packages/lang/es_ES.js
@@ -0,0 +1,113 @@
+/** 西班牙语 */
+import lang from 'ant-design-vue/es/locale/es_ES';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'Refrescar',
+      fullscreen: 'Pantalla completa',
+      fullscreenExit: 'Pantalla completa',
+      closeLeft: 'Cerrar izquierdo',
+      closeRight: 'Cerrar derecho',
+      closeOther: 'Cerrar otro',
+      closeAll: 'Cerrar todas'
+    },
+    setting: {
+      title: 'Tema Configuración',
+      sideStyles: {
+        dark: 'Oscuro Barra',
+        light: 'Luz Barra'
+      },
+      headStyles: {
+        light: 'Luz Encabezado',
+        dark: 'Oscuro Encabezado',
+        primary: 'Principal Encabezado'
+      },
+      layoutStyles: {
+        side: 'Lateral Menú Diseño',
+        top: 'Principal Menú Diseño',
+        mix: 'Mix Menú Diseño'
+      },
+      colors: {
+        default: 'Amanecer Azul',
+        dust: 'Polvo Azul',
+        sunset: 'Atardecer Naranja',
+        volcano: 'Volcán',
+        purple: 'Dorado Morado',
+        cyan: 'Cian',
+        green: 'Polar Verde',
+        geekblue: 'Adicto Azul'
+      },
+      darkMode: 'Oscuro Modo',
+      layoutStyle: 'Navegación Modo',
+      sideMenuStyle: 'menú doble',
+      bodyFull: 'Cuerpo Pantalla Completa',
+      other: 'Otro Configuración',
+      fixedHeader: 'Reparado Encabezamiento',
+      fixedSidebar: 'Reparado Barra Lateral',
+      fixedBody: 'Reparado Cuerpo',
+      logoAutoSize: 'Logo Adaptación',
+      colorfulIcon: 'Vistoso Icono',
+      sideUniqueOpen: 'Menú Único Abierto',
+      weakMode: 'Débil Modo',
+      showFooter: 'Mostrar Pie De Página',
+      showTabs: 'Mostrar Pestaña',
+      tabStyle: 'Etiqueta Estilo',
+      tabStyles: {
+        default: 'Incumplimiento',
+        dot: 'Punto',
+        card: 'Tarjeta'
+      },
+      tips: 'La próxima vez que se abra, recordará su configuración.'
+    },
+    tableTools: {
+      refresh: 'Refrescar',
+      size: 'Densidad',
+      sizeOption: {
+        large: 'Fácil',
+        medium: 'Incumplimiento',
+        small: 'Secundaria',
+        mini: 'Contrato'
+      },
+      columns: 'Columna',
+      columnsOption: {
+        columns: 'Columna',
+        reset: 'Reiniciar',
+        index: 'Número',
+        selection: 'Selección',
+        untitled: 'Intitulado'
+      },
+      fullscreen: 'Pantalla Completa'
+    },
+    fileList: {
+      selectAll: 'Seleccionar Todo',
+      selectTips: 'Seleccionado {total} expediente/directorio',
+      fileName: 'Nombre',
+      fileSize: 'Tamaño',
+      fileTimestamp: 'Última Modificación'
+    },
+    cropper: {
+      zoomIn: 'Acercarse',
+      zoomOut: 'Encoger',
+      rotateLeft: 'Girar Izquierdo',
+      rotateRight: 'Girar Derecho',
+      moveLeft: 'Mover Izquierdo',
+      moveRight: 'Mover Derecho',
+      moveUp: 'Ascender',
+      moveDown: 'Bajar',
+      flipX: 'VoltearX',
+      flipY: 'VoltearY',
+      reset: 'Reiniciar',
+      upload: 'Subir',
+      ok: 'Confirmar',
+      title: 'Cultivador'
+    },
+    map: {
+      title: 'Dirección',
+      placeholder: 'Ingresar palabra clave',
+      message: 'Por favor seleccione una direccion',
+      ok: 'Confirmar'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/et_EE.js
+++ b/src/components/ele-admin-pro/packages/lang/et_EE.js
@@ -0,0 +1,113 @@
+/** 爱沙尼亚语 */
+import lang from 'ant-design-vue/es/locale/et_EE';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'Värskenda',
+      fullscreen: 'Täisekraan',
+      fullscreenExit: 'Täisekraan',
+      closeLeft: 'Sulge Vasakult',
+      closeRight: 'Sulge Paremal',
+      closeOther: 'Sulge Muu',
+      closeAll: 'Sulge Kõik'
+    },
+    setting: {
+      title: 'Teema Seadistamine',
+      sideStyles: {
+        dark: 'Tume Külgriba',
+        light: 'Hele Külgriba'
+      },
+      headStyles: {
+        light: 'Hele Päis',
+        dark: 'Tume Päis',
+        primary: 'Esmane Päis'
+      },
+      layoutStyles: {
+        side: 'Külg Menüü Paigutus',
+        top: 'Ülal Menüü Paigutus',
+        mix: 'Segu Menüü Paigutus'
+      },
+      colors: {
+        default: 'Koidiku Sinine',
+        dust: 'Mulla Sinine',
+        sunset: 'Päikeseloojangu Oranž',
+        volcano: 'Vulkaan',
+        purple: 'Kuldne Lilla',
+        cyan: 'Tsüaan',
+        green: 'Polar Roheline',
+        geekblue: 'Nohiku Sinine'
+      },
+      darkMode: 'Tume Režiim',
+      layoutStyle: 'Liikumise Režiim',
+      sideMenuStyle: 'Külgriba topeltmenüü',
+      bodyFull: 'Keha Täisekraan',
+      other: 'Muu Seadistus',
+      fixedHeader: 'Fikseeritud Päis',
+      fixedSidebar: 'Fikseeritud Külgriba',
+      fixedBody: 'Fikseeritud Kere',
+      logoAutoSize: 'Logo Kohandamine',
+      colorfulIcon: 'Värviline Ikoon',
+      sideUniqueOpen: 'Menüü Ainulaadne Avamine',
+      weakMode: 'Nõrk Režiim',
+      showFooter: 'Näita Jalust',
+      showTabs: 'Näita Kaarte',
+      tabStyle: 'Kaardi Stiil',
+      tabStyles: {
+        default: 'Vaikimisi',
+        dot: 'Punkt',
+        card: 'Kaart'
+      },
+      tips: 'See mäletab sinu seadistust, kui sa selle järgmine kord avad.'
+    },
+    tableTools: {
+      refresh: 'Värskenda',
+      size: 'Tihedus',
+      sizeOption: {
+        large: 'Rahulikult',
+        medium: 'Vaikimisi',
+        small: 'Sekundaarne',
+        mini: 'Tihe'
+      },
+      columns: 'Veerud',
+      columnsOption: {
+        columns: 'Veerud',
+        reset: 'Lähtesta',
+        index: 'Numbrid',
+        selection: 'Valik',
+        untitled: 'Nimetu'
+      },
+      fullscreen: 'Täisekraan'
+    },
+    fileList: {
+      selectAll: 'ValiKõik',
+      selectTips: 'Valitud {total} fail/kataloog',
+      fileName: 'Nimi',
+      fileSize: 'Suurus',
+      fileTimestamp: 'ViimatiMuudetud'
+    },
+    cropper: {
+      zoomIn: 'Suurendada',
+      zoomOut: 'Kitsas',
+      rotateLeft: 'Pööra vasakule',
+      rotateRight: 'Pöörake paremale',
+      moveLeft: 'Liigu vasakule',
+      moveRight: 'Liigu paremale',
+      moveUp: 'Üles liikuma',
+      moveDown: 'Liigu alla',
+      flipX: 'Klapp X',
+      flipY: 'Pöörake Y',
+      reset: 'Lähtesta',
+      upload: 'Üleslaadimine',
+      ok: 'OK',
+      title: 'Põllukultuurid'
+    },
+    map: {
+      title: 'Aadress',
+      placeholder: 'Sisesta märksõna',
+      message: 'Palun vali aadress',
+      ok: 'OK'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/fa_IR.js
+++ b/src/components/ele-admin-pro/packages/lang/fa_IR.js
@@ -0,0 +1,113 @@
+/** 波斯语 */
+import lang from 'ant-design-vue/es/locale/fa_IR';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'تازه کردن',
+      fullscreen: 'تمام صفحه',
+      fullscreenExit: 'تمام صفحه',
+      closeLeft: 'چپ را ببند',
+      closeRight: 'درست ببند',
+      closeOther: 'بستن دیگر',
+      closeAll: 'بستن همه'
+    },
+    setting: {
+      title: 'تنظیم تم',
+      sideStyles: {
+        dark: 'نوار کناری تاریک',
+        light: 'نوار کناری سبک'
+      },
+      headStyles: {
+        light: 'هدر نور',
+        dark: 'سربرگ تیره',
+        primary: 'هدر اصلی'
+      },
+      layoutStyles: {
+        side: 'طرح منوی کناری',
+        top: 'چیدمان منو',
+        mix: 'طرح منو را مخلوط کنید'
+      },
+      colors: {
+        default: 'آبی روشن',
+        dust: 'آبی غبار',
+        sunset: 'غروب نارنجی',
+        volcano: 'آتشفشان',
+        purple: 'بنفش طلایی',
+        cyan: 'فیروزه ای',
+        green: 'قطبی سبز',
+        geekblue: 'آبی گیک'
+      },
+      darkMode: 'حالت تاریک',
+      layoutStyle: 'حالت پیمایش',
+      sideMenuStyle: 'نوار کناری منوی دو',
+      bodyFull: 'تمام صفحه بدن',
+      other: 'تنظیمات دیگر',
+      fixedHeader: 'سرصفحه ثابت',
+      fixedSidebar: 'نوار کناری ثابت',
+      fixedBody: 'بدن ثابت',
+      logoAutoSize: 'سازگاری آرم',
+      colorfulIcon: 'نماد رنگارنگ',
+      sideUniqueOpen: 'منو منحصر به فرد باز',
+      weakMode: 'حالت ضعیف',
+      showFooter: 'نمایش پاورقی',
+      showTabs: 'نمایش برگه ها',
+      tabStyle: 'سبک زبانه',
+      tabStyles: {
+        default: 'پیش فرض',
+        dot: 'نقطه',
+        card: 'کارت'
+      },
+      tips: 'دفعه بعد که آن را باز کنید ، پیکربندی شما را به خاطر می آورد.'
+    },
+    tableTools: {
+      refresh: 'تازه کردن',
+      size: 'تراکم',
+      sizeOption: {
+        large: 'آسان',
+        medium: 'پیش فرض',
+        small: 'ثانوی',
+        mini: 'فشرده - جمع و جور'
+      },
+      columns: 'ستون ها',
+      columnsOption: {
+        columns: 'ستون ها',
+        reset: 'تنظیم مجدد',
+        index: 'شماره',
+        selection: 'انتخاب',
+        untitled: 'بدون عنوان'
+      },
+      fullscreen: 'تمام صفحه'
+    },
+    fileList: {
+      selectAll: 'انتخاب همه',
+      selectTips: 'انتخاب شد {total} فایل/فهرست راهنما',
+      fileName: 'نام',
+      fileSize: 'اندازه',
+      fileTimestamp: 'آخرین تغییر'
+    },
+    cropper: {
+      zoomIn: 'بزرگنمایی',
+      zoomOut: 'کوچک نمایی',
+      rotateLeft: 'چرخش به چپ',
+      rotateRight: 'به طرف راست بچرخان',
+      moveLeft: 'حرکت به سمت چپ',
+      moveRight: 'برو راست',
+      moveUp: 'حرکت به بالا',
+      moveDown: 'حرکت به پایین',
+      flipX: 'تلنگر X',
+      flipY: 'تلنگر Y',
+      reset: 'تنظیم مجدد',
+      upload: 'بارگذاری',
+      ok: 'باشد',
+      title: 'کراپ'
+    },
+    map: {
+      title: 'نشانی',
+      placeholder: 'کلید واژه هارو وارد کن',
+      message: 'لطفاً یک آدرس انتخاب کنید',
+      ok: 'باشد'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/fi_FI.js
+++ b/src/components/ele-admin-pro/packages/lang/fi_FI.js
@@ -0,0 +1,113 @@
+/** 芬兰语 */
+import lang from 'ant-design-vue/es/locale/fi_FI';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'virkistää',
+      fullscreen: 'Koko näyttö',
+      fullscreenExit: 'Koko näyttö',
+      closeLeft: 'Sulje Vasen',
+      closeRight: 'Sulje oikea',
+      closeOther: 'Sulje Muu',
+      closeAll: 'Sulje kaikki'
+    },
+    setting: {
+      title: 'Teeman asetus',
+      sideStyles: {
+        dark: 'Tumma sivupalkki',
+        light: 'Vaalea sivupalkki'
+      },
+      headStyles: {
+        light: 'Kevyt otsikko',
+        dark: 'Tumma otsikko',
+        primary: 'Ensisijainen otsikko'
+      },
+      layoutStyles: {
+        side: 'Sivuvalikon asettelu',
+        top: 'Ylävalikon asettelu',
+        mix: 'Sekoita valikon asettelu'
+      },
+      colors: {
+        default: 'Auringonnousu sininen',
+        dust: 'Pölysininen',
+        sunset: 'Auringonlasku oranssi',
+        volcano: 'Tulivuori',
+        purple: 'Kulta violetti',
+        cyan: 'Syaani',
+        green: 'Polaarivihreä',
+        geekblue: 'Geek sininen'
+      },
+      darkMode: 'Tumma tila',
+      layoutStyle: 'Navigointitila',
+      sideMenuStyle: 'Sivupalkin kaksoisvalikko',
+      bodyFull: 'Runko Koko näyttö',
+      other: 'Muu asetus',
+      fixedHeader: 'Kiinteä otsikko',
+      fixedSidebar: 'Kiinteä sivupalkki',
+      fixedBody: 'Kiinteä runko',
+      logoAutoSize: 'Logon mukauttaminen',
+      colorfulIcon: 'Värikäs kuvake',
+      sideUniqueOpen: 'Valikko Ainutlaatuinen auki',
+      weakMode: 'Heikko tila',
+      showFooter: 'Näytä alatunniste',
+      showTabs: 'Näytä välilehdet',
+      tabStyle: 'Välilehden tyyli',
+      tabStyles: {
+        default: 'Oletus',
+        dot: 'Piste',
+        card: 'Kortti'
+      },
+      tips: 'Se muistaa asetuksesi seuraavan kerran, kun avaat sen.'
+    },
+    tableTools: {
+      refresh: 'virkistää',
+      size: 'Tiheys',
+      sizeOption: {
+        large: 'Helppo',
+        medium: 'Oletus',
+        small: 'Toissijainen',
+        mini: 'Kompakti'
+      },
+      columns: 'Sarakkeet',
+      columnsOption: {
+        columns: 'Sarakkeet',
+        reset: 'Nollaa',
+        index: 'Numerot',
+        selection: 'Valinta',
+        untitled: 'Nimetön'
+      },
+      fullscreen: 'Koko näyttö'
+    },
+    fileList: {
+      selectAll: 'Valitse kaikki',
+      selectTips: 'Valittu {total} tiedosto/hakemistoon',
+      fileName: 'Nimi',
+      fileSize: 'Koko',
+      fileTimestamp: 'Viimeksi muokattu'
+    },
+    cropper: {
+      zoomIn: 'Lähennä',
+      zoomOut: 'Loitontaa',
+      rotateLeft: 'Käänny vasemmalle',
+      rotateRight: 'Kierrä oikealle',
+      moveLeft: 'Siirry vasemmalle',
+      moveRight: 'Liiku oikealle',
+      moveUp: 'Liiku ylös',
+      moveDown: 'Siirry alas',
+      flipX: 'Käännä X',
+      flipY: 'Käännä Y',
+      reset: 'Nollaa',
+      upload: 'Lähetä',
+      ok: 'OK',
+      title: 'Cropper'
+    },
+    map: {
+      title: 'Osoite',
+      placeholder: 'Syötä hakusana',
+      message: 'Valitse osoite',
+      ok: 'OK'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/fr_BE.js
+++ b/src/components/ele-admin-pro/packages/lang/fr_BE.js
@@ -0,0 +1,113 @@
+/** 法语（比利时） */
+import lang from 'ant-design-vue/es/locale/fr_BE';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'Rafraîchir',
+      fullscreen: 'Plein écran',
+      fullscreenExit: 'Plein écran',
+      closeLeft: 'Fermer à gauche',
+      closeRight: 'Fermer à droite',
+      closeOther: 'Fermer Autre',
+      closeAll: 'Ferme tout'
+    },
+    setting: {
+      title: 'Réglage du thème',
+      sideStyles: {
+        dark: 'Barre latérale sombre',
+        light: 'Barre latérale lumineuse'
+      },
+      headStyles: {
+        light: 'En-tête léger',
+        dark: 'En-tête sombre',
+        primary: 'En-tête principal'
+      },
+      layoutStyles: {
+        side: 'Disposition du menu latéral',
+        top: 'Disposition du menu supérieur',
+        mix: 'Disposition du menu de mixage'
+      },
+      colors: {
+        default: 'Bleu de l\'aube',
+        dust: 'Bleu poussière',
+        sunset: 'Orange coucher de soleil',
+        volcano: 'Volcan',
+        purple: 'Violet doré',
+        cyan: 'Cyan',
+        green: 'vert polaire',
+        geekblue: 'Geek Blue'
+      },
+      darkMode: 'Mode sombre',
+      layoutStyle: 'Mode de navigation',
+      sideMenuStyle: 'menu double',
+      bodyFull: 'Corps plein écran',
+      other: 'Autre cadre',
+      fixedHeader: 'En-tête fixe',
+      fixedSidebar: 'Barre latérale fixe',
+      fixedBody: 'Corps fixe',
+      logoAutoSize: 'Adaptation du logo',
+      colorfulIcon: 'Icône colorée',
+      sideUniqueOpen: 'Menu unique ouvert',
+      weakMode: 'mode faible',
+      showFooter: 'Afficher le pied de page',
+      showTabs: 'Afficher les onglets',
+      tabStyle: 'Style d\'onglet',
+      tabStyles: {
+        default: 'Défaut',
+        dot: 'Point',
+        card: 'Carte'
+      },
+      tips: 'Il se souviendra de votre configuration la prochaine fois que vous l\'ouvrirez.'
+    },
+    tableTools: {
+      refresh: 'Rafraîchir',
+      size: 'Densité',
+      sizeOption: {
+        large: 'Facile',
+        medium: 'Défaut',
+        small: 'Secondaire',
+        mini: 'Compact'
+      },
+      columns: 'Colonnes',
+      columnsOption: {
+        columns: 'Colonnes',
+        reset: 'Réinitialiser',
+        index: 'Nombres',
+        selection: 'Sélection',
+        untitled: 'Sans titre'
+      },
+      fullscreen: 'Plein écran'
+    },
+    fileList: {
+      selectAll: 'Tout sélectionner',
+      selectTips: 'Choisi {total} déposer/annuaire',
+      fileName: 'Nom',
+      fileSize: 'Taille',
+      fileTimestamp: 'Dernière modification'
+    },
+    cropper: {
+      zoomIn: 'Agrandir',
+      zoomOut: 'Dézoomer',
+      rotateLeft: 'Tourne à gauche',
+      rotateRight: 'Tourner à droite',
+      moveLeft: 'Se déplacer à gauche',
+      moveRight: 'Déplacer vers la droite',
+      moveUp: 'Déplacer vers le haut',
+      moveDown: 'Descendre',
+      flipX: 'Retourner X',
+      flipY: 'Retourner Y',
+      reset: 'Réinitialiser',
+      upload: 'Télécharger',
+      ok: 'OK',
+      title: 'Cropper'
+    },
+    map: {
+      title: 'Adresse',
+      placeholder: 'Entrer un mot clef',
+      message: 'Veuillez sélectionner une adresse',
+      ok: 'OK'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/fr_FR.js
+++ b/src/components/ele-admin-pro/packages/lang/fr_FR.js
@@ -0,0 +1,113 @@
+/** 法语 */
+import lang from 'ant-design-vue/es/locale/fr_FR';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'Rafraîchir',
+      fullscreen: 'Plein écran',
+      fullscreenExit: 'Plein écran',
+      closeLeft: 'Fermer à gauche',
+      closeRight: 'Fermer à droite',
+      closeOther: 'Fermer Autre',
+      closeAll: 'Ferme tout'
+    },
+    setting: {
+      title: 'Réglage du thème',
+      sideStyles: {
+        dark: 'Barre latérale sombre',
+        light: 'Barre latérale lumineuse'
+      },
+      headStyles: {
+        light: 'En-tête léger',
+        dark: 'En-tête sombre',
+        primary: 'En-tête principal'
+      },
+      layoutStyles: {
+        side: 'Disposition du menu latéral',
+        top: 'Disposition du menu supérieur',
+        mix: 'Disposition du menu de mixage'
+      },
+      colors: {
+        default: 'Bleu de l\'aube',
+        dust: 'Bleu poussière',
+        sunset: 'Orange coucher de soleil',
+        volcano: 'Volcan',
+        purple: 'Violet doré',
+        cyan: 'Cyan',
+        green: 'vert polaire',
+        geekblue: 'Geek Blue'
+      },
+      darkMode: 'Mode sombre',
+      layoutStyle: 'Mode de navigation',
+      sideMenuStyle: 'menu double',
+      bodyFull: 'Corps plein écran',
+      other: 'Autre cadre',
+      fixedHeader: 'En-tête fixe',
+      fixedSidebar: 'Barre latérale fixe',
+      fixedBody: 'Corps fixe',
+      logoAutoSize: 'Adaptation du logo',
+      colorfulIcon: 'Icône colorée',
+      sideUniqueOpen: 'Menu unique ouvert',
+      weakMode: 'mode faible',
+      showFooter: 'Afficher le pied de page',
+      showTabs: 'Afficher les onglets',
+      tabStyle: 'Style d\'onglet',
+      tabStyles: {
+        default: 'Défaut',
+        dot: 'Point',
+        card: 'Carte'
+      },
+      tips: 'Il se souviendra de votre configuration la prochaine fois que vous l\'ouvrirez.'
+    },
+    tableTools: {
+      refresh: 'Rafraîchir',
+      size: 'Densité',
+      sizeOption: {
+        large: 'Facile',
+        medium: 'Défaut',
+        small: 'Secondaire',
+        mini: 'Compact'
+      },
+      columns: 'Colonnes',
+      columnsOption: {
+        columns: 'Colonnes',
+        reset: 'Réinitialiser',
+        index: 'Nombres',
+        selection: 'Sélection',
+        untitled: 'Sans titre'
+      },
+      fullscreen: 'Plein écran'
+    },
+    fileList: {
+      selectAll: 'Tout sélectionner',
+      selectTips: 'Choisi {total} déposer/annuaire',
+      fileName: 'Nom',
+      fileSize: 'Taille',
+      fileTimestamp: 'Dernière modification'
+    },
+    cropper: {
+      zoomIn: 'Agrandir',
+      zoomOut: 'Dézoomer',
+      rotateLeft: 'Tourne à gauche',
+      rotateRight: 'Tourner à droite',
+      moveLeft: 'Se déplacer à gauche',
+      moveRight: 'Déplacer vers la droite',
+      moveUp: 'Déplacer vers le haut',
+      moveDown: 'Descendre',
+      flipX: 'Retourner X',
+      flipY: 'Retourner Y',
+      reset: 'Réinitialiser',
+      upload: 'Télécharger',
+      ok: 'OK',
+      title: 'Cropper'
+    },
+    map: {
+      title: 'Adresse',
+      placeholder: 'Entrer un mot clef',
+      message: 'Veuillez sélectionner une adresse',
+      ok: 'OK'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/ga_IE.js
+++ b/src/components/ele-admin-pro/packages/lang/ga_IE.js
@@ -0,0 +1,113 @@
+/** 爱尔兰语 */
+import lang from 'ant-design-vue/es/locale/ga_IE';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'athnuachan',
+      fullscreen: 'scáileán iomlán',
+      fullscreenExit: 'scáileán iomlán',
+      closeLeft: 'gar ar chlé',
+      closeRight: 'gar ar dheis',
+      closeOther: 'dún eile',
+      closeAll: 'dún gach'
+    },
+    setting: {
+      title: 'suíomh téama',
+      sideStyles: {
+        dark: 'barra taobh dorcha',
+        light: 'barra taobh éadrom'
+      },
+      headStyles: {
+        light: 'ceanntásc éadrom',
+        dark: 'ceanntásc dorcha',
+        primary: 'ceanntásc bunscoile'
+      },
+      layoutStyles: {
+        side: 'leagan amach an roghchláir taobh',
+        top: 'leagan amach barr an roghchláir',
+        mix: 'leagan amach an roghchláir a mheascadh'
+      },
+      colors: {
+        default: 'gorm lae',
+        dust: 'gorm deannaigh',
+        sunset: 'oráiste luí na gréine',
+        volcano: 'bolcán',
+        purple: 'corcra órga',
+        cyan: 'cian',
+        green: 'glas polach',
+        geekblue: 'gorm geek'
+      },
+      darkMode: 'modh dorcha',
+      layoutStyle: 'modh nascleanúna',
+      sideMenuStyle: 'Roghchlár Dúbailte Barra Taobh',
+      bodyFull: 'lánscáileán coirp',
+      other: 'suíomh eile',
+      fixedHeader: 'ceanntásc seasta',
+      fixedSidebar: 'barra taobh seasta',
+      fixedBody: 'comhlacht seasta',
+      logoAutoSize: 'oiriúnú lógó',
+      colorfulIcon: 'íocón ildaite',
+      sideUniqueOpen: 'roghchlár oscailte uathúil',
+      weakMode: 'modh lag',
+      showFooter: 'taispeáin buntásc',
+      showTabs: 'cluaisíní a thaispeáint',
+      tabStyle: 'stíl cluaisín',
+      tabStyles: {
+        default: 'réamhshocraithe',
+        dot: 'ponc',
+        card: 'cárta'
+      },
+      tips: 'cuimhneoidh sé ar do chumraíocht an chéad uair eile a osclóidh tú é.'
+    },
+    tableTools: {
+      refresh: 'athnuachan',
+      size: 'dlús',
+      sizeOption: {
+        large: 'éasca',
+        medium: 'réamhshocraithe',
+        small: 'tánaisteach',
+        mini: 'dlúth'
+      },
+      columns: 'colúin',
+      columnsOption: {
+        columns: 'colúin',
+        reset: 'athshocrú',
+        index: 'uimhreacha',
+        selection: 'roghnú',
+        untitled: 'gan ainm'
+      },
+      fullscreen: 'scáileán iomlán'
+    },
+    fileList: {
+      selectAll: 'roghnú go léir',
+      selectTips: 'roghnaithe {total} comhad/eolaire',
+      fileName: 'ainm',
+      fileSize: 'méid',
+      fileTimestamp: 'modhnaithe go deireanach'
+    },
+    cropper: {
+      zoomIn: 'zúmáil isteach',
+      zoomOut: 'súmáil amach',
+      rotateLeft: 'rothlú ar chlé',
+      rotateRight: 'rothlú ar dheis',
+      moveLeft: 'bog ar chlé',
+      moveRight: 'bogadh ar dheis',
+      moveUp: 'Éirí suas',
+      moveDown: 'bogadh síos',
+      flipX: 'smeach x',
+      flipY: 'smeach y',
+      reset: 'athshocrú',
+      upload: 'uaslódáil',
+      ok: 'OK',
+      title: 'cropper'
+    },
+    map: {
+      title: 'seoladh',
+      placeholder: 'cuir isteach eochairfhocal',
+      message: 'roghnaigh seoladh le do thoil',
+      ok: 'OK'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/he_IL.js
+++ b/src/components/ele-admin-pro/packages/lang/he_IL.js
@@ -0,0 +1,113 @@
+/** 希伯来语 */
+import lang from 'ant-design-vue/es/locale/he_IL';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'לְרַעֲנֵן',
+      fullscreen: 'מסך מלא',
+      fullscreenExit: 'מסך מלא',
+      closeLeft: 'סגור שמאל',
+      closeRight: 'סגור ימינה',
+      closeOther: 'סגור אחר',
+      closeAll: 'סגור הכל'
+    },
+    setting: {
+      title: 'הגדרת נושא',
+      sideStyles: {
+        dark: 'סרגל צדדי כהה',
+        light: 'סרגל צדדי קל'
+      },
+      headStyles: {
+        light: 'כותרת קלה',
+        dark: 'כותרת כהה',
+        primary: 'כותרת ראשית'
+      },
+      layoutStyles: {
+        side: 'פריסת תפריט צד',
+        top: 'פריסת התפריט העליון',
+        mix: 'פריסת תפריט מיקס'
+      },
+      colors: {
+        default: 'שחר כחול',
+        dust: 'אבק כחול',
+        sunset: 'תפוז שקיעה',
+        volcano: 'הַר גַעַשׁ',
+        purple: 'סגול זהוב',
+        cyan: 'טורקיז',
+        green: 'קוטב ירוק',
+        geekblue: 'חנון כחול'
+      },
+      darkMode: 'מצב כהה',
+      layoutStyle: 'מצב ניווט',
+      sideMenuStyle: 'תפריט כפול בסרגל הצדדי',
+      bodyFull: 'גוף מסך מלא',
+      other: 'הגדרה אחרת',
+      fixedHeader: 'כותרת קבועה',
+      fixedSidebar: 'סרגל צד קבוע',
+      fixedBody: 'גוף קבוע',
+      logoAutoSize: 'התאמת לוגו',
+      colorfulIcon: 'אייקון צבעוני',
+      sideUniqueOpen: 'תפריט ייחודי פתוח',
+      weakMode: 'מצב חלש',
+      showFooter: 'הצג כותרת תחתונה',
+      showTabs: 'הצג כרטיסיות',
+      tabStyle: 'סגנון טאב',
+      tabStyles: {
+        default: 'בְּרִירַת מֶחדָל',
+        dot: 'נְקוּדָה',
+        card: 'כַּרְטִיס'
+      },
+      tips: 'הוא יזכור את התצורה שלך בפעם הבאה שתפתח אותה.'
+    },
+    tableTools: {
+      refresh: 'לְרַעֲנֵן',
+      size: 'צְפִיפוּת',
+      sizeOption: {
+        large: 'קַל',
+        medium: 'בְּרִירַת מֶחדָל',
+        small: 'מִשׁנִי',
+        mini: 'קוֹמפָּקטִי'
+      },
+      columns: 'עמודות',
+      columnsOption: {
+        columns: 'עמודות',
+        reset: 'אִתחוּל',
+        index: 'מספרים',
+        selection: 'בְּחִירָה',
+        untitled: 'ללא כותרת'
+      },
+      fullscreen: 'מסך מלא'
+    },
+    fileList: {
+      selectAll: 'בחר הכל',
+      selectTips: 'נבחר {total} קוֹבֶץ/מַדרִיך',
+      fileName: 'שֵׁם',
+      fileSize: 'גודל',
+      fileTimestamp: 'שונה לאחרונה'
+    },
+    cropper: {
+      zoomIn: 'לְהִתְמַקֵד',
+      zoomOut: 'להקטין את התצוגה',
+      rotateLeft: 'סובב שמאלה',
+      rotateRight: 'לסובב ימינה',
+      moveLeft: 'זוז שמאלה',
+      moveRight: 'זוז ימינה',
+      moveUp: 'זוז למעלה',
+      moveDown: 'לרדת',
+      flipX: 'הפוך את X',
+      flipY: 'הפוך את Y',
+      reset: 'אִתחוּל',
+      upload: 'העלה',
+      ok: 'אישור',
+      title: 'קרופר'
+    },
+    map: {
+      title: 'כתובת',
+      placeholder: 'הקלד',
+      message: 'אנא בחר כתובת',
+      ok: 'אישור'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/hi_IN.js
+++ b/src/components/ele-admin-pro/packages/lang/hi_IN.js
@@ -0,0 +1,113 @@
+/** 印地语 */
+import lang from 'ant-design-vue/es/locale/hi_IN';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'ताज़ा करना',
+      fullscreen: 'पूर्ण स्क्रीन',
+      fullscreenExit: 'पूर्ण स्क्रीन',
+      closeLeft: 'बाईं ओर',
+      closeRight: 'सही पास',
+      closeOther: 'अन्य को बंद करें',
+      closeAll: 'सब बंद करें'
+    },
+    setting: {
+      title: 'विषय सेटिंग',
+      sideStyles: {
+        dark: 'डार्क साइडबार',
+        light: 'लाइट साइडबार'
+      },
+      headStyles: {
+        light: 'प्रकाश हैडर',
+        dark: 'डार्क हेडर',
+        primary: 'प्राथमिक शीर्षक'
+      },
+      layoutStyles: {
+        side: 'साइड मेनू लेआउट',
+        top: 'शीर्ष मेनू लेआउट',
+        mix: 'मिक्स मेनू लेआउट'
+      },
+      colors: {
+        default: 'दिन का नीला',
+        dust: 'धूल का नीला',
+        sunset: 'सूर्यास्त नारंगी',
+        volcano: 'ज्वर भाता',
+        purple: 'सुनहरा बैंगनी',
+        cyan: 'सियान',
+        green: 'ध्रुवीय हरा',
+        geekblue: 'geek नीला'
+      },
+      darkMode: 'डार्क मोड',
+      layoutStyle: 'नेविगेशन मोड',
+      sideMenuStyle: 'साइडबार डबल मेनू',
+      bodyFull: 'बॉडी फुलस्क्रीन',
+      other: 'अन्य सेटिंग',
+      fixedHeader: 'निश्चित शीर्षक',
+      fixedSidebar: 'तय साइडबार',
+      fixedBody: 'निश्चित शरीर',
+      logoAutoSize: 'लोगो का अनुकूलन',
+      colorfulIcon: 'रंगीन आइकन',
+      sideUniqueOpen: 'मेनू अद्वितीय खुला',
+      weakMode: 'कमजोर मोड',
+      showFooter: 'पाद दिखाना',
+      showTabs: 'टैब दिखाएं',
+      tabStyle: 'टैब शैली',
+      tabStyles: {
+        default: 'चूक',
+        dot: 'दूरसंचार विभाग',
+        card: 'कार्ड'
+      },
+      tips: 'अगली बार इसे खोलने पर यह आपके कॉन्फ़िगरेशन को याद रखेगा।'
+    },
+    tableTools: {
+      refresh: 'ताज़ा करना',
+      size: 'घनत्व',
+      sizeOption: {
+        large: 'आसान',
+        medium: 'चूक',
+        small: 'माध्यमिक',
+        mini: 'सघन'
+      },
+      columns: 'कॉलम',
+      columnsOption: {
+        columns: 'कॉलम',
+        reset: 'रीसेट',
+        index: 'नंबर',
+        selection: 'चयन',
+        untitled: 'शीर्षकहीन'
+      },
+      fullscreen: 'पूर्ण स्क्रीन'
+    },
+    fileList: {
+      selectAll: 'सभी का चयन करे',
+      selectTips: 'चयनित {total} फ़ाइल/निर्देशिका',
+      fileName: 'नाम',
+      fileSize: 'आकार',
+      fileTimestamp: 'अंतिम बार संशोधित'
+    },
+    cropper: {
+      zoomIn: 'ज़ूम इन',
+      zoomOut: 'ज़ूम आउट',
+      rotateLeft: 'बायीं तरफ',
+      rotateRight: 'दाएं घुमाएं',
+      moveLeft: 'बाएं खिसको',
+      moveRight: 'सही कदम',
+      moveUp: 'बढ़ाना',
+      moveDown: 'नीचे की ओर',
+      flipX: 'फ्लिप एक्स',
+      flipY: 'पलटें',
+      reset: 'रीसेट',
+      upload: 'डालना',
+      ok: 'निर्धारित',
+      title: 'कबूतर'
+    },
+    map: {
+      title: 'पता',
+      placeholder: 'कुंजीशब्द दर्ज करें',
+      message: 'कृपया एक पता चुनें',
+      ok: 'निर्धारित'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/hr_HR.js
+++ b/src/components/ele-admin-pro/packages/lang/hr_HR.js
@@ -0,0 +1,113 @@
+/** 克罗地亚 */
+import lang from 'ant-design-vue/es/locale/hr_HR';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'Osvježiti',
+      fullscreen: 'Puni zaslon',
+      fullscreenExit: 'Puni zaslon',
+      closeLeft: 'Zatvori lijevo',
+      closeRight: 'Zatvori desno',
+      closeOther: 'Zatvori Ostalo',
+      closeAll: 'Zatvori sve'
+    },
+    setting: {
+      title: 'Postavljanje teme',
+      sideStyles: {
+        dark: 'Tamna bočna traka',
+        light: 'Lagana bočna traka'
+      },
+      headStyles: {
+        light: 'Svjetlosno zaglavlje',
+        dark: 'Tamno zaglavlje',
+        primary: 'Primarno zaglavlje'
+      },
+      layoutStyles: {
+        side: 'Izgled bočnog izbornika',
+        top: 'Izgled gornjeg izbornika',
+        mix: 'Izmiješajte izgled izbornika'
+      },
+      colors: {
+        default: 'Zora plava',
+        dust: 'Prašina plava',
+        sunset: 'Sunset Orange',
+        volcano: 'Vulkan',
+        purple: 'Zlatnoljubičasta',
+        cyan: 'Cijan',
+        green: 'Polarno zelena',
+        geekblue: 'Geek Blue'
+      },
+      darkMode: 'Tamni način rada',
+      layoutStyle: 'Način navigacije',
+      sideMenuStyle: 'Dvostruki izbornik bočne trake',
+      bodyFull: 'Puni zaslon tijela',
+      other: 'Ostale postavke',
+      fixedHeader: 'Fiksno zaglavlje',
+      fixedSidebar: 'Fiksna bočna traka',
+      fixedBody: 'Fiksno tijelo',
+      logoAutoSize: 'Prilagođavanje logotipa',
+      colorfulIcon: 'Ikona u boji',
+      sideUniqueOpen: 'Izbornik Jedinstveno otvoren',
+      weakMode: 'Slabi način rada',
+      showFooter: 'Prikaži podnožje',
+      showTabs: 'Prikaži kartice',
+      tabStyle: 'Stil kartice',
+      tabStyles: {
+        default: 'Zadano',
+        dot: 'Točka',
+        card: 'Kartica'
+      },
+      tips: 'Sjetit će se vaše konfiguracije kad je sljedeći put otvorite.'
+    },
+    tableTools: {
+      refresh: 'Osvježiti',
+      size: 'Gustoća',
+      sizeOption: {
+        large: 'Lako',
+        medium: 'Zadano',
+        small: 'Sekundarni',
+        mini: 'Kompaktni'
+      },
+      columns: 'Stupci',
+      columnsOption: {
+        columns: 'Stupci',
+        reset: 'Resetirati',
+        index: 'Brojevi',
+        selection: 'Izbor',
+        untitled: 'Bez naslova'
+      },
+      fullscreen: 'Puni zaslon'
+    },
+    fileList: {
+      selectAll: 'Odaberi sve',
+      selectTips: 'Odabran {total} datoteka/imenik',
+      fileName: 'Ime',
+      fileSize: 'Veličina',
+      fileTimestamp: 'Zadnja promjena'
+    },
+    cropper: {
+      zoomIn: 'Povećaj',
+      zoomOut: 'Umanji',
+      rotateLeft: 'Rotirajte ulijevo',
+      rotateRight: 'Rotiraj udesno',
+      moveLeft: 'Pomakni se ulijevo',
+      moveRight: 'Pomaknuti se udesno',
+      moveUp: 'Pomakni se gore',
+      moveDown: 'Pomicati prema dolje',
+      flipX: 'Preokrenite X',
+      flipY: 'Preokrenite Y',
+      reset: 'Resetirati',
+      upload: 'Učitaj',
+      ok: 'OK',
+      title: 'Fijasko'
+    },
+    map: {
+      title: 'Adresa',
+      placeholder: 'Unesite ključnu riječ',
+      message: 'Odaberite adresu',
+      ok: 'OK'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/hu_HU.js
+++ b/src/components/ele-admin-pro/packages/lang/hu_HU.js
@@ -0,0 +1,113 @@
+/** 匈牙利语 */
+import lang from 'ant-design-vue/es/locale/hu_HU';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'Frissítés',
+      fullscreen: 'Teljes képernyő',
+      fullscreenExit: 'Teljes képernyő',
+      closeLeft: 'Bezárás balra',
+      closeRight: 'Bezárás jobbra',
+      closeOther: 'Zárja be az Egyéb elemet',
+      closeAll: 'Bezárja az összeset'
+    },
+    setting: {
+      title: 'Téma beállítása',
+      sideStyles: {
+        dark: 'Sötét oldalsáv',
+        light: 'Világos oldalsáv'
+      },
+      headStyles: {
+        light: 'Fényfejléc',
+        dark: 'Sötét fejléc',
+        primary: 'Elsődleges fejléc'
+      },
+      layoutStyles: {
+        side: 'Oldalsó menü elrendezése',
+        top: 'Felső menü elrendezése',
+        mix: 'Keverje össze a menüelrendezést'
+      },
+      colors: {
+        default: 'Hajnalban kék',
+        dust: 'Por kék',
+        sunset: 'Naplemente narancssárga',
+        volcano: 'Vulkán',
+        purple: 'Aranylila',
+        cyan: 'Cián',
+        green: 'Sarki zöld',
+        geekblue: 'Geek Blue'
+      },
+      darkMode: 'Sötét mód',
+      layoutStyle: 'Navigációs mód',
+      sideMenuStyle: 'Oldalsáv dupla menü',
+      bodyFull: 'Test teljes képernyős',
+      other: 'Egyéb beállítás',
+      fixedHeader: 'Fix fejléc',
+      fixedSidebar: 'Rögzített oldalsáv',
+      fixedBody: 'Rögzített test',
+      logoAutoSize: 'Logó adaptáció',
+      colorfulIcon: 'Színes ikonra',
+      sideUniqueOpen: 'Menü Egyedi Megnyitás',
+      weakMode: 'Gyenge mód',
+      showFooter: 'Lábléc megjelenítése',
+      showTabs: 'Fülek megjelenítése',
+      tabStyle: 'Tab stílus',
+      tabStyles: {
+        default: 'Alapértelmezett',
+        dot: 'Pont',
+        card: 'Kártya'
+      },
+      tips: 'A következő megnyitásakor emlékezni fog a konfigurációjára.'
+    },
+    tableTools: {
+      refresh: 'Frissítés',
+      size: 'Sűrűség',
+      sizeOption: {
+        large: 'Könnyen',
+        medium: 'Alapértelmezett',
+        small: 'Másodlagos',
+        mini: 'Kompakt'
+      },
+      columns: 'Oszlopok',
+      columnsOption: {
+        columns: 'Oszlopok',
+        reset: 'Visszaállítás',
+        index: 'Számok',
+        selection: 'Kiválasztás',
+        untitled: 'Névtelen'
+      },
+      fullscreen: 'Teljes képernyő'
+    },
+    fileList: {
+      selectAll: 'Mindet kiválaszt',
+      selectTips: 'Kiválasztott {total} fájl/Könyvtár',
+      fileName: 'Név',
+      fileSize: 'Méret',
+      fileTimestamp: 'Utoljára módosítva'
+    },
+    cropper: {
+      zoomIn: 'Ráközelíteni',
+      zoomOut: 'Kicsinyítés',
+      rotateLeft: 'Forgasd balra',
+      rotateRight: 'Forgasd jobbra',
+      moveLeft: 'Menj balra',
+      moveRight: 'Mozdulj jobbra',
+      moveUp: 'Haladj felfelé',
+      moveDown: 'Mozgás lefelé',
+      flipX: 'FlipX',
+      flipY: 'FlipY',
+      reset: 'Visszaállítás',
+      upload: 'Feltöltés',
+      ok: 'OK',
+      title: 'Posztónyíró'
+    },
+    map: {
+      title: 'Cím',
+      placeholder: 'Kulcsszó',
+      message: 'Válasszon címet',
+      ok: 'OK'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/hy_AM.js
+++ b/src/components/ele-admin-pro/packages/lang/hy_AM.js
@@ -0,0 +1,113 @@
+/** 亚美尼亚语 */
+import lang from 'ant-design-vue/es/locale/hy_AM';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'Թարմացնել',
+      fullscreen: 'Ամբողջ էկրան',
+      fullscreenExit: 'Ամբողջ էկրան',
+      closeLeft: 'Փակել ձախը',
+      closeRight: 'Փակել աջ',
+      closeOther: 'Փակել այլ',
+      closeAll: 'Փակել բոլորը'
+    },
+    setting: {
+      title: 'Թեմայի կարգավորում',
+      sideStyles: {
+        dark: 'Մութ կողային տող',
+        light: 'Թեթև կողային տող'
+      },
+      headStyles: {
+        light: 'Լույսի վերնագիր',
+        dark: 'Մուգ վերնագիր',
+        primary: 'Հիմնական վերնագիր'
+      },
+      layoutStyles: {
+        side: 'Կողային ընտրացանկի դասավորություն',
+        top: 'Topանկի լավագույն դասավորությունը',
+        mix: 'Խառնել ընտրացանկի դասավորությունը'
+      },
+      colors: {
+        default: 'Լուսաբաց կապույտ',
+        dust: 'Փոշի կապույտ',
+        sunset: 'Մայրամուտ նարնջագույն',
+        volcano: 'Հրաբուխ',
+        purple: 'Ոսկե մանուշակագույն',
+        cyan: 'Կապույտ',
+        green: 'Բեւեռային կանաչ',
+        geekblue: 'Geek Blue'
+      },
+      darkMode: 'Մութ ռեժիմ',
+      layoutStyle: 'Նավիգացիոն ռեժիմ',
+      sideMenuStyle: 'Կողային երկակի ընտրացանկ',
+      bodyFull: 'Մարմնի ամբողջ էկրան',
+      other: 'Այլ պարամետրեր',
+      fixedHeader: 'Ֆիքսված վերնագիր',
+      fixedSidebar: 'Ֆիքսված կողային տող',
+      fixedBody: 'Հաստատուն մարմին',
+      logoAutoSize: 'Լոգոյի հարմարեցում',
+      colorfulIcon: 'Գունագեղ պատկերակ',
+      sideUniqueOpen: 'Uաշացանկը եզակի բաց է',
+      weakMode: 'Թույլ ռեժիմ',
+      showFooter: 'Footույց տալ ստորագիր',
+      showTabs: 'Showուցադրել ներդիրները',
+      tabStyle: 'Տաբ ոճը',
+      tabStyles: {
+        default: 'Լռելյայն',
+        dot: 'Կետ',
+        card: 'Քարտ'
+      },
+      tips: 'Այն կհիշի ձեր կազմաձևը հաջորդ անգամ, երբ այն բացեք:'
+    },
+    tableTools: {
+      refresh: 'Թարմացնել',
+      size: 'Խտություն',
+      sizeOption: {
+        large: 'Հեշտ',
+        medium: 'Լռելյայն',
+        small: 'Երկրորդական',
+        mini: 'Կոմպակտ'
+      },
+      columns: 'Սյունակներ',
+      columnsOption: {
+        columns: 'Սյունակներ',
+        reset: 'Վերականգնել',
+        index: 'Համարներ',
+        selection: 'Ընտրություն',
+        untitled: 'Անվերնագիր'
+      },
+      fullscreen: 'Ամբողջ էկրան'
+    },
+    fileList: {
+      selectAll: 'Ընտրել բոլորը',
+      selectTips: 'Ընտրված է {total} ֆայլ/գրացուցակ',
+      fileName: 'Անուն',
+      fileSize: 'Չափը',
+      fileTimestamp: 'Վերջին փոփոխված'
+    },
+    cropper: {
+      zoomIn: 'Խոշորացնել. մոտեցնել',
+      zoomOut: 'Մանրացնել',
+      rotateLeft: 'Պտտեք ձախ',
+      rotateRight: 'Պտտեք աջ',
+      moveLeft: 'Շարժվիր ձախ',
+      moveRight: 'Շարժվել աջ',
+      moveUp: 'Վեր շարժվեք',
+      moveDown: 'Իջնել',
+      flipX: 'Մատով խփել',
+      flipY: 'Մատով խփել',
+      reset: 'Վերականգնել',
+      upload: 'Վերբեռնել',
+      ok: 'Լաւ',
+      title: 'Կտրող'
+    },
+    map: {
+      title: 'Հասցե',
+      placeholder: 'Մուտքագրեք բանալի բառ',
+      message: 'Խնդրում ենք ընտրել հասցե',
+      ok: 'Լաւ'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/id_ID.js
+++ b/src/components/ele-admin-pro/packages/lang/id_ID.js
@@ -0,0 +1,113 @@
+/** 印尼语 */
+import lang from 'ant-design-vue/es/locale/id_ID';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'Menyegarkan',
+      fullscreen: 'Layar penuh',
+      fullscreenExit: 'Layar penuh',
+      closeLeft: 'Tutup Kiri',
+      closeRight: 'Tutup Kanan',
+      closeOther: 'Tutup Lainnya',
+      closeAll: 'Tutup semua'
+    },
+    setting: {
+      title: 'Pengaturan Tema',
+      sideStyles: {
+        dark: 'Sidebar Gelap',
+        light: 'Sidebar Cahaya'
+      },
+      headStyles: {
+        light: 'Header Cahaya',
+        dark: 'Header Gelap',
+        primary: 'Header Utama'
+      },
+      layoutStyles: {
+        side: 'Tata Letak Menu Samping',
+        top: 'Tata Letak Menu Atas',
+        mix: 'Tata Letak Menu Campuran'
+      },
+      colors: {
+        default: 'Fajar Biru',
+        dust: 'Debu Biru',
+        sunset: 'Matahari Terbenam Jeruk',
+        volcano: 'Gunung Berapi',
+        purple: 'Keemasan Ungu',
+        cyan: 'Cyan',
+        green: 'Kutub Hijau',
+        geekblue: 'Geek Biru'
+      },
+      darkMode: 'Mode Gelap',
+      layoutStyle: 'Mode Navigasi',
+      sideMenuStyle: 'Menu ganda bilah sisi',
+      bodyFull: 'Layar Penuh Tubuh',
+      other: 'Pengaturan Lainnya',
+      fixedHeader: 'Header Tetap',
+      fixedSidebar: 'Sidebar Tetap',
+      fixedBody: 'Tubuh Tetap',
+      logoAutoSize: 'Adaptasi Logo',
+      colorfulIcon: 'Ikon Berwarna-warni',
+      sideUniqueOpen: 'Menu Unik Terbuka',
+      weakMode: 'Mode Lemah',
+      showFooter: 'Tunjukkan Footer',
+      showTabs: 'Tampilkan Tab',
+      tabStyle: 'Gaya Tab',
+      tabStyles: {
+        default: 'Default',
+        dot: 'Dot',
+        card: 'Kartu'
+      },
+      tips: 'Ini akan mengingat konfigurasi Anda saat Anda membukanya lagi.'
+    },
+    tableTools: {
+      refresh: 'Menyegarkan',
+      size: 'Massa jenis',
+      sizeOption: {
+        large: 'Mudah',
+        medium: 'Default',
+        small: 'Sekunder',
+        mini: 'Kompak'
+      },
+      columns: 'Kolom',
+      columnsOption: {
+        columns: 'Kolom',
+        reset: 'Setel ulang',
+        index: 'Angka',
+        selection: 'Pilihan',
+        untitled: 'Tanpa judul'
+      },
+      fullscreen: 'Layar penuh'
+    },
+    fileList: {
+      selectAll: 'Pilih Semua',
+      selectTips: 'Terpilih {total} mengajukan/direktori',
+      fileName: 'Nama',
+      fileSize: 'Ukuran',
+      fileTimestamp: 'Terakhir Diubah'
+    },
+    cropper: {
+      zoomIn: 'Perbesar',
+      zoomOut: 'Perkecil',
+      rotateLeft: 'Putar ke Kiri',
+      rotateRight: 'Putar ke kanan',
+      moveLeft: 'Pindah ke Kiri',
+      moveRight: 'Bergerak ke kanan',
+      moveUp: 'Pindah ke Atas',
+      moveDown: 'Turunkan',
+      flipX: 'Balik X',
+      flipY: 'Balik Y',
+      reset: 'Setel ulang',
+      upload: 'Unggah',
+      ok: 'Pilih',
+      title: 'Keruntuhan'
+    },
+    map: {
+      title: 'Alamat',
+      placeholder: 'Masukan kata kunci',
+      message: 'Silakan pilih sebuah alamat',
+      ok: 'Pilih'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/is_IS.js
+++ b/src/components/ele-admin-pro/packages/lang/is_IS.js
@@ -0,0 +1,113 @@
+/** 冰岛语 */
+import lang from 'ant-design-vue/es/locale/is_IS';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'hressa',
+      fullscreen: 'fullskjár',
+      fullscreenExit: 'fullskjár',
+      closeLeft: 'loka til vinstri',
+      closeRight: 'loka rétt',
+      closeOther: 'loka öðru',
+      closeAll: 'loka öllum'
+    },
+    setting: {
+      title: 'þema stilling',
+      sideStyles: {
+        dark: 'dökk hliðarrönd',
+        light: 'létt skenkur'
+      },
+      headStyles: {
+        light: 'létt haus',
+        dark: 'dökkur haus',
+        primary: 'aðal haus'
+      },
+      layoutStyles: {
+        side: 'hliðarmatseðli',
+        top: 'toppvalmyndarskipulag',
+        mix: 'blanda matseðill skipulag'
+      },
+      colors: {
+        default: 'dögun blár',
+        dust: 'rykblátt',
+        sunset: 'sólarlag appelsínugult',
+        volcano: 'eldfjall',
+        purple: 'gullfjólublátt',
+        cyan: 'blágrænt',
+        green: 'skautgrænn',
+        geekblue: 'gáfaður blár'
+      },
+      darkMode: 'dökk háttur',
+      layoutStyle: 'leiðsöguhamur',
+      sideMenuStyle: 'Tvöfaldur valmynd hliðarstiku',
+      bodyFull: 'líkami fullskjár',
+      other: 'önnur stilling',
+      fixedHeader: 'fastur haus',
+      fixedSidebar: 'föst skenkur',
+      fixedBody: 'fastur líkami',
+      logoAutoSize: 'aðlögun lógósins',
+      colorfulIcon: 'litríkt tákn',
+      sideUniqueOpen: 'matseðill einstakur opinn',
+      weakMode: 'veikur háttur',
+      showFooter: 'sýna fót',
+      showTabs: 'sýna flipa',
+      tabStyle: 'flipastíl',
+      tabStyles: {
+        default: 'sjálfgefið',
+        dot: 'punktur',
+        card: 'Spil'
+      },
+      tips: 'það muna stillingar þínar næst þegar þú opnar það.'
+    },
+    tableTools: {
+      refresh: 'hressa',
+      size: 'þéttleiki',
+      sizeOption: {
+        large: 'auðvelt',
+        medium: 'sjálfgefið',
+        small: 'aukaatriði',
+        mini: 'samningur'
+      },
+      columns: 'dálkar',
+      columnsOption: {
+        columns: 'dálkar',
+        reset: 'endurstilla',
+        index: 'tölur',
+        selection: 'val',
+        untitled: 'án titils'
+      },
+      fullscreen: 'fullskjár'
+    },
+    fileList: {
+      selectAll: 'velja allt',
+      selectTips: 'valinn {total} skjal/Skrá',
+      fileName: 'nafn',
+      fileSize: 'stærð',
+      fileTimestamp: 'síðast breytt'
+    },
+    cropper: {
+      zoomIn: 'þysja inn',
+      zoomOut: 'þysja út',
+      rotateLeft: 'snúið til vinstri',
+      rotateRight: 'snúið til hægri',
+      moveLeft: 'færa til vinstri',
+      moveRight: 'hreyfðu þig til hægri',
+      moveUp: 'fara upp',
+      moveDown: 'færa sig niður',
+      flipX: 'flettu x',
+      flipY: 'flettu y',
+      reset: 'endurstilla',
+      upload: 'hlaða upp',
+      ok: 'OK',
+      title: 'cropper'
+    },
+    map: {
+      title: 'heimilisfang',
+      placeholder: 'sláðu inn leitarorð',
+      message: 'vinsamlegast veldu heimilisfang',
+      ok: 'OK'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/it_IT.js
+++ b/src/components/ele-admin-pro/packages/lang/it_IT.js
@@ -0,0 +1,113 @@
+/** 意大利语 */
+import lang from 'ant-design-vue/es/locale/it_IT';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'ricaricare',
+      fullscreen: 'A schermo intero',
+      fullscreenExit: 'A schermo intero',
+      closeLeft: 'Chiudi a sinistra',
+      closeRight: 'Chiudi a destra',
+      closeOther: 'Chiudi altro',
+      closeAll: 'Chiudi tutto'
+    },
+    setting: {
+      title: 'Impostazione del tema',
+      sideStyles: {
+        dark: 'Buio Sidebar',
+        light: 'Leggero Sidebar'
+      },
+      headStyles: {
+        light: 'Intestazione leggera',
+        dark: 'Intestazione scura',
+        primary: 'Intestazione primaria'
+      },
+      layoutStyles: {
+        side: 'Laterale Menu Layout',
+        top: 'Superiore Menu Layout',
+        mix: 'Mix Menu Layout'
+      },
+      colors: {
+        default: 'Daybreak Blu',
+        dust: 'Polvere Blu',
+        sunset: 'Tramonto Arancia',
+        volcano: 'Vulcano',
+        purple: 'D\'oro Viola',
+        cyan: 'Ciano',
+        green: 'Polare Verde',
+        geekblue: 'Geek Blu'
+      },
+      darkMode: 'Modalità scura',
+      layoutStyle: 'Modalità di navigazione',
+      sideMenuStyle: 'Doppio menù sidebar',
+      bodyFull: 'Corpo a schermo intero',
+      other: 'Altre impostazioni',
+      fixedHeader: 'Intestazione fissa',
+      fixedSidebar: 'Barra laterale fissa',
+      fixedBody: 'Corpo fisso',
+      logoAutoSize: 'Adattamento del logo',
+      colorfulIcon: 'Icona colorata',
+      sideUniqueOpen: 'Menu unico aperto',
+      weakMode: 'Modalità debole',
+      showFooter: 'Mostra piè di pagina',
+      showTabs: 'Mostra schede',
+      tabStyle: 'Stile scheda',
+      tabStyles: {
+        default: 'Predefinito',
+        dot: 'Punto',
+        card: 'Carta'
+      },
+      tips: 'Ricorderà la tua configurazione la prossima volta che lo aprirai.'
+    },
+    tableTools: {
+      refresh: 'Ricaricare',
+      size: 'Densità',
+      sizeOption: {
+        large: 'Facile',
+        medium: 'Predefinito',
+        small: 'Secondario',
+        mini: 'Compatto'
+      },
+      columns: 'Colonne',
+      columnsOption: {
+        columns: 'Colonne',
+        reset: 'Ripristina',
+        index: 'Numeri',
+        selection: 'Selezione',
+        untitled: 'Senza titolo'
+      },
+      fullscreen: 'Schermo intero'
+    },
+    fileList: {
+      selectAll: 'Seleziona tutto',
+      selectTips: 'Selezionato {total} file/directory',
+      fileName: 'Nome',
+      fileSize: 'Dimensione',
+      fileTimestamp: 'Ultima modifica'
+    },
+    cropper: {
+      zoomIn: 'Ingrandire',
+      zoomOut: 'Zoom indietro',
+      rotateLeft: 'Gira a sinistra',
+      rotateRight: 'Ruota a destra',
+      moveLeft: 'Muovere a sinistra',
+      moveRight: 'Vai a destra',
+      moveUp: 'Andare avanti',
+      moveDown: 'Abbassati',
+      flipX: 'Capovolgi X',
+      flipY: 'Capovolgi Y',
+      reset: 'Ripristina',
+      upload: 'Caricare',
+      ok: 'OK',
+      title: 'Cropper'
+    },
+    map: {
+      title: 'Indirizzo',
+      placeholder: 'Inserisci filtro',
+      message: 'Seleziona un indirizzo',
+      ok: 'OK'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/ja_JP.js
+++ b/src/components/ele-admin-pro/packages/lang/ja_JP.js
@@ -0,0 +1,114 @@
+/** 日语 */
+import lang from 'ant-design-vue/es/locale/ja_JP';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: '現在を更新',
+      fullscreen: 'フルスクリーン',
+      fullscreenExit: 'フルスクリーン',
+      closeLeft: '左を閉じる',
+      closeRight: '右側を閉じる',
+      closeOther: 'その他を閉じる',
+      closeAll: 'すべてを閉じる'
+    },
+    setting: {
+      title: 'テーマの設定',
+      sideStyles: {
+        dark: '暗いサイドバー',
+        light: '明るいサイドバー'
+      },
+      headStyles: {
+        light: '明るいトップバー',
+        dark: '暗いトップバー',
+        primary: 'カラートップバー'
+      },
+      layoutStyles: {
+        side: '左メニューレイアウト',
+        top: 'トップメニューレイアウト',
+        mix: 'ミックスメニューレイアウト'
+      },
+      colors: {
+        default: '明けの空',
+        dust: '夕暮れ',
+        sunset: '日が暮れる',
+        volcano: '火山',
+        purple: '濃い紫色',
+        cyan: '明るい青',
+        green: '极光绿',
+        geekblue: '极客蓝'
+      },
+      darkMode: '暗黒モード',
+      layoutStyle: 'ナビゲーションモード',
+      sideMenuStyle: 'サイドバーダブルメニュー',
+      bodyFull: '内容がしきつめる',
+      other: 'その他の設定',
+      fixedHeader: 'トップバーを固定',
+      fixedSidebar: 'サイドバーを固定する',
+      fixedBody: '本体を固定する',
+      logoAutoSize: 'Logo幅適応',
+      colorfulIcon: 'カラーバーのアイコン',
+      sideUniqueOpen: '横の列を彼が広げます',
+      weakMode: '色弱モード',
+      showFooter: 'グローバルフッタ',
+      showTabs: '複数ページの欄',
+      tabStyle: 'ページスタイル',
+      tabStyles: {
+        default: 'デフォルト',
+        dot: '円点',
+        card: 'カード'
+      },
+      tips: '修正後はローカルにキャッシュされます。今度はテーマ設定を記憶します。'
+    },
+    tableTools: {
+      refresh: '更新',
+      size: '密度',
+      sizeOption: {
+        large: '緩い',
+        medium: 'デフォルト',
+        small: '中ぐらい',
+        mini: 'コンパクト'
+      },
+      columns: '列の設定',
+      columnsOption: {
+        columns: '列の展示',
+        reset: 'リセット',
+        index: '番号付け',
+        selection: '列を選択',
+        untitled: 'タイトルなし'
+      },
+      fullscreen: 'フルスクリーン',
+
+    },
+    fileList: {
+      selectAll: 'すべて選択',
+      selectTips: '選択されました {total} ファイル/フォルダ',
+      fileName: '名前',
+      fileSize: 'サイズ',
+      fileTimestamp: '変更日'
+    },
+    cropper: {
+      zoomIn: '拡大',
+      zoomOut: '縮小',
+      rotateLeft: '左に回る',
+      rotateRight: '右に回転',
+      moveLeft: '左に移動',
+      moveRight: '右に移動',
+      moveUp: '上へ移動',
+      moveDown: '下に移動',
+      flipX: '左右反転',
+      flipY: '上下反転',
+      reset: '新たに始める',
+      upload: '画像を選択',
+      ok: '確認',
+      title: '画像を切り取り'
+    },
+    map: {
+      title: '場所を選択',
+      placeholder: 'キーワードを入力',
+      message: 'リストの選択位置をクリックしてください',
+      ok: '確認'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/kn_IN.js
+++ b/src/components/ele-admin-pro/packages/lang/kn_IN.js
@@ -0,0 +1,113 @@
+/** 卡纳达语 */
+import lang from 'ant-design-vue/es/locale/kn_IN';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'ರಿಫ್ರೆಶ್ ಮಾಡಿ',
+      fullscreen: 'ಪೂರ್ಣ ಪರದೆ',
+      fullscreenExit: 'ಪೂರ್ಣ ಪರದೆ',
+      closeLeft: 'ಎಡಕ್ಕೆ ಮುಚ್ಚಿ',
+      closeRight: 'ಬಲಕ್ಕೆ ಮುಚ್ಚಿ',
+      closeOther: 'ಇತರ ಮುಚ್ಚಿ',
+      closeAll: 'ಎಲ್ಲವನ್ನೂ ಮುಚ್ಚಿ'
+    },
+    setting: {
+      title: 'ಥೀಮ್ ಸೆಟ್ಟಿಂಗ್',
+      sideStyles: {
+        dark: 'ಡಾರ್ಕ್ ಸೈಡ್ಬಾರ್',
+        light: 'ಬೆಳಕಿನ ಸೈಡ್ಬಾರ್'
+      },
+      headStyles: {
+        light: 'ಬೆಳಕಿನ ಹೆಡರ್',
+        dark: 'ಡಾರ್ಕ್ ಹೆಡರ್',
+        primary: 'ಪ್ರಾಥಮಿಕ ಹೆಡರ್'
+      },
+      layoutStyles: {
+        side: 'ಸೈಡ್ ಮೆನು ವಿನ್ಯಾಸ',
+        top: 'ಉನ್ನತ ಮೆನು ವಿನ್ಯಾಸ',
+        mix: 'ಮಿಶ್ರಣ ಮೆನು ವಿನ್ಯಾಸ'
+      },
+      colors: {
+        default: 'ಹಗಲು ನೀಲಿ',
+        dust: 'ಧೂಳು ನೀಲಿ',
+        sunset: 'ಸೂರ್ಯಾಸ್ತ ಕಿತ್ತಳೆ',
+        volcano: 'ಜ್ವಾಲಾಮುಖಿ',
+        purple: 'ಚಿನ್ನದ ನೇರಳೆ',
+        cyan: 'ಸಯಾನ್',
+        green: 'ಧ್ರುವ ಹಸಿರು',
+        geekblue: 'ಗೀಕ್ ನೀಲಿ'
+      },
+      darkMode: 'ಡಾರ್ಕ್ ಮೋಡ್',
+      layoutStyle: 'ನ್ಯಾವಿಗೇಷನ್ ಮೋಡ್',
+      sideMenuStyle: 'ಸೈಡ್ಬಾರ್ ಡಬಲ್ ಮೆನು',
+      bodyFull: 'ದೇಹದ ಪೂರ್ಣ ಪರದೆ',
+      other: 'ಇತರ ಸೆಟ್ಟಿಂಗ್',
+      fixedHeader: 'ಸ್ಥಿರ ಹೆಡರ್',
+      fixedSidebar: 'ಸ್ಥಿರ ಸೈಡ್ಬಾರ್',
+      fixedBody: 'ಸ್ಥಿರ ದೇಹ',
+      logoAutoSize: 'ಲೋಗೋ ರೂಪಾಂತರ',
+      colorfulIcon: 'ವರ್ಣರಂಜಿತ ಐಕಾನ್',
+      sideUniqueOpen: 'ಮೆನು ಅನನ್ಯವಾಗಿದೆ',
+      weakMode: 'ದುರ್ಬಲ ಮೋಡ್',
+      showFooter: 'ಅಡಿಟಿಪ್ಪಣಿ ತೋರಿಸಿ',
+      showTabs: 'ಟ್ಯಾಬ್‌ಗಳನ್ನು ತೋರಿಸಿ',
+      tabStyle: 'ಟ್ಯಾಬ್ ಶೈಲಿ',
+      tabStyles: {
+        default: 'ಡೀಫಾಲ್ಟ್',
+        dot: 'ಡಾಟ್',
+        card: 'ಕಾರ್ಡ್'
+      },
+      tips: 'ಮುಂದಿನ ಬಾರಿ ನೀವು ಅದನ್ನು ತೆರೆದಾಗ ಅದು ನಿಮ್ಮ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ನೆನಪಿಸುತ್ತದೆ.'
+    },
+    tableTools: {
+      refresh: 'ರಿಫ್ರೆಶ್ ಮಾಡಿ',
+      size: 'ಸಾಂದ್ರತೆ',
+      sizeOption: {
+        large: 'ಸುಲಭ',
+        medium: 'ಡೀಫಾಲ್ಟ್',
+        small: 'ದ್ವಿತೀಯ',
+        mini: 'ಕಾಂಪ್ಯಾಕ್ಟ್'
+      },
+      columns: 'ಕಾಲಮ್‌ಗಳು',
+      columnsOption: {
+        columns: 'ಕಾಲಮ್‌ಗಳು',
+        reset: 'ಮರುಹೊಂದಿಸಿ',
+        index: 'ಸಂಖ್ಯೆಗಳು',
+        selection: 'ಆಯ್ಕೆ',
+        untitled: 'ಶೀರ್ಷಿಕೆರಹಿತ'
+      },
+      fullscreen: 'ಪೂರ್ಣ ಪರದೆ'
+    },
+    fileList: {
+      selectAll: 'ಎಲ್ಲವನ್ನು ಆರಿಸು',
+      selectTips: 'ಆಯ್ಕೆ ಮಾಡಲಾಗಿದೆ {total} ಫೈಲ್/ಡೈರೆಕ್ಟರಿ',
+      fileName: 'ಹೆಸರು',
+      fileSize: 'ಗಾತ್ರ',
+      fileTimestamp: 'ಕೊನೆಯದಾಗಿ ಮಾರ್ಪಡಿಸಲಾಗಿದೆ'
+    },
+    cropper: {
+      zoomIn: 'ಇನ್ನು ಹತ್ತಿರವಾಗಿಸಿ',
+      zoomOut: 'ಜೂಮ್ .ಟ್ ಮಾಡಿ',
+      rotateLeft: 'ಎಡಕ್ಕೆ ತಿರುಗಿಸಿ',
+      rotateRight: 'ಬಲಕ್ಕೆ ತಿರುಗಿಸಿ',
+      moveLeft: 'ಎಡಕ್ಕೆ ಸರಿಸಿ',
+      moveRight: 'ಬಲಕ್ಕೆ ಹೋಗು',
+      moveUp: 'ಮೇಲೇರು',
+      moveDown: 'ಕೆಳಗೆ ಸರಿಸಿ',
+      flipX: 'ಫ್ಲಿಪ್ x',
+      flipY: 'ಫ್ಲಿಪ್ ವೈ',
+      reset: 'ಮರುಹೊಂದಿಸಿ',
+      upload: 'ಅಪ್‌ಲೋಡ್ ಮಾಡಿ',
+      ok: 'ಸರಿ',
+      title: 'ಕ್ರಾಪರ್'
+    },
+    map: {
+      title: 'ವಿಳಾಸ',
+      placeholder: 'ಕೀವರ್ಡ್ ನಮೂದಿಸಿ',
+      message: 'ದಯವಿಟ್ಟು ವಿಳಾಸವನ್ನು ಆರಿಸಿ',
+      ok: 'ಸರಿ'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/ko_KR.js
+++ b/src/components/ele-admin-pro/packages/lang/ko_KR.js
@@ -0,0 +1,114 @@
+/** 韩语 */
+import lang from 'ant-design-vue/es/locale/ko_KR';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: '새로 고침',
+      fullscreen: '전체 화면',
+      fullscreenExit: '전체 화면',
+      closeLeft: '왼쪽 닫 기',
+      closeRight: '오른쪽 닫 기',
+      closeOther: '기타 닫 기',
+      closeAll: '모두 닫 기'
+    },
+    setting: {
+      title: '테마 설정',
+      sideStyles: {
+        dark: '어두운 사이드 바',
+        light: '밝은 사이드 바'
+      },
+      headStyles: {
+        light: '밝은 상단 바',
+        dark: '어두운 상단 막대',
+        primary: '기본 헤더'
+      },
+      layoutStyles: {
+        side: '왼쪽 메뉴 레이아웃',
+        top: '상위 메뉴 레이아웃',
+        mix: '혼합 메뉴 레이아웃'
+      },
+      colors: {
+        default: '새벽의 푸른',
+        dust: '황혼',
+        sunset: '선셋 오렌지',
+        volcano: '화산',
+        purple: '골든 퍼플',
+        cyan: '청록색',
+        green: '폴라 그린',
+        geekblue: '괴짜 블루'
+      },
+      darkMode: '다크 모드 켜기',
+      layoutStyle: '탐색 모드',
+      sideMenuStyle: '사이드 바 더블 메뉴',
+      bodyFull: '콘텐츠 영역 전체 화면',
+      other: '기타 구성',
+      fixedHeader: '고정 상단 바 영역',
+      fixedSidebar: '고정 사이드 바 영역',
+      fixedBody: '고정 컨텐츠 영역',
+      logoAutoSize: '자동 로고 너비',
+      colorfulIcon: '사이드 바 색상 아이콘',
+      sideUniqueOpen: '메뉴 독점 확장',
+      weakMode: '색 약화 모드 켜기',
+      showFooter: '글로벌 바닥 글 켜기',
+      showTabs: '여러 탭 열기',
+      tabStyle: '탭 표시 스타일',
+      tabStyles: {
+        default: '기본',
+        dot: '도트',
+        card: '카드'
+      },
+      tips: '수정 후에는 로컬로 캐시되며 다음에 열 때 테마 구성이 기억됩니다.'
+    },
+    tableTools: {
+      refresh: '최신 정보',
+      size: '밀도',
+      sizeOption: {
+        large: '느슨하게',
+        medium: '기본',
+        small: '매질',
+        mini: '콤팩트'
+      },
+      columns: '열 설정',
+      columnsOption: {
+        columns: '열 설정',
+        reset: '초기화',
+        index: '일련 번호',
+        selection: '列选择',
+        untitled: '제목 없음'
+      },
+      fullscreen: '전체 화면',
+
+    },
+    fileList: {
+      selectAll: '모두 선택',
+      selectTips: '선택된 {total} 파일/폴더',
+      fileName: '파일 이름',
+      fileSize: '크기',
+      fileTimestamp: '수정 날짜'
+    },
+    cropper: {
+      zoomIn: '크게 하다',
+      zoomOut: '축소',
+      rotateLeft: '왼쪽으로 회전',
+      rotateRight: '오른쪽으로 회전',
+      moveLeft: '왼쪽으로 이동',
+      moveRight: '오른쪽으로 이동',
+      moveUp: '이동',
+      moveDown: '아래로 이동',
+      flipX: '좌우로 뒤집기',
+      flipY: '거꾸로 뒤집기',
+      reset: '재시작',
+      upload: '이미지 선택',
+      ok: '확인',
+      title: '사진 자르기'
+    },
+    map: {
+      title: '지역 선택',
+      placeholder: '입력하세요',
+      message: '위치를 선택하려면 목록을 클릭하십시오',
+      ok: '확인'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/ku_IQ.js
+++ b/src/components/ele-admin-pro/packages/lang/ku_IQ.js
@@ -0,0 +1,113 @@
+/** 库尔德语 */
+import lang from 'ant-design-vue/es/locale/ku_IQ';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'Hênikkirin',
+      fullscreen: 'Dîmendera tevahî',
+      fullscreenExit: 'Dîmendera tevahî',
+      closeLeft: 'Çep bigire',
+      closeRight: 'Rast bigire',
+      closeOther: 'Yê din bigire',
+      closeAll: 'Girtî Hemî'
+    },
+    setting: {
+      title: 'Sazkirina Temayê',
+      sideStyles: {
+        dark: 'Tenişta tarî',
+        light: 'Milê sivik'
+      },
+      headStyles: {
+        light: 'Sernavê ronahî',
+        dark: 'Sernavê tarî',
+        primary: 'Sernavê bingehîn'
+      },
+      layoutStyles: {
+        side: 'hêl qerta xûrekê',
+        top: 'lûtik qerta xûrekê',
+        mix: 'lihevxitin qerta xûrekê'
+      },
+      colors: {
+        default: 'roj şîn',
+        dust: 'toza şîn',
+        sunset: 'rojava porteqalî',
+        volcano: 'çîyayê agirî',
+        purple: 'binefşî zêrîn',
+        cyan: 'cyan',
+        green: 'kesk polar',
+        geekblue: 'geek blue'
+      },
+      darkMode: 'moda tarî',
+      layoutStyle: 'moda navîgasyonê',
+      sideMenuStyle: 'Menu menu du qat',
+      bodyFull: 'fullscreen laş',
+      other: 'mîhengê din',
+      fixedHeader: 'sernavê sabît',
+      fixedSidebar: 'keviya kêlekê sabît',
+      fixedBody: 'laşê sabit',
+      logoAutoSize: 'adaptekirina logoyê',
+      colorfulIcon: 'îkona rengîn',
+      sideUniqueOpen: 'menu yekta vekirî',
+      weakMode: 'moda lawaz',
+      showFooter: 'footer nîşan bide',
+      showTabs: 'taban nîşan bide',
+      tabStyle: 'şêwaza tabê',
+      tabStyles: {
+        default: 'Destçûnî',
+        dot: 'Dot',
+        card: 'Qert'
+      },
+      tips: 'Gava ku hûn vebikin dê veavakirina we bi bîr bîne.'
+    },
+    tableTools: {
+      refresh: 'Hênikkirin',
+      size: 'Density',
+      sizeOption: {
+        large: 'Sivik',
+        medium: 'Destçûnî',
+        small: 'Dûwemdor',
+        mini: 'Gişt'
+      },
+      columns: 'Stûn',
+      columnsOption: {
+        columns: 'Stûn',
+        reset: 'Reset bikin',
+        index: 'Jimare',
+        selection: 'Neqînî',
+        untitled: 'Bê sernav'
+      },
+      fullscreen: 'dîmendera tevahî'
+    },
+    fileList: {
+      selectAll: 'Hemî hilbijêrin',
+      selectTips: 'Hilbijartin {total} dosî/peldank',
+      fileName: 'Nav',
+      fileSize: 'Mezinayî',
+      fileTimestamp: 'paşîn hate guherandin'
+    },
+    cropper: {
+      zoomIn: 'Mezin bike',
+      zoomOut: 'Dûr xistin',
+      rotateLeft: 'Çepê Zivirandin',
+      rotateRight: 'Rast Bike',
+      moveLeft: 'Çepê Bizivirin',
+      moveRight: 'Rast Bike',
+      moveUp: 'Derketina jor',
+      moveDown: 'Dakêşin Jêr',
+      flipX: 'FlipX',
+      flipY: 'FlipY',
+      reset: 'Reset',
+      upload: 'Upload',
+      ok: 'Temam',
+      title: 'Cropper'
+    },
+    map: {
+      title: 'Navnîşan',
+      placeholder: 'Binivîse',
+      message: 'Ji kerema xwe navnîşanek hilbijêrin',
+      ok: 'Temam'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/lv_LV.js
+++ b/src/components/ele-admin-pro/packages/lang/lv_LV.js
@@ -0,0 +1,113 @@
+/** 拉脱维亚语 */
+import lang from 'ant-design-vue/es/locale/lv_LV';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'atjaunot',
+      fullscreen: 'Pilnekrāna režīmā',
+      fullscreenExit: 'Pilnekrāna režīmā',
+      closeLeft: 'Aizvērt pa kreisi',
+      closeRight: 'Aizveriet labo pusi',
+      closeOther: 'Aizvērt citu',
+      closeAll: 'Aizvērt visu'
+    },
+    setting: {
+      title: 'Tēmas iestatīšana',
+      sideStyles: {
+        dark: 'Tumšā sānjosla',
+        light: 'Viegla sānjosla'
+      },
+      headStyles: {
+        light: 'Gaismas galvene',
+        dark: 'Tumša galvene',
+        primary: 'Galvenā galvene'
+      },
+      layoutStyles: {
+        side: 'Sānu izvēlnes izkārtojums',
+        top: 'Augšējās izvēlnes izkārtojums',
+        mix: 'Sajaukt izvēlnes izkārtojumu'
+      },
+      colors: {
+        default: 'Diennakts zils',
+        dust: 'Putekļu zils',
+        sunset: 'Saulrieta oranža',
+        volcano: 'Vulkāns',
+        purple: 'Zeltaini violets',
+        cyan: 'Ciāna',
+        green: 'Polārā zaļā krāsā',
+        geekblue: 'Geek zils'
+      },
+      darkMode: 'Tumšais režīms',
+      layoutStyle: 'Navigācijas režīms',
+      sideMenuStyle: 'Sānjoslas dubultā izvēlne',
+      bodyFull: 'Virsbūve pilnekrāna režīmā',
+      other: 'Cits iestatījums',
+      fixedHeader: 'Fiksēta galvene',
+      fixedSidebar: 'Fiksēta sānjosla',
+      fixedBody: 'Fiksēts korpuss',
+      logoAutoSize: 'Logotipa pielāgošana',
+      colorfulIcon: 'Krāsaina ikona',
+      sideUniqueOpen: 'Izvēlne Unikāli Atvērt',
+      weakMode: 'Vājš režīms',
+      showFooter: 'Rādīt kājeni',
+      showTabs: 'Rādīt cilnes',
+      tabStyle: 'Cilnes stils',
+      tabStyles: {
+        default: 'Noklusējums',
+        dot: 'Punkts',
+        card: 'Karte'
+      },
+      tips: 'Nākamo reizi, kad to atvērsit, tā atcerēsies jūsu konfigurāciju.'
+    },
+    tableTools: {
+      refresh: 'atjaunot',
+      size: 'Blīvums',
+      sizeOption: {
+        large: 'Viegli',
+        medium: 'Noklusējums',
+        small: 'Sekundāra',
+        mini: 'Kompakts'
+      },
+      columns: 'Kolonnas',
+      columnsOption: {
+        columns: 'Kolonnas',
+        reset: 'Atiestatīt',
+        index: 'Skaitļi',
+        selection: 'Atlase',
+        untitled: 'Bez nosaukuma'
+      },
+      fullscreen: 'Pilnekrāna režīmā'
+    },
+    fileList: {
+      selectAll: 'Izvēlēties visus',
+      selectTips: 'Atlasīts {total} failu/direktorijā',
+      fileName: 'Nosaukums',
+      fileSize: 'Izmērs',
+      fileTimestamp: 'Pēdējoreiz modificēts'
+    },
+    cropper: {
+      zoomIn: 'Pietuvināt',
+      zoomOut: 'Attālināt',
+      rotateLeft: 'Pagriezt pa kreisi',
+      rotateRight: 'Pagrieziet pa labi',
+      moveLeft: 'Pārvietoties pa kreisi',
+      moveRight: 'Kusties pa labi',
+      moveUp: 'Virzīties uz augšu',
+      moveDown: 'Pārvietoties uz leju',
+      flipX: 'Apvērst X',
+      flipY: 'Pārvērst Y',
+      reset: 'Atiestatīt',
+      upload: 'Augšupielādēt',
+      ok: 'Labi',
+      title: 'augkopējs'
+    },
+    map: {
+      title: 'Adrese',
+      placeholder: 'Ievadīt atslēgvārdu',
+      message: 'Lūdzu, izvēlieties adresi',
+      ok: 'Labi'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/mk_MK.js
+++ b/src/components/ele-admin-pro/packages/lang/mk_MK.js
@@ -0,0 +1,113 @@
+/** 马其顿语 */
+import lang from 'ant-design-vue/es/locale/mk_MK';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'Освежи',
+      fullscreen: 'Цел екран',
+      fullscreenExit: 'Цел екран',
+      closeLeft: 'Затвори лево',
+      closeRight: 'Затвори десно',
+      closeOther: 'Затвори други',
+      closeAll: 'Затвори ги сите'
+    },
+    setting: {
+      title: 'Тема за поставување',
+      sideStyles: {
+        dark: 'Темна странична лента',
+        light: 'Лесна странична лента'
+      },
+      headStyles: {
+        light: 'Светло заглавие',
+        dark: 'Темно заглавие',
+        primary: 'Примарен заглавие'
+      },
+      layoutStyles: {
+        side: 'Распоред на странично мени',
+        top: 'Врвен распоред на менито',
+        mix: 'Распоред на мени'
+      },
+      colors: {
+        default: 'Ден на разденување сино',
+        dust: 'Сина прашина',
+        sunset: 'Зајдисонце портокалова',
+        volcano: 'Вулкан',
+        purple: 'Златна виолетова',
+        cyan: 'Цијан',
+        green: 'Поларно зелено',
+        geekblue: 'Гик Блу'
+      },
+      darkMode: 'Темен режим',
+      layoutStyle: 'Режим на навигација',
+      sideMenuStyle: 'Странична двојно мени',
+      bodyFull: 'Цел екран на телото',
+      other: 'Друго поставување',
+      fixedHeader: 'Фиксен заглавие',
+      fixedSidebar: 'Поправена странична лента',
+      fixedBody: 'Фиксно тело',
+      logoAutoSize: 'Адаптација на логото',
+      colorfulIcon: 'Шарена икона',
+      sideUniqueOpen: 'Мени Единствено отворено',
+      weakMode: 'Слаб режим',
+      showFooter: 'Покажи подножје',
+      showTabs: 'Покажи јазичиња',
+      tabStyle: 'Стил на јазиче',
+      tabStyles: {
+        default: 'Стандардно',
+        dot: 'Точка',
+        card: 'Картичка'
+      },
+      tips: 'Willе ја запомни вашата конфигурација следниот пат кога ќе ја отворите.'
+    },
+    tableTools: {
+      refresh: 'Освежи',
+      size: 'Густина',
+      sizeOption: {
+        large: 'Лесно',
+        medium: 'Стандардно',
+        small: 'Средно',
+        mini: 'Компактен'
+      },
+      columns: 'Колумни',
+      columnsOption: {
+        columns: 'Колумни',
+        reset: 'Ресетирај',
+        index: 'Броеви',
+        selection: 'Избор',
+        untitled: 'Без наслов'
+      },
+      fullscreen: 'Цел екран'
+    },
+    fileList: {
+      selectAll: 'Селектирај се',
+      selectTips: 'Избрани {total} досие/директориум',
+      fileName: 'Име',
+      fileSize: 'Големина',
+      fileTimestamp: 'LastModified'
+    },
+    cropper: {
+      zoomIn: 'Зумирај',
+      zoomOut: 'Зумирај',
+      rotateLeft: 'Ротирај лево',
+      rotateRight: 'RotateRight',
+      moveLeft: 'Помести се на лево',
+      moveRight: 'Движете се надесно',
+      moveUp: 'MoveUp',
+      moveDown: 'Да се движи надолу',
+      flipX: 'Флип X',
+      flipY: 'Флип Y',
+      reset: 'Ресетирај',
+      upload: 'Поставете',
+      ok: 'добро',
+      title: 'Кропер'
+    },
+    map: {
+      title: 'Адреса',
+      placeholder: 'Внесете клучен збор',
+      message: 'Ве молиме изберете адреса',
+      ok: 'добро'
+    }
+  }
+};
--- a/src/components/ele-admin-pro/packages/lang/mn_MN.js
+++ b/src/components/ele-admin-pro/packages/lang/mn_MN.js
@@ -0,0 +1,113 @@
+/** 蒙古语 */
+import lang from 'ant-design-vue/es/locale/mn_MN';
+
+export default {
+  ...lang,
+  ele: {
+    tabs: {
+      reload: 'Сэргээх',
+      fullscreen: 'Дэлгэц дүүрэн',
+      fullscreenExit: 'Дэлгэц дүүрэн',
+      closeLeft: 'Зүүн хаах',
+      closeRight: 'Баруун хаах',
+      closeOther: 'Бусадыг хаах',
+      closeAll: 'Бүгдийг хаах'
+    },
+    setting: {
+      title: 'Сэдвийн тохиргоо',
+      sideStyles: {
+        dark: 'Харанхуй хажуугийн самбар',
+        light: 'Хөнгөн хажуугийн самбар'
+      },
+      headStyles: {
+        light: 'Хөнгөн толгой',
+        dark: 'Харанхуй толгой',
+        primary: 'Үндсэн толгой'
+      },
+      layoutStyles: {
+        side: 'Хажуугийн цэсний байршил',
+        top: 'Шилдэг цэсийн байршил',
+        mix: 'Холимог цэсийн байршил'
+      },
+      colors: {
+        default: 'Өдрийн цэнхэр',
+        dust: 'Тоос хөх',
+        sunset: 'Нар жаргах улбар шар',
+        volcano: 'Галт уул',
+        purple: 'Алтан ягаан',
+        cyan: 'Цэнхэр',
+        green: 'Алтан гадас',
+        geekblue: 'Geek Цэнхэр'
+      },
+      darkMode: 'Харанхуй горим',
+      layoutStyle: 'Навигацийн горим',
+      sideMenuStyle: 'Хажуугийн давхар цэс',
+      bodyFull: 'Биеийн бүтэн дэлгэц',
+      other: 'Бусад тохиргоо',
+      fixedHeader: 'Тогтмол толгой',
+      fixedSidebar: 'Суурин талын самбар',
+      fixedBody: 'Тогтмол бие',
+      logoAutoSize: 'Логоны тохируулга',
+      colorfulIcon: 'Өнгөт дүрс',
+      sideUniqueOpen: 'Өвөрмөц цэс',
+      weakMode: 'Сул горим',
+      showFooter: 'Хөлийг харуулах',
+      showTabs: 'Табуудыг харуулах',
+      tabStyle: 'Табын хэв маяг',
+      tabStyles: {
+        default: 'Анхдагч',
+        dot: 'Цэг',
+        card: 'Карт'
+      },
+      tips: 'Энэ нь дараагийн удаа нээхэд таны тохиргоог санах болно.'
+    },
+    tableTools: {
+      refresh: 'Сэргээх',
+      size: 'Нягт',
+      sizeOption: {
+        large: 'Хялбар',
+        medium: 'Анхдагч',
+        small: 'Хоёрдогч',
+        mini: 'Компакт'
+      },
+      columns: 'Багана',
+      columnsOption: {
+        columns: 'Багана',
+        reset: 'Дахин тохируулах',
+        index: 'Тоо',
+        selection: 'Сонголт',
+        untitled: 'Гарчиггүй'
+      },
+      fullscreen: 'Дэлгэц дүүрэн'
+    },
+    fileList: {
+      selectAll: 'Бүгдийг сонгох',
+      selectTips: 'Сонгосон {total} файл/лавлах',
+      fileName: 'Нэр',
+      fileSize: 'Хэмжээ',
+      fileTimestamp: 'Хамгийн сүүлд өөрчилсөн'
+    },
+    cropper: {
+      zoomIn: 'Томруулах',
+      zoomOut: 'Томруулах',
+      rotateLeft: 'Зүүн тийш эргүүлэх',
+      rotateRight: 'Зөв эргүүлэх',
+      moveLeft: 'Зүүн тийш шилжих',
+      moveRight: 'Баруун тийш шилжих',
+      moveUp: 'Дээшээ хөдөл',
+      moveDown: 'Доош шилжих',
+      flipX: 'X-г дарах',
+      flipY: 'Y-г дарна уу',
+      reset: 'Дахин тохируулах',
+      upload: 'Байршуулах',
+      ok: 'Тийм',
+      title: 'Тайруулагч'
+    },
+    map: {
+      title: 'Хаяг',
+      placeholder: 'Утга оруул',
+      message: 'Хаяг сонгоно уу',
+      ok: 'Тийм'
+    }
+  }
+};
--- a/Show More
+++ b/Show More