first commit

2023-05-31 15:05:11 +08:00 · 2023-05-31 15:05:11 +08:00 · 2d7e98e307
commit 2d7e98e307
344 changed files with 53859 additions and 0 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,2 @@
+> 1%
+last 2 versions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
--- a/.env
+++ b/.env
@ -0,0 +1,18 @@
+# 所有环境默认
+
+# 页面 title 前缀
+VUE_APP_TITLE=DvAdmin
+
+# 网络请求公用地址
+VUE_APP_API=/api/
+
+
+# 仓库地址
+VUE_APP_REPO=https://github.com/d2-projects/d2-admin-start-kit
+
+# 国际化配置
+VUE_APP_I18N_LOCALE=zh-chs
+VUE_APP_I18N_FALLBACK_LOCALE=en
+
+# element 颜色
+VUE_APP_ELEMENT_COLOR=#409EFF
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,9 @@
+# 开发环境
+NODE_ENV=development
+# 页面 title 前缀
+VUE_APP_TITLE=企业级后台管理系统dev
+# 启用权限管理
+VUE_APP_PM_ENABLED = true
+# 后端接口地址及端口(域名)
+VUE_APP_API = "https://x--mo.com:8888/admin"
+
--- a/.env.preview
+++ b/.env.preview
@ -0,0 +1,15 @@
+# 预览环境
+# 指定构建模式
+NODE_ENV=production
+
+# 标记当前构建方式
+VUE_APP_BUILD_MODE=PREVIEW
+# 页面 title 前缀
+VUE_APP_TITLE=企业级后台管理系统pre
+# 显示源码按钮
+VUE_APP_SCOURCE_LINK=FALSE
+
+# 部署路径
+VUE_APP_PUBLIC_PATH=/
+# 启用权限管理
+VUE_APP_PM_ENABLED = true
--- a/.env.production
+++ b/.env.production
@ -0,0 +1,15 @@
+# 生产环境
+# 指定构建模式
+NODE_ENV=production
+
+# 标记当前构建方式
+VUE_APP_BUILD_MODE=PREVIEW
+# 页面 title 前缀
+VUE_APP_TITLE=企业级后台管理系统pro
+# 显示源码按钮
+VUE_APP_SCOURCE_LINK=FALSE
+
+# 部署路径
+VUE_APP_PUBLIC_PATH=/
+# 启用权限管理
+VUE_APP_PM_ENABLED = true
--- a/.env.test
+++ b/.env.test
@ -0,0 +1,9 @@
+# 测试环境
+
+# 页面 title 前缀
+VUE_APP_TITLE=企业级后台管理系统test
+# 启用权限管理
+VUE_APP_PM_ENABLED = true
+# 后端接口地址及端口(域名)
+VUE_APP_API = "http://127.0.0.1:8000/"
+
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,14 @@
+# 忽略目录
+build/
+tests/
+node_modules/
+
+# D2CRUD 演示
+src/views/demo/d2-crud/
+
+# node 覆盖率文件
+coverage/
+
+# 忽略文件
+**/*-min.js
+**/*.min.js
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,28 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+      ],
+      env: {
+        jest: true
+      }
+    }
+  ]
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+package-lock.json
+yarn.lock
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.postcssrc.js
+++ b/.postcssrc.js
@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}
--- a/21
+++ b/21
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 李杨
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@ -0,0 +1,11 @@
+# d2-crud-plus与d2-admin集成启动项目
+
+## 修改之处
+1. `main.js` import `'./busienss'`
+2. `business/index.js` 进行`d2-crud-plus`的初始化工作
+3. 请求返回结果去掉`.data`，将`{code,msg,data}`整体传递到下层
+4. `views/demo` 为示例页面
+
+
+## 带权限版本
+请checkout permission分支
--- a/README.zh.md
+++ b/README.zh.md
@ -0,0 +1,26 @@
+[D2Admin](https://github.com/d2-projects/d2-admin) 是一个完全 **开源免费** 的企业中后台产品前端集成方案，使用最新的前端技术栈，小于 60kb 的本地首屏 js 加载，已经做好大部分项目前期准备工作，并且带有大量示例代码，助力管理系统敏捷开发。
+
+**中文** | [English](https://github.com/d2-projects/d2-admin-start-kit)
+
+## 预览
+
+![Deploy preview](https://github.com/d2-projects/d2-admin-start-kit/workflows/Deploy%20preview/badge.svg)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/08ff8c93-f0a8-497a-a081-440b31fb3aa4/deploy-status)](https://app.netlify.com/sites/d2-admin-start-kit/deploys)
+
+下列访问地址均由最新的 master 分支代码同时构建部署，访问效果完全一致，请根据自身网络情况选择合适的访问链接。
+
+| 位置 | 链接 | 部署位置 |
+| --- | --- | --- |
+| d2.pub | [preview](https://d2.pub/d2-admin-start-kit/preview) | 中国服务器 |
+| cdn.d2.pub | [preview](https://cdn.d2.pub/d2-admin-start-kit/preview) | 七牛云 CDN |
+| github | [preview](https://d2-projects.github.io/d2-admin-start-kit) | GitHub pages |
+| netlify | [preview](https://d2-admin-start-kit.netlify.com) | Netlify CDN |
+
+## 其它同步仓库
+
+| 位置 | 链接 |
+| --- | --- |
+| 码云 | [https://gitee.com/d2-projects/d2-admin-start-kit](https://gitee.com/d2-projects/d2-admin-start-kit) |
+| coding | [https://d2-projects.coding.net/p/d2-projects/d/d2-admin-start-kit/git](https://d2-projects.coding.net/p/d2-projects/d/d2-admin-start-kit/git) |
+
+> 如果您在 github 仓库下载很慢，可以尝试使用我们的码云仓库克隆代码
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ],
+  // 允许两种编码引入方式共存,也就是 common 规范与 es6 规范的共存处理
+  sourceType: 'unambiguous'
+}
--- a/d2-admin.babel
+++ b/d2-admin.babel
@ -0,0 +1,165 @@
+<babeledit_project version="1.2">
+    <!--
+
+    BabelEdit project file
+    https://www.codeandweb.com/babeledit
+
+    This file contains meta data for all translations, but not the translation texts itself.
+    They are stored in framework-specific message files (.json / .vue / .yaml / .properties)
+
+    -->
+    <preset_collections/>
+    <framework>vue-json</framework>
+    <filename>d2-admin.babel</filename>
+    <source_root_dir></source_root_dir>
+    <folder_node>
+        <name></name>
+        <children>
+            <concept_node>
+                <name>_element</name>
+                <definition_loaded>false</definition_loaded>
+                <description></description>
+                <comment></comment>
+                <default_text></default_text>
+                <translations>
+                    <translation>
+                        <language>en-US</language>
+                        <approved>false</approved>
+                    </translation>
+                    <translation>
+                        <language>ja-JP</language>
+                        <approved>false</approved>
+                    </translation>
+                    <translation>
+                        <language>zh-CHS</language>
+                        <approved>false</approved>
+                    </translation>
+                    <translation>
+                        <language>zh-CHT</language>
+                        <approved>false</approved>
+                    </translation>
+                </translations>
+            </concept_node>
+            <concept_node>
+                <name>_name</name>
+                <definition_loaded>false</definition_loaded>
+                <description></description>
+                <comment></comment>
+                <default_text></default_text>
+                <translations>
+                    <translation>
+                        <language>en-US</language>
+                        <approved>false</approved>
+                    </translation>
+                    <translation>
+                        <language>ja-JP</language>
+                        <approved>false</approved>
+                    </translation>
+                    <translation>
+                        <language>zh-CHS</language>
+                        <approved>false</approved>
+                    </translation>
+                    <translation>
+                        <language>zh-CHT</language>
+                        <approved>false</approved>
+                    </translation>
+                </translations>
+            </concept_node>
+            <folder_node>
+                <name>page</name>
+                <children>
+                    <folder_node>
+                        <name>demo</name>
+                        <children>
+                            <folder_node>
+                                <name>playground</name>
+                                <children>
+                                    <folder_node>
+                                        <name>locales</name>
+                                        <children>
+                                            <concept_node>
+                                                <name>text</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>ja-JP</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>zh-CHS</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>zh-CHT</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                        </children>
+                                    </folder_node>
+                                </children>
+                            </folder_node>
+                        </children>
+                    </folder_node>
+                </children>
+            </folder_node>
+        </children>
+    </folder_node>
+    <isTemplateProject>false</isTemplateProject>
+    <languages>
+        <language>
+            <code>en-US</code>
+            <source_id></source_id>
+            <source_file>src/locales/en.json</source_file>
+        </language>
+        <language>
+            <code>ja-JP</code>
+            <source_id></source_id>
+            <source_file>src/locales/ja.json</source_file>
+        </language>
+        <language>
+            <code>zh-CHS</code>
+            <source_id></source_id>
+            <source_file>src/locales/zh-chs.json</source_file>
+        </language>
+        <language>
+            <code>zh-CHT</code>
+            <source_id></source_id>
+            <source_file>src/locales/zh-cht.json</source_file>
+        </language>
+    </languages>
+    <translation_files>
+        <translation_file>
+            <file>src/locales/en.json</file>
+        </translation_file>
+        <translation_file>
+            <file>src/locales/ja.json</file>
+        </translation_file>
+        <translation_file>
+            <file>src/locales/zh-chs.json</file>
+        </translation_file>
+        <translation_file>
+            <file>src/locales/zh-cht.json</file>
+        </translation_file>
+    </translation_files>
+    <editor_configuration>
+        <save_empty_translations>true</save_empty_translations>
+        <copy_templates>
+            <copy_template>$t('%1')</copy_template>
+            <copy_template>{{ $t('%1') }}</copy_template>
+            <copy_template>this.$t('%1')</copy_template>
+        </copy_templates>
+    </editor_configuration>
+    <primary_language>zh-CHS</primary_language>
+    <configuration>
+        <indent>tab</indent>
+        <format>namespaced-json</format>
+    </configuration>
+</babeledit_project>
--- a/dependencies-cdn.js
+++ b/dependencies-cdn.js
@ -0,0 +1,22 @@
+module.exports = [
+  // { name: 'vue', library: 'Vue', js: 'https://unpkg.com/vue@2.6.10/dist/vue.min.js', css: '' },
+  // { name: 'vue-i18n', library: 'VueI18n', js: 'https://unpkg.com/vue-i18n@8.15.1/dist/vue-i18n.min.js', css: '' },
+  // { name: 'vue-router', library: 'VueRouter', js: 'https://unpkg.com/vue-router@3.1.3/dist/vue-router.min.js', css: '' },
+  // { name: 'vuex', library: 'Vuex', js: 'https://unpkg.com/vuex@3.1.2/dist/vuex.min.js', css: '' },
+  // { name: 'axios', library: 'axios', js: 'https://unpkg.com/axios@0.19.0/dist/axios.min.js', css: '' },
+  // { name: 'better-scroll', library: 'BScroll', js: 'https://unpkg.com/better-scroll@1.15.2/dist/bscroll.min.js', css: '' },
+  // { name: 'axios-mock-adapter', library: 'AxiosMockAdapter', js: 'https://unpkg.com/axios-mock-adapter@1.18.1/dist/axios-mock-adapter.min.js', css: '' },
+  // { name: 'element-ui', library: 'ELEMENT', js: 'https://unpkg.com/element-ui@2.15.5/lib/index.js', css: 'https://unpkg.com/element-ui@2.15.5/lib/theme-chalk/index.css' },
+  // { name: 'lodash', library: '_', js: 'https://unpkg.com/lodash@4.17.15/lodash.min.js', css: '' },
+  // { name: 'ua-parser-js', library: 'UAParser', js: 'https://unpkg.com/ua-parser-js@0.7.20/dist/ua-parser.min.js', css: '' },
+  // { name: 'js-cookie', library: 'Cookies', js: 'https://unpkg.com/js-cookie@2.2.1/src/js.cookie.js', css: '' },
+  // { name: 'nprogress', library: 'NProgress', js: 'https://unpkg.com/nprogress@0.2.0/nprogress.js', css: 'https://unpkg.com/nprogress@0.2.0/nprogress.css' },
+  // { name: 'dayjs', library: 'dayjs', js: 'https://unpkg.com/dayjs@1.8.17/dayjs.min.js', css: '' },
+  // { name: 'fuse.js', library: 'Fuse', js: 'https://unpkg.com/fuse.js@5.2.3/dist/fuse.min.js', css: '' },
+  // { name: 'hotkeys-js', library: 'hotkeys', js: 'https://unpkg.com/hotkeys-js@3.7.3/dist/hotkeys.min.js', css: '' },
+  // { name: 'qs', library: 'Qs', js: 'https://unpkg.com/qs@6.9.1/dist/qs.js', css: '' },
+  // { name: 'lowdb', library: 'low', js: 'https://unpkg.com/lowdb@1.0.0/dist/low.min.js', css: '' },
+  // { name: 'lowdb/adapters/LocalStorage', library: 'LocalStorage', js: 'https://unpkg.com/lowdb@1.0.0/dist/LocalStorage.min.js', css: '' },
+  // { name: 'screenfull', library: 'screenfull', js: 'https://unpkg.com/screenfull@5.0.2/dist/screenfull.js', css: '' },
+  // { name: 'sortablejs', library: 'Sortable', js: 'https://unpkg.com/sortablejs@1.10.1/Sortable.min.js', css: '' }
+]
--- a/jest.config.js
+++ b/jest.config.js
@ -0,0 +1,3 @@
+module.exports = {
+  preset: '@vue/cli-plugin-unit-jest'
+}
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "allowSyntheticDefaultImports": false,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,94 @@
+{
+  "name": "django-vue-admin",
+  "version": "2.1.3",
+  "scripts": {
+    "serve": "vue-cli-service serve --open",
+    "start": "npm run serve",
+    "dev": "npm run serve",
+    "build": "vue-cli-service build",
+    "build:preview": "NODE_OPTIONS=--max_old_space_size=4096 vue-cli-service build --mode preview",
+    "lint": "vue-cli-service lint --fix",
+    "test:unit": "vue-cli-service test:unit",
+    "test": "vue-cli-service build --mode test"
+  },
+  "dependencies": {
+    "@great-dream/template": "^1.0.2",
+    "axios": "^0.19.0",
+    "axios-mock-adapter": "^1.18.1",
+    "better-scroll": "^1.15.2",
+    "china-division": "^2.4.0",
+    "core-js": "^3.4.3",
+    "cropperjs": "^1.5.6",
+    "d2-crud-plus": "^2.17.9",
+    "d2-crud-x": "^2.17.9",
+    "d2p-extends": "^2.17.9",
+    "dayjs": "^1.8.17",
+    "echarts": "^5.4.2",
+    "el-phone-number-input": "^1.1.5",
+    "element-ui": "^2.15.5",
+    "faker": "^4.1.0",
+    "flex.css": "^1.1.7",
+    "fuse.js": "^5.2.3",
+    "hotkeys-js": "^3.7.3",
+    "js-cookie": "^2.2.1",
+    "js-md5": "^0.7.3",
+    "lodash": "^4.17.15",
+    "lowdb": "^1.0.0",
+    "nprogress": "^0.2.0",
+    "qiankun": "^2.7.2",
+    "qrcodejs2": "^0.0.2",
+    "screenfull": "^5.0.2",
+    "sortablejs": "^1.10.1",
+    "ua-parser-js": "^0.7.20",
+    "viser-vue": "^2.4.8",
+    "vue": "2.7.14",
+    "vue-echarts": "^6.5.4",
+    "vue-grid-layout": "^2.4.0",
+    "vue-html2pdf": "^1.8.0",
+    "vue-i18n": "^8.15.1",
+    "vue-infinite-scroll": "^2.0.2",
+    "vue-router": "^3.6.5",
+    "vue-splitpane": "^1.0.6",
+    "vuex": "^3.1.2",
+    "vxe-table": "^3.3.2",
+    "xe-utils": "^3.2.1"
+  },
+  "devDependencies": {
+    "@d2-projects/vue-filename-injector": "^1.1.0",
+    "@kazupon/vue-i18n-loader": "^0.5.0",
+    "@vue/cli-plugin-babel": "^4.1.0",
+    "@vue/cli-plugin-eslint": "^4.1.0",
+    "@vue/cli-plugin-router": "^4.1.0",
+    "@vue/cli-plugin-unit-jest": "^4.1.0",
+    "@vue/cli-plugin-vuex": "^4.1.0",
+    "@vue/cli-service": "^4.1.0",
+    "@vue/eslint-config-standard": "^5.1.2",
+    "@vue/test-utils": "^1.0.2",
+    "babel-eslint": "^10.0.3",
+    "compression-webpack-plugin": "^3.0.1",
+    "cz-conventional-changelog": "^3.2.0",
+    "eslint": "^6.8.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.1",
+    "eslint-plugin-vue": "^6.2.2",
+    "sass": "^1.23.7",
+    "sass-loader": "^8.0.0",
+    "svg-sprite-loader": "^4.1.6",
+    "text-loader": "^0.0.1",
+    "vue-cli-plugin-i18n": "^1.0.1",
+    "vue-template-compiler": "^2.6.10",
+    "webpack-bundle-analyzer": "^3.6.0",
+    "webpack-theme-color-replacer": "^1.3.3"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/liqianglog/django-vue-admin"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/icon.ico
+++ b/public/icon.ico
--- a/public/image/avatar.png
+++ b/public/image/avatar.png
--- a/public/image/baidu-pan-logo.png
+++ b/public/image/baidu-pan-logo.png
--- a/public/image/card/ali.png
+++ b/public/image/card/ali.png
--- a/public/image/card/sms.png
+++ b/public/image/card/sms.png
--- a/public/image/card/tencent.jpg
+++ b/public/image/card/tencent.jpg
--- a/public/image/d2-pub.png
+++ b/public/image/d2-pub.png
--- a/public/image/django-comment-migrate.png
+++ b/public/image/django-comment-migrate.png
--- a/public/image/django-vue-admin.png
+++ b/public/image/django-vue-admin.png
--- a/public/image/django.png
+++ b/public/image/django.png
--- a/public/image/gin-vue-admin.png
+++ b/public/image/gin-vue-admin.png
--- a/public/image/jetbrains.jpeg
+++ b/public/image/jetbrains.jpeg
--- a/public/image/loading/loading-spin.svg
+++ b/public/image/loading/loading-spin.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="white">
+  <path opacity=".25" d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"/>
+  <path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z">
+    <animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.8s" repeatCount="indefinite" />
+  </path>
+</svg>
--- a/public/image/ruoyi.png
+++ b/public/image/ruoyi.png
--- a/public/image/simple-ui.png
+++ b/public/image/simple-ui.png
--- a/public/image/theme.zip
+++ b/public/image/theme.zip
--- a/public/image/theme/chester/logo/all.png
+++ b/public/image/theme/chester/logo/all.png
--- a/public/image/theme/chester/logo/icon-only.png
+++ b/public/image/theme/chester/logo/icon-only.png
--- a/public/image/theme/chester/preview@2x.jpg
+++ b/public/image/theme/chester/preview@2x.jpg
--- a/public/image/theme/d2/logo/all.png
+++ b/public/image/theme/d2/logo/all.png
--- a/public/image/theme/d2/logo/icon-only.png
+++ b/public/image/theme/d2/logo/icon-only.png
--- a/public/image/theme/d2/preview@2x.png
+++ b/public/image/theme/d2/preview@2x.png
--- a/public/image/theme/element/logo/all.png
+++ b/public/image/theme/element/logo/all.png
--- a/public/image/theme/element/logo/icon-only.png
+++ b/public/image/theme/element/logo/icon-only.png
--- a/public/image/theme/element/preview@2x.jpg
+++ b/public/image/theme/element/preview@2x.jpg
--- a/public/image/theme/line/bg.jpg
+++ b/public/image/theme/line/bg.jpg
--- a/public/image/theme/line/logo/all.png
+++ b/public/image/theme/line/logo/all.png
--- a/public/image/theme/line/logo/icon-only.png
+++ b/public/image/theme/line/logo/icon-only.png
--- a/public/image/theme/line/preview@2x.jpg
+++ b/public/image/theme/line/preview@2x.jpg
--- a/public/image/theme/star/bg.jpg
+++ b/public/image/theme/star/bg.jpg
--- a/public/image/theme/star/logo/all.png
+++ b/public/image/theme/star/logo/all.png
--- a/public/image/theme/star/logo/icon-only.png
+++ b/public/image/theme/star/logo/icon-only.png
--- a/public/image/theme/star/preview@2x.jpg
+++ b/public/image/theme/star/preview@2x.jpg
--- a/public/image/theme/tomorrow-night-blue/logo/all.png
+++ b/public/image/theme/tomorrow-night-blue/logo/all.png
--- a/public/image/theme/tomorrow-night-blue/logo/icon-only.png
+++ b/public/image/theme/tomorrow-night-blue/logo/icon-only.png
--- a/public/image/theme/tomorrow-night-blue/preview@2x.jpg
+++ b/public/image/theme/tomorrow-night-blue/preview@2x.jpg
--- a/public/image/theme/violet/logo/all.png
+++ b/public/image/theme/violet/logo/all.png
--- a/public/image/theme/violet/logo/icon-only.png
+++ b/public/image/theme/violet/logo/icon-only.png
--- a/public/image/theme/violet/preview@2x.jpg
+++ b/public/image/theme/violet/preview@2x.jpg
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,285 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="<%= BASE_URL %>icon.ico">
+  <!-- 使用 CDN 加速的 CSS 文件，配置在 vue.config.js 下 -->
+  <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
+    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
+    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
+    <% } %>
+      <!-- 使用 CDN 加速的 JS 文件，配置在 vue.config.js 下 -->
+      <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
+        <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
+        <% } %>
+          <title>
+            <%= VUE_APP_TITLE %>
+          </title>
+          <style>
+            html,
+            body,
+            #app {
+              height: 100%;
+              margin: 0px;
+              padding: 0px;
+              width: 100%;
+            }
+
+            .d2-home {
+              background-color: #303133;
+              height: 100%;
+              display: flex;
+              flex-direction: column;
+            }
+
+            .d2-home__main {
+              user-select: none;
+              width: 100%;
+              flex-grow: 1;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              flex-direction: column;
+            }
+
+            .d2-home__footer {
+              width: 100%;
+              flex-grow: 0;
+              text-align: center;
+              padding: 1em 0;
+            }
+
+            .d2-home__footer>a {
+              font-size: 12px;
+              color: #ABABAB;
+              text-decoration: none;
+            }
+
+            #loader-wrapper {
+              position: fixed;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              z-index: 999999;
+            }
+            #loader {
+              display: block;
+              position: relative;
+              left: 50%;
+              top: 50%;
+              width: 120px;
+              height: 120px;
+              margin: -75px 0 0 -75px;
+              border-radius: 50%;
+              border: 3px solid transparent;
+              /* COLOR 1 */
+              border-top-color: #FFF;
+              -webkit-animation: spin 2s linear infinite;
+              /* Chrome, Opera 15+, Safari 5+ */
+              -ms-animation: spin 2s linear infinite;
+              /* Chrome, Opera 15+, Safari 5+ */
+              -moz-animation: spin 2s linear infinite;
+              /* Chrome, Opera 15+, Safari 5+ */
+              -o-animation: spin 2s linear infinite;
+              /* Chrome, Opera 15+, Safari 5+ */
+              animation: spin 2s linear infinite;
+              /* Chrome, Firefox 16+, IE 10+, Opera */
+              z-index: 1001;
+            }
+            #loader:before {
+              content: "";
+              position: absolute;
+              top: 5px;
+              left: 5px;
+              right: 5px;
+              bottom: 5px;
+              border-radius: 50%;
+              border: 3px solid transparent;
+              /* COLOR 2 */
+              border-top-color: #FFF;
+              -webkit-animation: spin 3s linear infinite;
+              /* Chrome, Opera 15+, Safari 5+ */
+              -moz-animation: spin 3s linear infinite;
+              /* Chrome, Opera 15+, Safari 5+ */
+              -o-animation: spin 3s linear infinite;
+              /* Chrome, Opera 15+, Safari 5+ */
+              -ms-animation: spin 3s linear infinite;
+              /* Chrome, Opera 15+, Safari 5+ */
+              animation: spin 3s linear infinite;
+              /* Chrome, Firefox 16+, IE 10+, Opera */
+            }
+            #loader:after {
+              content: "";
+              position: absolute;
+              top: 15px;
+              left: 15px;
+              right: 15px;
+              bottom: 15px;
+              border-radius: 50%;
+              border: 3px solid transparent;
+              border-top-color: #FFF;
+              /* COLOR 3 */
+              -moz-animation: spin 1.5s linear infinite;
+              /* Chrome, Opera 15+, Safari 5+ */
+              -o-animation: spin 1.5s linear infinite;
+              /* Chrome, Opera 15+, Safari 5+ */
+              -ms-animation: spin 1.5s linear infinite;
+              /* Chrome, Opera 15+, Safari 5+ */
+              -webkit-animation: spin 1.5s linear infinite;
+              /* Chrome, Opera 15+, Safari 5+ */
+              animation: spin 1.5s linear infinite;
+              /* Chrome, Firefox 16+, IE 10+, Opera */
+            }
+            @-webkit-keyframes spin {
+              0% {
+                -webkit-transform: rotate(0deg);
+                /* Chrome, Opera 15+, Safari 3.1+ */
+                -ms-transform: rotate(0deg);
+                /* IE 9 */
+                transform: rotate(0deg);
+                /* Firefox 16+, IE 10+, Opera */
+              }
+              100% {
+                -webkit-transform: rotate(360deg);
+                /* Chrome, Opera 15+, Safari 3.1+ */
+                -ms-transform: rotate(360deg);
+                /* IE 9 */
+                transform: rotate(360deg);
+                /* Firefox 16+, IE 10+, Opera */
+              }
+            }
+            @keyframes spin {
+              0% {
+                -webkit-transform: rotate(0deg);
+                /* Chrome, Opera 15+, Safari 3.1+ */
+                -ms-transform: rotate(0deg);
+                /* IE 9 */
+                transform: rotate(0deg);
+                /* Firefox 16+, IE 10+, Opera */
+              }
+              100% {
+                -webkit-transform: rotate(360deg);
+                /* Chrome, Opera 15+, Safari 3.1+ */
+                -ms-transform: rotate(360deg);
+                /* IE 9 */
+                transform: rotate(360deg);
+                /* Firefox 16+, IE 10+, Opera */
+              }
+            }
+            #loader-wrapper .loader-section {
+              position: fixed;
+              top: 0;
+              width: 51%;
+              height: 100%;
+              background: #49a9ee;
+              /* Old browsers */
+              z-index: 1000;
+              -webkit-transform: translateX(0);
+              /* Chrome, Opera 15+, Safari 3.1+ */
+              -ms-transform: translateX(0);
+              /* IE 9 */
+              transform: translateX(0);
+              /* Firefox 16+, IE 10+, Opera */
+            }
+            #loader-wrapper .loader-section.section-left {
+              left: 0;
+            }
+            #loader-wrapper .loader-section.section-right {
+              right: 0;
+            }
+            /* Loaded */
+            .loaded #loader-wrapper .loader-section.section-left {
+              -webkit-transform: translateX(-100%);
+              /* Chrome, Opera 15+, Safari 3.1+ */
+              -ms-transform: translateX(-100%);
+              /* IE 9 */
+              transform: translateX(-100%);
+              /* Firefox 16+, IE 10+, Opera */
+              -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+              transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+            }
+            .loaded #loader-wrapper .loader-section.section-right {
+              -webkit-transform: translateX(100%);
+              /* Chrome, Opera 15+, Safari 3.1+ */
+              -ms-transform: translateX(100%);
+              /* IE 9 */
+              transform: translateX(100%);
+              /* Firefox 16+, IE 10+, Opera */
+              -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+              transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+            }
+            .loaded #loader {
+              opacity: 0;
+              -webkit-transition: all 0.3s ease-out;
+              transition: all 0.3s ease-out;
+            }
+            .loaded #loader-wrapper {
+              visibility: hidden;
+              -webkit-transform: translateY(-100%);
+              /* Chrome, Opera 15+, Safari 3.1+ */
+              -ms-transform: translateY(-100%);
+              /* IE 9 */
+              transform: translateY(-100%);
+              /* Firefox 16+, IE 10+, Opera */
+              -webkit-transition: all 0.3s 1s ease-out;
+              transition: all 0.3s 1s ease-out;
+            }
+            /* JavaScript Turned Off */
+            .no-js #loader-wrapper {
+              display: none;
+            }
+            .no-js h1 {
+              color: #222222;
+            }
+            #loader-wrapper .load_title {
+              font-family: 'Open Sans';
+              color: #FFF;
+              font-size: 14px;
+              width: 100%;
+              text-align: center;
+              z-index: 9999999999999;
+              position: absolute;
+              top: 60%;
+              opacity: 1;
+              line-height: 30px;
+            }
+            #loader-wrapper .load_title span {
+              font-weight: normal;
+              font-style: italic;
+              font-size: 14px;
+              color: #FFF;
+              opacity: 0.5;
+            }
+          </style>
+          <script>
+            var _hmt = _hmt || [];
+            var hmid = "3824e56a483ef95673d119166354712c";
+            (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?" + hmid; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();
+          </script>
+</head>
+
+<body>
+  <noscript>
+    <strong>
+      Sorry, D2Admin will not work properly without JavaScript support. Enable JavaScript for browsers and continue.
+    </strong>
+  </noscript>
+  <div id="app">
+    <div id="loader-wrapper">
+      <div id="loader"></div>
+      <div class="loader-section section-left"></div>
+      <div class="loader-section section-right"></div>
+      <div class="load_title">正在加载中,请耐心等待...</div>
+    </div>
+  </div>
+  <!-- 使用 CDN 加速的 JS 文件，配置在 vue.config.js 下 -->
+  <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
+    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
+    <% } %>
+</body>
+
+</html>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,54 @@
+<template>
+  <div id="app">
+    <router-view/>
+    <!--  用来兼容乾坤前端微服务  -->
+    <div id="qiankun"></div>
+    <!-- 授权后可以删除-->
+    <div class="dvadmin-auth">
+      <span>Powered by Django-Vue-Admin</span>
+      <el-divider direction="vertical"></el-divider>
+      <span>Copyright dvadmin团队</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import util from '@/libs/util'
+
+export default {
+  name: 'app',
+  watch: {
+    '$i18n.locale': 'i18nHandle'
+  },
+  created () {
+    this.i18nHandle(this.$i18n.locale)
+  },
+  methods: {
+    i18nHandle (val, oldVal) {
+      util.cookies.set('lang', val)
+      document.querySelector('html').setAttribute('lang', val)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+// 授权样式
+.dvadmin-auth {
+  font-size: 0.8em;
+  position: fixed;
+  top: 50vh;
+  right: -163px;;
+  text-align: center;
+  color: #888888;
+  background-image: linear-gradient(to left, #d3d3d3, #989898, #888888, #363636, #888888, #989898, #d3d3d3);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -webkit-background-size: 200% 100%;
+  animation: bgp 6s infinite linear;
+  transform: rotate(90deg);
+}
+
+@import "~@/assets/style/public-class.scss";
+@import "~@/assets/style/yxt-public.scss";
+</style>
--- a/src/api/index.js
+++ b/src/api/index.js
@ -0,0 +1,17 @@
+import { assign, map } from 'lodash'
+import faker from 'faker/locale/zh_CN'
+import { service, request, serviceForMock, requestForMock, mock } from './service'
+import * as tools from './tools'
+
+const files = require.context('./modules', true, /\.api\.js$/)
+const generators = files.keys().map(key => files(key).default)
+
+export default assign({}, ...map(generators, generator => generator({
+  service,
+  request,
+  serviceForMock,
+  requestForMock,
+  mock,
+  faker,
+  tools
+})))
--- a/src/api/modules/sys.user.api.js
+++ b/src/api/modules/sys.user.api.js
@ -0,0 +1,31 @@
+import { find, assign } from 'lodash'
+
+const users = [
+  { username: 'admin', password: 'admin', uuid: 'admin-uuid', name: 'Admin' },
+  { username: 'editor', password: 'editor', uuid: 'editor-uuid', name: 'Editor' },
+  { username: 'user1', password: 'user1', uuid: 'user1-uuid', name: 'User1' }
+]
+
+export default ({ service, request, serviceForMock, requestForMock, mock, faker, tools }) => ({
+  /**
+   * @description 登录
+   * @param {Object} data 登录携带的信息
+   */
+  SYS_USER_LOGIN (data = {}) {
+    // 模拟数据
+    mock
+      .onAny('/login')
+      .reply(config => {
+        const user = find(users, tools.parse(config.data))
+        return user
+          ? tools.responseSuccess(assign({}, user, { token: faker.random.uuid() }))
+          : tools.responseError({}, '账号或密码不正确')
+      })
+    // 接口请求
+    return requestForMock({
+      url: '/login',
+      method: 'post',
+      data
+    })
+  }
+})
--- a/src/api/service.js
+++ b/src/api/service.js
@ -0,0 +1,257 @@
+import axios from 'axios'
+import Adapter from 'axios-mock-adapter'
+import { get } from 'lodash'
+import util from '@/libs/util'
+import { dataNotFound, errorCreate, errorLog } from './tools'
+import router from '@/router'
+import qs from 'qs'
+
+/**
+ * @description 创建请求实例
+ */
+
+export function getErrorMessage (msg) {
+  if (typeof msg === 'string') {
+    return msg
+  }
+  if (typeof msg === 'object') {
+    if (msg.code === 'token_not_valid') {
+      util.cookies.remove('token')
+      util.cookies.remove('uuid')
+      router.push({ path: '/login' })
+      router.go(0)
+      return '登录超时，请重新登录！'
+    }
+    if (msg.code === 'user_not_found') {
+      util.cookies.remove('token')
+      util.cookies.remove('uuid')
+      router.push({ path: '/login' })
+      router.go(0)
+      return '用户无效，请重新登录！'
+    }
+    return Object.values(msg)
+  }
+  if (Object.prototype.toString.call(msg).slice(8, -1) === 'Array') {
+    return msg
+  }
+  return msg
+}
+
+function createService () {
+  // 创建一个 axios 实例
+  const service = axios.create({
+    baseURL: util.baseURL(),
+    timeout: 20000,
+    paramsSerializer: (params) => qs.stringify(params, { indices: false })
+  })
+  // 请求拦截
+  service.interceptors.request.use(
+    config => config,
+    error => {
+      // 发送失败
+      console.log(error)
+      return Promise.reject(error)
+    }
+  )
+  // 响应拦截
+  service.interceptors.response.use(
+    async response => {
+      // dataAxios 是 axios 返回数据中的 data
+      let dataAxios = response.data || null
+      if (response.headers['content-disposition']) {
+        dataAxios = response
+      }
+      // 这个状态码是和后端约定的
+      const { code } = dataAxios
+      // 根据 code 进行判断
+      if (code === undefined) {
+        // 如果没有 code 代表这不是项目后端开发的接口 比如可能是 D2Admin 请求最新版本
+        return dataAxios
+      } else {
+        // 有 code 代表这是一个后端接口 可以进行进一步的判断
+        switch (code) {
+          case 2000:
+            // [ 示例 ] code === 2000 代表没有错误
+            // TODO 可能结果还需要code和msg进行后续处理，所以去掉.data返回全部结果
+            // return dataAxios.data
+            return dataAxios
+          case 401:
+            if (response.config.url === 'api/login/') {
+              errorCreate(`${getErrorMessage(dataAxios.msg)}`)
+              break
+            }
+            var res = await refreshTken()
+            // 设置请求超时次数
+            var config = response.config
+            util.cookies.set('token', res.data.access)
+            config.headers.Authorization = 'JWT ' + res.data.access
+            config.__retryCount = config.__retryCount || 0
+            if (config.__retryCount >= config.retry) {
+              // 如果重试次数超过3次则跳转登录页面
+              util.cookies.remove('token')
+              util.cookies.remove('uuid')
+              router.push({ path: '/login' })
+              errorCreate('认证已失效,请重新登录~')
+              break
+            }
+            config.__retryCount += 1
+            return service(config)
+          case 404:
+            dataNotFound(`${dataAxios.msg}`)
+            break
+          case 4000:
+            // 删除cookie
+            errorCreate(`${getErrorMessage(dataAxios.msg)}`)
+            break
+          case 400:
+            errorCreate(`${dataAxios.msg}`)
+            break
+          default:
+            // 不是正确的 code
+            errorCreate(`${dataAxios.msg}: ${response.config.url}`)
+            break
+        }
+      }
+    },
+    error => {
+      const status = get(error, 'response.status')
+      switch (status) {
+        case 400:
+          error.message = '请求错误'
+          break
+        case 401:
+          util.cookies.remove('token')
+          util.cookies.remove('uuid')
+          util.cookies.remove('refresh')
+          router.push({ path: '/login' })
+          error.message = '认证已失效,请重新登录~'
+          break
+        case 403:
+          error.message = '拒绝访问'
+          break
+        case 404:
+          error.message = `请求地址出错: ${error.response.config.url}`
+          break
+        case 408:
+          error.message = '请求超时'
+          break
+        case 500:
+          error.message = '服务器内部错误'
+          break
+        case 501:
+          error.message = '服务未实现'
+          break
+        case 502:
+          error.message = '网关错误'
+          break
+        case 503:
+          error.message = '服务不可用'
+          break
+        case 504:
+          error.message = '网关超时'
+          break
+        case 505:
+          error.message = 'HTTP版本不受支持'
+          break
+        default:
+          break
+      }
+      errorLog(error)
+      return Promise.reject(error)
+    }
+  )
+  return service
+}
+
+/**
+ * @description 创建请求方法
+ * @param {Object} service axios 实例
+ */
+function createRequestFunction (service) {
+  // 校验是否为租户模式。租户模式把域名替换成 域名 加端口
+  return function (config) {
+    const token = util.cookies.get('token')
+    // 进行布尔值兼容
+    var params = get(config, 'params', {})
+    for (const key of Object.keys(params)) {
+      if (String(params[key]) === 'true') {
+        params[key] = 1
+      }
+      if (String(params[key]) === 'false') {
+        params[key] = 0
+      }
+    }
+    const configDefault = {
+      headers: {
+        Authorization: 'JWT ' + token,
+        'Content-Type': get(config, 'headers.Content-Type', 'application/json')
+      },
+      timeout: 60000,
+      baseURL: util.baseURL(),
+      data: {},
+      params: params,
+      retry: 3, // 重新请求次数
+      retryDelay: 1000 // 重新请求间隔
+    }
+    return service(Object.assign(configDefault, config))
+  }
+}
+
+// 用于真实网络请求的实例和请求方法
+export const service = createService()
+export const request = createRequestFunction(service)
+
+// 用于模拟网络请求的实例和请求方法
+export const serviceForMock = createService()
+export const requestForMock = createRequestFunction(serviceForMock)
+
+// 网络请求数据模拟工具
+export const mock = new Adapter(serviceForMock)
+
+// 刷新token
+const refreshTken = function () {
+  const refresh = util.cookies.get('refresh')
+  return request({
+    url: 'token/refresh/',
+    method: 'post',
+    data: {
+      refresh: refresh
+    }
+  })
+}
+
+/**
+ * 下载文件
+ * @param url
+ * @param params
+ * @param method
+ * @param filename
+ */
+export const downloadFile = function ({
+  url,
+  params,
+  method,
+  filename = '文件导出'
+}) {
+  request({
+    url: url,
+    method: method,
+    params: params,
+    responseType: 'blob'
+    // headers: {Accept: 'application/vnd.openxmlformats-officedocument'}
+  }).then(res => {
+    const xlsxName = window.decodeURI(res.headers['content-disposition'].split('=')[1])
+    const fileName = xlsxName || `${filename}.xlsx`
+    if (res) {
+      const blob = new Blob([res.data], { type: 'charset=utf-8' })
+      const elink = document.createElement('a')
+      elink.download = fileName
+      elink.style.display = 'none'
+      elink.href = URL.createObjectURL(blob)
+      document.body.appendChild(elink)
+      elink.click()
+      URL.revokeObjectURL(elink.href) // 释放URL 对象0
+      document.body.removeChild(elink)
+    }
+  })
+}
--- a/src/api/tools.js
+++ b/src/api/tools.js
@ -0,0 +1,119 @@
+/*
+ * @创建文件时间: 2021-06-01 22:41:19
+ * @Auther: 猿小天
+ * @最后修改人: 猿小天
+ * @最后修改时间: 2021-08-01 02:35:45
+ * 联系Qq:1638245306
+ * @文件介绍:
+ */
+import { Message } from 'element-ui'
+import store from '@/store'
+import util from '@/libs/util'
+
+/**
+ * @description 安全地解析 json 字符串
+ * @param {String} jsonString 需要解析的 json 字符串
+ * @param {String} defaultValue 默认值
+ */
+export function parse (jsonString = '{}', defaultValue = {}) {
+  let result = defaultValue
+  try {
+    result = JSON.parse(jsonString)
+  } catch (error) {
+    console.log(error)
+  }
+  return result
+}
+
+/**
+ * @description 接口请求返回
+ * @param {Any} data 返回值
+ * @param {String} msg 状态信息
+ * @param {Number} code 状态码
+ */
+export function response (data = {}, msg = '', code = 0) {
+  return [
+    200,
+    { code, msg, data }
+  ]
+}
+
+/**
+ * @description 接口请求返回 正确返回
+ * @param {Any} data 返回值
+ * @param {String} msg 状态信息
+ */
+export function responseSuccess (data = {}, msg = '成功') {
+  return response(data, msg)
+}
+
+/**
+ * @description 接口请求返回 错误返回
+ * @param {Any} data 返回值
+ * @param {String} msg 状态信息
+ * @param {Number} code 状态码
+ */
+export function responseError (data = {}, msg = '请求失败', code = 500) {
+  return response(data, msg, code)
+}
+
+/**
+ * @description 记录和显示错误
+ * @param {Error} error 错误对象
+ */
+export function errorLog (error) {
+  // 添加到日志
+  store.dispatch('d2admin/log/push', {
+    message: '数据请求异常',
+    type: 'danger',
+    meta: {
+      error
+    }
+  })
+  // 打印到控制台
+  if (process.env.NODE_ENV === 'development') {
+    util.log.danger('>>>>>> Error >>>>>>')
+    console.log(error)
+  }
+  // 显示提示
+  Message({
+    message: error.message,
+    type: 'error',
+    duration: 5 * 1000
+  })
+}
+
+/**
+ * @description 创建一个错误
+ * @param {String} msg 错误信息
+ */
+export function errorCreate (msg) {
+  const error = new Error(msg)
+  errorLog(error)
+  throw error
+}
+
+/**
+ * @description 数据404消息提示
+ * @param {String} msg 错误信息
+ */
+export function dataNotFound (msg) {
+  // 显示提示
+  Message({
+    message: msg,
+    type: 'info',
+    duration: 5 * 1000
+  })
+}
+
+/**
+ * @description 数据请求成功
+ * @param {String} msg 成功信息
+ */
+export function successMsg (msg) {
+  Message({
+    message: msg,
+    type: 'success',
+    duration: 5 * 1000
+  })
+}
--- a/src/api/websocket.js
+++ b/src/api/websocket.js
@ -0,0 +1,96 @@
+import ElementUI from 'element-ui'
+import util from '@/libs/util'
+import store from '@/store'
+function initWebSocket (e) {
+  const token = util.cookies.get('token')
+  if (token) {
+    const wsUri = util.wsBaseURL() + 'ws/' + token + '/'
+    this.socket = new WebSocket(wsUri)// 这里面的this都指向vue
+    this.socket.onerror = webSocketOnError
+    this.socket.onmessage = webSocketOnMessage
+    this.socket.onclose = closeWebsocket
+  }
+}
+
+function webSocketOnError (e) {
+  ElementUI.Notification({
+    title: '',
+    message: 'WebSocket连接发生错误' + JSON.stringify(e),
+    type: 'error',
+    position: 'bottom-right',
+    duration: 3000
+  })
+}
+
+/**
+ * 接收消息
+ * @param e
+ * @returns {any}
+ */
+function webSocketOnMessage (e) {
+  const data = JSON.parse(e.data)
+  const { refresh_unread, systemConfig } = data
+  if (refresh_unread) {
+    // 更新消息通知条数
+    store.dispatch('d2admin/messagecenter/setUnread')
+  }
+  if (systemConfig) {
+    // 更新系统配置
+    this.$store.dispatch('d2admin/settings/load')
+  }
+  if (data.contentType === 'SYSTEM') {
+    ElementUI.Notification({
+      title: '系统消息',
+      message: data.content,
+      type: 'success',
+      position: 'bottom-right',
+      duration: 3000
+    })
+  } else if (data.contentType === 'ERROR') {
+    ElementUI.Notification({
+      title: '',
+      message: data.content,
+      type: 'error',
+      position: 'bottom-right',
+      duration: 0
+    })
+  } else if (data.contentType === 'INFO') {
+    ElementUI.Notification({
+      title: '温馨提示',
+      message: data.content,
+      type: 'success',
+      position: 'bottom-right',
+      duration: 0
+    })
+  } else {
+    ElementUI.Notification({
+      title: '温馨提示',
+      message: data.content,
+      type: 'info',
+      position: 'bottom-right',
+      duration: 3000
+    })
+  }
+}
+// 关闭websiocket
+function closeWebsocket () {
+  console.log('连接已关闭...')
+  ElementUI.Notification({
+    title: 'websocket',
+    message: '连接已关闭...',
+    type: 'danger',
+    position: 'bottom-right',
+    duration: 3000
+  })
+}
+
+/**
+ * 发送消息
+ * @param message
+ */
+function webSocketSend (message) {
+  this.socket.send(JSON.stringify(message))
+}
+export default {
+  initWebSocket, closeWebsocket, webSocketSend
+}
--- a/src/assets/fonts/SongtiSCBlack.js
+++ b/src/assets/fonts/SongtiSCBlack.js
--- a/src/assets/style/animate/vue-transition.scss
+++ b/src/assets/style/animate/vue-transition.scss
@ -0,0 +1,27 @@
+// 过渡动画 横向渐变
+.fade-transverse-leave-active,
+.fade-transverse-enter-active {
+  transition: all .5s;
+}
+.fade-transverse-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+.fade-transverse-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+// 过渡动画 缩放渐变
+.fade-scale-leave-active,
+.fade-scale-enter-active {
+  transition: all .3s;
+}
+.fade-scale-enter {
+  opacity: 0;
+  transform: scale(1.2);
+}
+.fade-scale-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
--- a/src/assets/style/fixed/base.scss
+++ b/src/assets/style/fixed/base.scss
@ -0,0 +1,12 @@
+// 优化显示
+html, body {
+  margin: 0px;
+  height: 100%;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  #app {
+    @extend %full;
+    a {
+      text-decoration: none;
+    }
+  }
+}
--- a/src/assets/style/fixed/element.scss
+++ b/src/assets/style/fixed/element.scss
@ -0,0 +1,31 @@
+// element 样式补丁
+.el-card {
+  &.is-always-shadow {
+    box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
+  }
+  &.is-hover-shadow {
+    &:hover {
+      box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
+    }
+  }
+}
+
+.el-menu--horizontal {
+  border-bottom: none !important;
+}
+
+.el-tabs__item:focus.is-active.is-focus:not(:active) {
+  box-shadow: none !important;
+}
+
+// 修复IE宽度不能撑满
+.el-table__body,
+.el-table__header {
+  width: 100% !important;
+}
+
+// Chrome下表格头部错位修复
+.el-table th.gutter,
+.el-table colgroup.gutter {
+  display: table-cell !important;
+}
--- a/src/assets/style/fixed/markdown.scss
+++ b/src/assets/style/fixed/markdown.scss
@ -0,0 +1,9 @@
+// markdown 样式补丁
+.markdown-body {
+  ul {
+    list-style: disc;
+  }
+  h1, h2 {
+    border-bottom: none;
+  }
+}
--- a/src/assets/style/fixed/n-progress.scss
+++ b/src/assets/style/fixed/n-progress.scss
@ -0,0 +1,8 @@
+#nprogress {
+  .bar {
+    background: $color-primary !important;
+  }
+  .peg {
+    box-shadow: 0 0 10px $color-primary, 0 0 5px $color-primary !important;
+  }
+}
--- a/src/assets/style/fixed/tree-view.scss
+++ b/src/assets/style/fixed/tree-view.scss
@ -0,0 +1,5 @@
+.tree-view-wrapper.tree-view-small {
+  .tree-view-item {
+    font-size: 10px;
+  }
+}
--- a/src/assets/style/fixed/vue-grid-layout.scss
+++ b/src/assets/style/fixed/vue-grid-layout.scss
@ -0,0 +1,9 @@
+// vue-splitpane 样式补丁
+.vue-grid-item {
+  &.vue-grid-placeholder {
+    border: 1px solid $color-border-1;
+    background-color: rgba(#FFF, .3);
+    opacity: 1;
+    border-radius: 4px;
+  }
+}
--- a/src/assets/style/fixed/vue-splitpane.scss
+++ b/src/assets/style/fixed/vue-splitpane.scss
@ -0,0 +1,5 @@
+// vue-splitpane 样式补丁
+.splitter-pane-resizer {
+  background-color: $color-border-1 !important;
+  opacity: 1 !important;
+}
--- a/src/assets/style/public-class.scss
+++ b/src/assets/style/public-class.scss
@ -0,0 +1,67 @@
+@import 'public';
+
+// 补丁 base
+@import '~@/assets/style/fixed/base.scss';
+// 补丁 element
+@import '~@/assets/style/fixed/element.scss';
+// 补丁 markdown
+@import '~@/assets/style/fixed/markdown.scss';
+// 补丁 n-progress
+@import '~@/assets/style/fixed/n-progress.scss';
+// 补丁 vue-splitpane
+@import '~@/assets/style/fixed/vue-splitpane.scss';
+// 补丁 vue-grid-layout
+@import '~@/assets/style/fixed/vue-grid-layout.scss';
+// 补丁 tree-view
+@import '~@/assets/style/fixed/tree-view.scss';
+
+// 动画
+@import '~@/assets/style/animate/vue-transition.scss';
+
+// 在这里写公用的class
+// 注意 这个文件里只写class
+// mixin等内容请在 public.scss 里书写
+
+// 文字相关
+.#{$prefix}-text-center {
+  text-align: center;
+}
+
+// 浮动相关
+.#{$prefix}-fl {
+  float: left;
+}
+.#{$prefix}-fr {
+  float: right;
+}
+
+// 边距相关
+$sizes: (0, 5, 10, 15, 20);
+
+@for $index from 1 to 6 {
+  .#{$prefix}-m-#{nth($sizes, $index)} { margin: #{nth($sizes, $index)}px !important; }
+  .#{$prefix}-mt-#{nth($sizes, $index)} { margin-top: #{nth($sizes, $index)}px !important; }
+  .#{$prefix}-mr-#{nth($sizes, $index)} { margin-right: #{nth($sizes, $index)}px !important; }
+  .#{$prefix}-mb-#{nth($sizes, $index)} { margin-bottom: #{nth($sizes, $index)}px !important; }
+  .#{$prefix}-ml-#{nth($sizes, $index)} { margin-left: #{nth($sizes, $index)}px !important; }
+
+  .#{$prefix}-p-#{nth($sizes, $index)} { padding: #{nth($sizes, $index)}px !important; }
+  .#{$prefix}-pt-#{nth($sizes, $index)} { padding-top: #{nth($sizes, $index)}px !important; }
+  .#{$prefix}-pr-#{nth($sizes, $index)} { padding-right: #{nth($sizes, $index)}px !important; }
+  .#{$prefix}-pb-#{nth($sizes, $index)} { padding-bottom: #{nth($sizes, $index)}px !important; }
+  .#{$prefix}-pl-#{nth($sizes, $index)} { padding-left: #{nth($sizes, $index)}px !important; }
+}
+
+// 快速使用
+
+.#{$prefix}-m { margin: 20px !important; }
+.#{$prefix}-mt { margin-top: 20px !important; }
+.#{$prefix}-mr { margin-right: 20px !important; }
+.#{$prefix}-mb { margin-bottom: 20px !important; }
+.#{$prefix}-ml { margin-left: 20px !important; }
+
+.#{$prefix}-p { padding: 20px !important; }
+.#{$prefix}-pt { padding-top: 20px !important; }
+.#{$prefix}-pr { padding-right: 20px !important; }
+.#{$prefix}-pb { padding-bottom: 20px !important; }
+.#{$prefix}-pl { padding-left: 20px !important; }
--- a/src/assets/style/public.scss
+++ b/src/assets/style/public.scss
@ -0,0 +1,44 @@
+@import '~@/assets/style/unit/color.scss';
+
+// 工具类名统一前缀
+$prefix: d2;
+
+// 禁止用户选中 鼠标变为手形
+%unable-select {
+  user-select: none;
+  cursor: pointer;
+}
+
+// 填满父元素
+// 组要父元素 position: relative | absolute;
+%full {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+}
+
+// flex 垂直水平居中
+%flex-center-row {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+}
+%flex-center-col {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+// 将元素模拟成卡片外观
+%card {
+  border: 1px solid #dddee1;
+  border-color: #e9eaec;
+  background: #fff;
+  border-radius: 4px;
+  font-size: 14px;
+  position: relative;
+}
--- a/src/assets/style/theme/chester/index.scss
+++ b/src/assets/style/theme/chester/index.scss
@ -0,0 +1,2 @@
+@import './setting.scss';
+@import '../theme.scss';
--- a/src/assets/style/theme/chester/setting.scss
+++ b/src/assets/style/theme/chester/setting.scss
@ -0,0 +1,64 @@
+// 主题名称
+$theme-name: 'chester';
+// 主题背景颜色
+$theme-bg-color: #2C3643;
+// 主题背景图片遮罩
+$theme-bg-mask: rgba(#000, 0);
+
+// 消息提示
+$theme-message-info-background-color: #FFFFFF;
+$theme-message-info-text-color: #222A34;
+$theme-message-info-border-color: #222A34;
+
+// container组件
+$theme-container-background-color: rgba(#FFF, 1);
+$theme-container-header-footer-background-color: #FFF;
+$theme-container-border-inner: 1px solid #CFD7E5;
+$theme-container-border-outer: 1px solid #2A2D2E;
+
+$theme-multiple-page-control-color: #CCCCCC;
+$theme-multiple-page-control-color-active: #242D38;
+$theme-multiple-page-control-nav-prev-color: #CCCCCC;
+$theme-multiple-page-control-nav-next-color: #CCCCCC;
+$theme-multiple-page-control-border-color: #2A2D2E;
+$theme-multiple-page-control-border-color-active: #FFFFFF;
+$theme-multiple-page-control-background-color: #242D38;
+$theme-multiple-page-control-background-color-active: #FFFFFF;
+
+// 顶栏和侧边栏中展开的菜单 hover 状态下
+$theme-menu-item-color-hover: #CCCCCC;
+$theme-menu-item-background-color-hover: #2A2D2E;
+
+// 顶栏上的文字颜色
+$theme-header-item-color: #CCCCCC;
+$theme-header-item-background-color: transparent;
+// 顶栏上的项目在 hover 时
+$theme-header-item-color-hover: #CCCCCC;
+$theme-header-item-background-color-hover: #2A2D2E;
+// 顶栏上的项目在 focus 时
+$theme-header-item-color-focus: #CCCCCC;
+$theme-header-item-background-color-focus: #222A34;
+// 顶栏上的项目在 active 时
+$theme-header-item-color-active: #FFFFFF;
+$theme-header-item-background-color-active: #222A34;
+
+// 侧边栏上的文字颜色
+$theme-aside-item-color: #CCCCCC;
+$theme-aside-item-background-color: transparent;
+// 侧边栏上的项目在 hover 时
+$theme-aside-item-color-hover: #CCCCCC;
+$theme-aside-item-background-color-hover: #2A2D2E;
+// 侧边栏上的项目在 focus 时
+$theme-aside-item-color-focus: #CCCCCC;
+$theme-aside-item-background-color-focus: #222A34;
+// 侧边栏上的项目在 active 时
+$theme-aside-item-color-active: #FFFFFF;
+$theme-aside-item-background-color-active: #222A34;
+
+// 侧边栏菜单为空的时候显示的元素
+$theme-aside-menu-empty-icon-color: #CCCCCC;
+$theme-aside-menu-empty-text-color: #CCCCCC;
+$theme-aside-menu-empty-background-color: #242D38;
+$theme-aside-menu-empty-icon-color-hover: #FFFFFF;
+$theme-aside-menu-empty-text-color-hover: #FFFFFF;
+$theme-aside-menu-empty-background-color-hover: #242D38;
--- a/src/assets/style/theme/d2/index.scss
+++ b/src/assets/style/theme/d2/index.scss
@ -0,0 +1,2 @@
+@import './setting.scss';
+@import '../theme.scss';
--- a/src/assets/style/theme/d2/setting.scss
+++ b/src/assets/style/theme/d2/setting.scss
@ -0,0 +1,64 @@
+// 主题名称
+$theme-name: 'd2';
+// 主题背景颜色
+$theme-bg-color: #ebf1f6;
+// 主题背景图片遮罩
+$theme-bg-mask: rgba(#000, 0);
+
+// 消息提示
+$theme-message-info-background-color: $color-bg;
+$theme-message-info-text-color: $color-text-normal;
+$theme-message-info-border-color: $color-border-1;
+
+// container组件
+$theme-container-background-color: rgba(#FFF, 1);
+$theme-container-header-footer-background-color: #FFF;
+$theme-container-border-inner: 1px solid #cfd7e5;
+$theme-container-border-outer: 1px solid #cfd7e5;
+
+$theme-multiple-page-control-color: $color-text-normal;
+$theme-multiple-page-control-color-active: #2f74ff;
+$theme-multiple-page-control-nav-prev-color: #cfd7e5;
+$theme-multiple-page-control-nav-next-color: #cfd7e5;
+$theme-multiple-page-control-border-color: #cfd7e5;
+$theme-multiple-page-control-border-color-active: #FFF;
+$theme-multiple-page-control-background-color: rgba(#000, .03);
+$theme-multiple-page-control-background-color-active: #FFF;
+
+// 顶栏和侧边栏中展开的菜单 hover 状态下
+$theme-menu-item-color-hover: #293849;
+$theme-menu-item-background-color-hover: #ecf5ff;
+
+// 顶栏上的文字颜色
+$theme-header-item-color: $color-text-normal;
+$theme-header-item-background-color: transparent;
+// 顶栏上的项目在 hover 时
+$theme-header-item-color-hover: #2f74ff;
+$theme-header-item-background-color-hover: rgba(#FFF, .5);
+// 顶栏上的项目在 focus 时
+$theme-header-item-color-focus: #2f74ff;
+$theme-header-item-background-color-focus: rgba(#FFF, .5);
+// 顶栏上的项目在 active 时
+$theme-header-item-color-active: #2f74ff;
+$theme-header-item-background-color-active: rgba(#FFF, .5);
+
+// 侧边栏上的文字颜色
+$theme-aside-item-color: $color-text-normal;
+$theme-aside-item-background-color: transparent;
+// 侧边栏上的项目在 hover 时
+$theme-aside-item-color-hover: #2f74ff;
+$theme-aside-item-background-color-hover: rgba(#FFF, .5);
+// 侧边栏上的项目在 focus 时
+$theme-aside-item-color-focus: #2f74ff;
+$theme-aside-item-background-color-focus: rgba(#FFF, .5);
+// 侧边栏上的项目在 active 时
+$theme-aside-item-color-active: #2f74ff;
+$theme-aside-item-background-color-active: rgba(#FFF, .5);
+
+// 侧边栏菜单为空的时候显示的元素
+$theme-aside-menu-empty-icon-color: $color-text-normal;
+$theme-aside-menu-empty-text-color: $color-text-normal;
+$theme-aside-menu-empty-background-color: rgba(#000, .03);
+$theme-aside-menu-empty-icon-color-hover: $color-text-main;
+$theme-aside-menu-empty-text-color-hover: $color-text-main;
+$theme-aside-menu-empty-background-color-hover: rgba(#000, .05);
--- a/src/assets/style/theme/element/index.scss
+++ b/src/assets/style/theme/element/index.scss
@ -0,0 +1,2 @@
+@import './setting.scss';
+@import '../theme.scss';
--- a/src/assets/style/theme/element/setting.scss
+++ b/src/assets/style/theme/element/setting.scss
@ -0,0 +1,64 @@
+// 主题名称
+$theme-name: 'element';
+// 主题背景颜色
+$theme-bg-color: #314255;
+// 主题背景图片遮罩
+$theme-bg-mask: rgba(#000, 0);
+
+// 消息提示
+$theme-message-info-background-color: #FFFFFF;
+$theme-message-info-text-color: #202D3D;
+$theme-message-info-border-color: #202D3D;
+
+// container组件
+$theme-container-background-color: rgba(#FFF, 1);
+$theme-container-header-footer-background-color: #FFF;
+$theme-container-border-inner: 1px solid #CFD7E5;
+$theme-container-border-outer: 1px solid #011527;
+
+$theme-multiple-page-control-color: #BFCBD9;
+$theme-multiple-page-control-color-active: #46A0FC;
+$theme-multiple-page-control-nav-prev-color: #BFCBD9;
+$theme-multiple-page-control-nav-next-color: #BFCBD9;
+$theme-multiple-page-control-border-color: #011527;
+$theme-multiple-page-control-border-color-active: #FFFFFF;
+$theme-multiple-page-control-background-color: #212D3D;
+$theme-multiple-page-control-background-color-active: #FFFFFF;
+
+// 顶栏和侧边栏中展开的菜单 hover 状态下
+$theme-menu-item-color-hover: #BFCBD9;
+$theme-menu-item-background-color-hover: #011527;
+
+// 顶栏上的文字颜色
+$theme-header-item-color: #BFCBD9;
+$theme-header-item-background-color: transparent;
+// 顶栏上的项目在 hover 时
+$theme-header-item-color-hover: #BFCBD9;
+$theme-header-item-background-color-hover: #011527;
+// 顶栏上的项目在 focus 时
+$theme-header-item-color-focus: #BFCBD9;
+$theme-header-item-background-color-focus: #202D3D;
+// 顶栏上的项目在 active 时
+$theme-header-item-color-active: #46A0FC;
+$theme-header-item-background-color-active: #202D3D;
+
+// 侧边栏上的文字颜色
+$theme-aside-item-color: #BFCBD9;
+$theme-aside-item-background-color: transparent;
+// 侧边栏上的项目在 hover 时
+$theme-aside-item-color-hover: #BFCBD9;
+$theme-aside-item-background-color-hover: #011527;
+// 侧边栏上的项目在 focus 时
+$theme-aside-item-color-focus: #BFCBD9;
+$theme-aside-item-background-color-focus: #202D3D;
+// 侧边栏上的项目在 active 时
+$theme-aside-item-color-active: #46A0FC;
+$theme-aside-item-background-color-active: #202D3D;
+
+// 侧边栏菜单为空的时候显示的元素
+$theme-aside-menu-empty-icon-color: #BFCBD9;
+$theme-aside-menu-empty-text-color: #BFCBD9;
+$theme-aside-menu-empty-background-color: #202D3D;
+$theme-aside-menu-empty-icon-color-hover: #46A0FC;
+$theme-aside-menu-empty-text-color-hover: #46A0FC;
+$theme-aside-menu-empty-background-color-hover: #202D3D;
--- a/src/assets/style/theme/line/index.scss
+++ b/src/assets/style/theme/line/index.scss
@ -0,0 +1,2 @@
+@import './setting.scss';
+@import '../theme.scss';
--- a/src/assets/style/theme/line/setting.scss
+++ b/src/assets/style/theme/line/setting.scss
@ -0,0 +1,64 @@
+// 主题名称
+$theme-name: 'line';
+// 主题背景颜色
+$theme-bg-color: #f8f8f9;
+// 主题背景图片遮罩
+$theme-bg-mask: rgba(#000, 0);
+
+// 消息提示
+$theme-message-info-background-color: $color-bg;
+$theme-message-info-text-color: $color-text-normal;
+$theme-message-info-border-color: $color-border-1;
+
+// container组件
+$theme-container-background-color: rgba(#FFF, .8);
+$theme-container-header-footer-background-color: #FFF;
+$theme-container-border-inner: 1px solid $color-border-2;
+$theme-container-border-outer: 1px solid #cfd7e5;
+
+$theme-multiple-page-control-color: #FFF;
+$theme-multiple-page-control-color-active: $color-text-normal;
+$theme-multiple-page-control-nav-prev-color: #cfd7e5;
+$theme-multiple-page-control-nav-next-color: #cfd7e5;
+$theme-multiple-page-control-border-color: #cfd7e5;
+$theme-multiple-page-control-border-color-active: #FFF;
+$theme-multiple-page-control-background-color: #cfd7e5;
+$theme-multiple-page-control-background-color-active: #FFF;
+
+// 顶栏和侧边栏中展开的菜单 hover 状态下
+$theme-menu-item-color-hover: #293849;
+$theme-menu-item-background-color-hover: #EFEFEF;
+
+// 顶栏上的文字颜色
+$theme-header-item-color: $color-text-normal;
+$theme-header-item-background-color: transparent;
+// 顶栏上的项目在 hover 时
+$theme-header-item-color-hover: $color-text-main;
+$theme-header-item-background-color-hover: rgba(#000, .02);
+// 顶栏上的项目在 focus 时
+$theme-header-item-color-focus: $color-text-main;
+$theme-header-item-background-color-focus: rgba(#000, .02);
+// 顶栏上的项目在 active 时
+$theme-header-item-color-active: $color-text-main;
+$theme-header-item-background-color-active: rgba(#000, .03);
+
+// 侧边栏上的文字颜色
+$theme-aside-item-color: $color-text-normal;
+$theme-aside-item-background-color: transparent;
+// 侧边栏上的项目在 hover 时
+$theme-aside-item-color-hover: $color-text-main;
+$theme-aside-item-background-color-hover: rgba(#000, .02);
+// 侧边栏上的项目在 focus 时
+$theme-aside-item-color-focus: $color-text-main;
+$theme-aside-item-background-color-focus: rgba(#000, .02);
+// 侧边栏上的项目在 active 时
+$theme-aside-item-color-active: $color-text-main;
+$theme-aside-item-background-color-active: rgba(#000, .03);
+
+// 侧边栏菜单为空的时候显示的元素
+$theme-aside-menu-empty-icon-color: $color-text-normal;
+$theme-aside-menu-empty-text-color: $color-text-normal;
+$theme-aside-menu-empty-background-color: rgba(#000, .03);
+$theme-aside-menu-empty-icon-color-hover: $color-text-main;
+$theme-aside-menu-empty-text-color-hover: $color-text-main;
+$theme-aside-menu-empty-background-color-hover: rgba(#000, .05);
--- a/src/assets/style/theme/register.scss
+++ b/src/assets/style/theme/register.scss
@ -0,0 +1,9 @@
+@import '~@/assets/style/theme/theme-base.scss';
+
+@import '~@/assets/style/theme/d2/index.scss';
+@import '~@/assets/style/theme/chester/index.scss';
+@import '~@/assets/style/theme/element/index.scss';
+@import '~@/assets/style/theme/line/index.scss';
+@import '~@/assets/style/theme/star/index.scss';
+@import '~@/assets/style/theme/tomorrow-night-blue/index.scss';
+@import '~@/assets/style/theme/violet/index.scss';
--- a/src/assets/style/theme/star/index.scss
+++ b/src/assets/style/theme/star/index.scss
@ -0,0 +1,2 @@
+@import './setting.scss';
+@import '../theme.scss';
--- a/src/assets/style/theme/star/setting.scss
+++ b/src/assets/style/theme/star/setting.scss
@ -0,0 +1,64 @@
+// 主题名称
+$theme-name: 'star';
+// 主题背景颜色
+$theme-bg-color: #EFF4F8;
+// 主题背景图片遮罩
+$theme-bg-mask: rgba(#000, .3);
+
+// 消息提示
+$theme-message-info-background-color: $color-bg;
+$theme-message-info-text-color: $color-text-normal;
+$theme-message-info-border-color: $color-border-1;
+
+// container组件
+$theme-container-background-color: rgba(#FFF, .9);
+$theme-container-header-footer-background-color: #FFF;
+$theme-container-border-inner: 1px solid $color-border-1;
+$theme-container-border-outer: 1px solid #114450;
+
+$theme-multiple-page-control-color: #FFF;
+$theme-multiple-page-control-color-active: $color-text-normal;
+$theme-multiple-page-control-nav-prev-color: #FFF;
+$theme-multiple-page-control-nav-next-color: #FFF;
+$theme-multiple-page-control-border-color: #114450;
+$theme-multiple-page-control-border-color-active: #FFF;
+$theme-multiple-page-control-background-color: rgba(#FFF, .5);
+$theme-multiple-page-control-background-color-active: #FFF;
+
+// 顶栏和侧边栏中展开的菜单 hover 状态下
+$theme-menu-item-color-hover: #293849;
+$theme-menu-item-background-color-hover: #ecf5ff;
+
+// 顶栏上的文字颜色
+$theme-header-item-color: #FFF;
+$theme-header-item-background-color: transparent;
+// 顶栏上的项目在 hover 时
+$theme-header-item-color-hover: #FFF;
+$theme-header-item-background-color-hover: rgba(#000, .2);
+// 顶栏上的项目在 focus 时
+$theme-header-item-color-focus: #FFF;
+$theme-header-item-background-color-focus: rgba(#000, .2);
+// 顶栏上的项目在 active 时
+$theme-header-item-color-active: #FFF;
+$theme-header-item-background-color-active: rgba(#000, .3);
+
+// 侧边栏上的文字颜色
+$theme-aside-item-color: #FFF;
+$theme-aside-item-background-color: transparent;
+// 侧边栏上的项目在 hover 时
+$theme-aside-item-color-hover: #FFF;
+$theme-aside-item-background-color-hover: rgba(#000, .2);
+// 侧边栏上的项目在 focus 时
+$theme-aside-item-color-focus: #FFF;
+$theme-aside-item-background-color-focus: rgba(#000, .2);
+// 侧边栏上的项目在 active 时
+$theme-aside-item-color-active: #FFF;
+$theme-aside-item-background-color-active: rgba(#000, .3);
+
+// 侧边栏菜单为空的时候显示的元素
+$theme-aside-menu-empty-icon-color: #FFF;
+$theme-aside-menu-empty-text-color: #FFF;
+$theme-aside-menu-empty-background-color: rgba(#FFF, .2);
+$theme-aside-menu-empty-icon-color-hover: #FFF;
+$theme-aside-menu-empty-text-color-hover: #FFF;
+$theme-aside-menu-empty-background-color-hover: rgba(#FFF, .3);
--- a/src/assets/style/theme/theme-base.scss
+++ b/src/assets/style/theme/theme-base.scss
@ -0,0 +1,454 @@
+// 减小弹出菜单的项目高度
+.el-menu--popup {
+  .el-menu-item {
+    height: 36px;
+    line-height: 36px;
+  }
+  .el-submenu__title {
+    height: 36px;
+    line-height: 36px;
+  }
+}
+
+// 整体框架结构
+.d2-layout-header-aside-group {
+  height: 100%;
+  width: 100%;
+  min-width: 900px;
+  background-size: cover;
+  background-position: center;
+  overflow: hidden;
+  position: relative;
+  // 背景上面的半透明遮罩
+  .d2-layout-header-aside-mask {
+    @extend %full;
+  }
+  // 内容层
+  .d2-layout-header-aside-content {
+    @extend %full;
+    .d2-theme-header {
+      height: 60px;
+      .d2-theme-header-menu {
+        overflow: hidden;
+        &.is-scrollable {
+          position: relative;
+          padding: 0 20px;
+          .d2-theme-header-menu__prev, .d2-theme-header-menu__next {
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+          }
+        }
+        .d2-theme-header-menu__content {
+          overflow: hidden;
+          .d2-theme-header-menu__scroll {
+            white-space: nowrap;
+            position: relative;
+            -webkit-transition: -webkit-transform .3s;
+            transition: -webkit-transform .3s;
+            transition: transform .3s;
+            transition: transform .3s, -webkit-transform .3s;
+            transition: transform .3s,-webkit-transform .3s;
+            float: left;
+          }
+        }
+        .d2-theme-header-menu__prev, .d2-theme-header-menu__next {
+          height: 60px;
+          position: absolute;
+          top: 0;
+          font-size: 20px;
+          cursor: pointer;
+          display: none;
+        }
+        .d2-theme-header-menu__prev {
+          left: 0;
+          border-top-left-radius: 2px;
+          border-bottom-left-radius: 2px;
+        }
+        .d2-theme-header-menu__next {
+          right: 0;
+          border-top-right-radius: 2px;
+          border-bottom-right-radius: 2px;
+        }
+      }
+    }
+    .d2-theme-container {
+      .d2-theme-container-aside {
+        position: relative;
+        .d2-layout-header-aside-menu-side {
+          @extend %full;
+          overflow: hidden;
+        }
+      }
+      .d2-theme-container-transition {
+        transition: width .3s;
+      }
+      .d2-theme-container-main {
+        padding: 0px;
+        position: relative;
+        overflow: hidden;
+        .d2-theme-container-main-layer {
+          position: absolute;
+          top: 0px;
+          bottom: 0px;
+          left: 0px;
+          right: 0px;
+        }
+        .d2-theme-container-main-body {
+          position: relative;
+        }
+      }
+    }
+  }
+}
+
+// 主题公用
+.d2-layout-header-aside-group {
+  &.grayMode {
+    -webkit-filter: grayscale(100%);
+    -moz-filter: grayscale(100%);
+    -ms-filter: grayscale(100%);
+    -o-filter: grayscale(100%);
+    filter: grayscale(100%);
+    filter: gray;
+  }
+  // 主体
+  .d2-layout-header-aside-content {
+    // [布局] 顶栏
+    .d2-theme-header {
+      // logo区域
+      .logo-group {
+        float: left;
+        text-align: center;
+        img {
+          height: 60px;
+        }
+      }
+      .logo-transition {
+        transition: width .3s;
+      }
+      // 折叠侧边栏切换按钮
+      .toggle-aside-btn {
+        float: left;
+        height: 60px;
+        width: 60px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        @extend %unable-select;
+        i {
+          font-size: 20px;
+          margin-top: 4px;
+        }
+      }
+      // [菜单] 顶栏
+      .el-menu {
+        float: left;
+        border-bottom: none;
+        background-color: transparent;
+        %header-menu-item {
+          @extend %unable-select;
+          i.fa {
+            font-size: 16px;
+            margin-right: 4px;
+          }
+        }
+        .el-menu-item {
+          @extend %header-menu-item;
+          border-bottom: none;
+        }
+        .el-submenu {
+          @extend %header-menu-item;
+          .el-submenu__title {
+            border-bottom: none;
+          }
+        }
+      }
+      // 顶栏右侧的按钮
+      .d2-header-right {
+        float: right;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        .btn-text {
+          padding: 14px 12px;
+          border-radius: 4px;
+          margin: 0px !important;
+          &.el-color-picker.el-color-picker--mini {
+            padding: 9px 6px;
+          }
+        }
+        .el-dropdown {
+          @extend %unable-select;
+        }
+      }
+    }
+    // [布局] 顶栏下面
+    .d2-theme-container {
+      // 侧边栏
+      .d2-theme-container-aside {
+        %d2-theme-container-aside-menu-icon {
+          width: 20px;
+          text-align: center;
+          font-size: 16px;
+        }
+        // [菜单] 正常状态
+        .el-menu {
+          @extend %unable-select;
+          background-color: transparent;
+          border-right: none;
+          .el-menu-item {
+            i {
+              @extend %d2-theme-container-aside-menu-icon;
+            }
+          }
+        }
+        .el-submenu {
+          @extend %unable-select;
+          .el-submenu__title {
+            i {
+              @extend %d2-theme-container-aside-menu-icon;
+            }
+            .el-submenu__icon-arrow {
+              margin-top: -10px;
+            }
+          }
+        }
+        // 菜单为空的时候显示的信息
+        .d2-layout-header-aside-menu-empty {
+          height: 160px;
+          margin: 10px;
+          margin-top: 0px;
+          border-radius: 4px;
+          @extend %unable-select;
+          i {
+            font-size: 30px;
+            margin-bottom: 10px;
+          }
+          span {
+            font-size: 14px;
+          }
+        }
+        // [菜单] 折叠状态
+        .el-menu--collapse {
+          background-color: transparent;
+          .el-submenu__title {
+            text-align: center;
+          }
+        }
+      }
+      // 右下 主体
+      .d2-theme-container-main {
+        // 主体部分分为多页面控制器 和主体
+        .d2-theme-container-main-header {
+          height: 41px;
+          // 多页面控制器
+          .d2-multiple-page-control-group {
+            padding-right: 20px;
+            .d2-multiple-page-control-content {
+              overflow: auto;
+              position: relative;
+              .d2-multiple-page-control-content-inner {
+                .d2-multiple-page-control {
+                  .el-tabs__header.is-top {
+                    margin: 0px;
+                  }
+                  .el-tabs__nav {
+                    overflow: hidden;
+                  }
+                }
+              }
+            }
+            .d2-multiple-page-control-btn {
+              position: relative;
+              bottom: -1px;
+              .el-dropdown {
+                .el-button-group {
+                  .el-button:first-child {
+                    border-bottom-left-radius: 0px;
+                  }
+                  .el-button:last-child {
+                    border-bottom-right-radius: 0px;
+                  }
+                }
+              }
+            }
+          }
+        }
+        // 主体
+        .d2-theme-container-main-body {
+          // 布局组件
+          .container-component {
+            @extend %full;
+            overflow: hidden;
+            // 填充式布局组件
+            .d2-container-full {
+              position: absolute;
+              top: 0px;
+              right: 20px;
+              bottom: 0px;
+              left: 0px;
+              display: flex;
+              flex-direction: column;
+              overflow: hidden;
+              .d2-container-full__header {
+                padding: 20px;
+              }
+              .d2-container-full__body {
+                flex-grow: 1;
+                height: 100%;
+                padding: 20px 20px;
+                overflow: auto;
+                position: relative;
+              }
+              .d2-container-full__footer {
+                padding: 20px;
+              }
+            }
+            // 填充式布局组件 - 滚动优化
+            .d2-container-full-bs {
+              position: absolute;
+              top: 0px;
+              right: 20px;
+              bottom: 0px;
+              left: 0px;
+              display: flex;
+              flex-direction: column;
+              overflow: hidden;
+              .d2-container-full-bs__header {
+                padding: 20px;
+              }
+              .d2-container-full-bs__body {
+                flex-grow: 1;
+                overflow: hidden;
+                position: relative;
+                .d2-container-full-bs__body-wrapper-inner {
+                  padding: 20px;
+                  position: relative;
+                }
+              }
+              .d2-container-full-bs__footer {
+                padding: 20px;
+              }
+            }
+            // 隐形布局组件
+            .d2-container-ghost {
+              position: absolute;
+              top: 0px;
+              right: 20px;
+              bottom: 0px;
+              left: 0px;
+              display: flex;
+              flex-direction: column;
+              overflow: hidden;
+              .d2-container-ghost__header {
+                padding: 20px;
+                border-bottom-left-radius: 4px;
+                border-bottom-right-radius: 4px;
+              }
+              .d2-container-ghost__body {
+                flex-grow: 1;
+                overflow: auto;
+                position: relative;
+              }
+              .d2-container-ghost__footer {
+                padding: 20px;
+                border-top-left-radius: 4px;
+                border-top-right-radius: 4px;
+              }
+            }
+            // 隐形布局组件 - 滚动优化
+            .d2-container-ghost-bs {
+              position: absolute;
+              top: 0px;
+              right: 20px;
+              bottom: 0px;
+              left: 0px;
+              display: flex;
+              flex-direction: column;
+              overflow: hidden;
+              .d2-container-ghost-bs__header {
+                padding: 20px;
+                border-bottom-left-radius: 4px;
+                border-bottom-right-radius: 4px;
+              }
+              .d2-container-ghost-bs__body {
+                flex-grow: 1;
+                overflow: hidden;
+                position: relative;
+              }
+              .d2-container-ghost-bs__footer {
+                padding: 20px;
+                border-top-left-radius: 4px;
+                border-top-right-radius: 4px;
+              }
+            }
+            // 卡片式布局组件
+            .d2-container-card {
+              position: absolute;
+              top: 0px;
+              right: 20px;
+              bottom: 0px;
+              left: 0px;
+              display: flex;
+              flex-direction: column;
+              overflow: hidden;
+              .d2-container-card__header {
+                padding: 20px;
+              }
+              .d2-container-card__body {
+                flex-grow: 1;
+                overflow: auto;
+                .d2-container-card__body-card {
+                  position: relative;
+                  margin-bottom: 20px;
+                  padding: 20px;
+                  border-bottom-left-radius: 4px;
+                  border-bottom-right-radius: 4px;
+                }
+              }
+              .d2-container-card__footer {
+                padding: 20px;
+                border-top-left-radius: 4px;
+                border-top-right-radius: 4px;
+              }
+            }
+            // 卡片式布局组件 - 滚动优化
+            .d2-container-card-bs {
+              position: absolute;
+              top: 0px;
+              right: 20px;
+              bottom: 0px;
+              left: 0px;
+              display: flex;
+              flex-direction: column;
+              overflow: hidden;
+              .d2-container-card-bs__header {
+                padding: 20px;
+              }
+              .d2-container-card-bs__body {
+                position: relative;
+                flex-grow: 1;
+                overflow: hidden;
+                .d2-container-card-bs__body-wrapper-inner {
+                  padding-bottom: 20px;
+                }
+                .d2-container-card-bs__body-card {
+                  position: relative;
+                  padding: 20px;
+                  border-bottom-left-radius: 4px;
+                  border-bottom-right-radius: 4px;
+                }
+              }
+              .d2-container-card-bs__footer {
+                padding: 20px;
+                border-top-left-radius: 4px;
+                border-top-right-radius: 4px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/assets/style/theme/theme.scss
+++ b/src/assets/style/theme/theme.scss
@ -0,0 +1,421 @@
+// 每个主题特有的设置
+.theme-#{$theme-name} {
+
+  .el-message {
+    &.el-message--info {
+      background-color: $theme-message-info-background-color;
+      color: $theme-message-info-text-color;
+      border-color: $theme-message-info-border-color;
+    }
+  }
+
+  .el-card {
+    &.d2-card {
+      border: $theme-container-border-outer;
+      .el-card__header {
+        border-bottom: $theme-container-border-outer;
+      }
+    }
+  }
+
+  // 背景图片和遮罩
+  .d2-layout-header-aside-group {
+    background-color: $theme-bg-color;
+    .d2-layout-header-aside-mask {
+      background: $theme-bg-mask;
+    }
+  }
+
+  // 菜单项目
+  @mixin theme-menu-hover-style {
+    color: $theme-menu-item-color-hover;
+    i.fa {
+      color: $theme-menu-item-color-hover;
+    }
+    background: $theme-menu-item-background-color-hover;
+  }
+  %el-menu-icon {
+    i {
+      display: inline-block;
+      width: 14px;
+      text-align: center;
+      margin-right: 5px;
+    }
+    svg {
+      margin: 0px;
+      height: 14px;
+      width: 14px;
+      margin-right: 5px;
+    }
+  }
+  .el-submenu__title {
+    @extend %unable-select;
+    @extend %el-menu-icon;
+  }
+  .el-menu-item {
+    @extend %unable-select;
+    @extend %el-menu-icon;
+  }
+  .el-submenu__title:hover {
+    @include theme-menu-hover-style;
+  }
+  .el-menu-item:hover {
+    @include theme-menu-hover-style;
+  }
+  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
+    @include theme-menu-hover-style;
+  }
+  .el-menu--horizontal .el-menu .el-submenu__title:hover {
+    @include theme-menu-hover-style;
+  }
+  
+  // 顶栏
+  .d2-theme-header {
+    // 顶栏菜单空间不足时显示的滚动控件
+    .d2-theme-header-menu {
+      .d2-theme-header-menu__prev, .d2-theme-header-menu__next {
+        color: $theme-header-item-color;
+        background: $theme-header-item-background-color;
+        &:hover {
+          color: $theme-header-item-color-hover;
+          background: $theme-header-item-background-color-hover;
+        }
+      }
+    }
+    // 切换按钮
+    .toggle-aside-btn {
+      i {
+        color: $theme-header-item-color;
+        background: $theme-header-item-background-color;
+        &:hover {
+          color: $theme-header-item-color-hover;
+        }
+      }
+    }
+    // 顶栏菜单
+    .el-menu {
+      .el-menu-item {
+        transition: border-top-color 0s;
+        color: $theme-header-item-color;
+        background: $theme-header-item-background-color;
+        i.fa { color: inherit; }
+        &:hover {
+          color: $theme-header-item-color-hover;
+          background: $theme-header-item-background-color-hover;
+          i.fa { color: inherit; }
+        }
+        &:focus {
+          color: $theme-header-item-color-focus;
+          background: $theme-header-item-background-color-focus;
+          i.fa { color: inherit; }
+        }
+        &.is-active {
+          color: $theme-header-item-color-active;
+          background: $theme-header-item-background-color-active;
+          i.fa { color: inherit; }
+        }
+      }
+      .el-submenu {
+        &.is-active {
+          .el-submenu__title {
+            color: $theme-header-item-color-active;
+            background: $theme-header-item-background-color-active;
+            i.fa { color: inherit; }
+          }
+        }
+        .el-submenu__title {
+          transition: border-top-color 0s;
+          color: $theme-header-item-color;
+          background: $theme-header-item-background-color;
+          i.fa { color: inherit; }
+          .el-submenu__icon-arrow {
+            color: $theme-header-item-color;
+          }
+          &:hover {
+            color: $theme-header-item-color-hover;
+            background: $theme-header-item-background-color-hover;
+            i.fa { color: inherit; }
+            .el-submenu__icon-arrow {
+              color: $theme-header-item-color-hover;
+            }
+          }
+          &:focus {
+            color: $theme-header-item-color-focus;
+            background: $theme-header-item-background-color-focus;
+            i.fa { color: inherit; }
+            .el-submenu__icon-arrow {
+              color: $theme-header-item-color-focus;
+            }
+          }
+        }
+      }
+    }
+    // 顶栏右侧
+    .d2-header-right {
+      .btn-text {
+        color: $theme-header-item-color;
+        &.can-hover {
+          &:hover {
+            color: $theme-header-item-color-hover;
+            background: $theme-header-item-background-color-hover;
+          }
+        }
+      }
+    }
+  }
+  // [布局] 顶栏下面
+  .d2-theme-container {
+    // 侧边栏
+    .d2-theme-container-aside {
+      // 菜单为空的时候显示的信息
+      .d2-layout-header-aside-menu-empty {
+        background: $theme-aside-menu-empty-background-color;
+        i {
+          color: $theme-aside-menu-empty-icon-color;
+        }
+        span {
+          color: $theme-aside-menu-empty-text-color;
+        }
+        &:hover {
+          background: $theme-aside-menu-empty-background-color-hover;
+          i {
+            color: $theme-aside-menu-empty-icon-color-hover;
+          }
+          span {
+            color: $theme-aside-menu-empty-text-color-hover;
+          }
+        }
+      }
+      // [菜单] 正常状态
+      .el-menu {
+        .el-menu-item {
+          color: $theme-aside-item-color;
+          background: $theme-aside-item-background-color;
+          i {
+            color: $theme-aside-item-color;
+          }
+          &:hover {
+            color: $theme-aside-item-color-hover;
+            fill: $theme-aside-item-color-hover;
+            background: $theme-aside-item-background-color-hover;
+            i {
+              color: $theme-aside-item-color-hover;
+            }
+          }
+          &:focus {
+            color: $theme-aside-item-color-focus;
+            fill: $theme-aside-item-color-focus;
+            background: $theme-aside-item-background-color-focus;
+            i {
+              color: $theme-aside-item-color-focus;
+            }
+          }
+          &.is-active {
+            color: $theme-aside-item-color-active;
+            fill: $theme-aside-item-color-active;
+            background: $theme-aside-item-background-color-active;
+            i {
+              color: $theme-aside-item-color-active;
+            }
+          }
+        }
+      }
+      .el-submenu {
+        .el-submenu__title {
+          color: $theme-aside-item-color;
+          background: $theme-aside-item-background-color;
+          i {
+            color: $theme-aside-item-color;
+          }
+          .el-submenu__icon-arrow {
+            color: $theme-aside-item-color;
+          }
+          &:hover {
+            color: $theme-aside-item-color-hover;
+            background: $theme-aside-item-background-color-hover;
+            i {
+              color: $theme-aside-item-color-hover;
+            }
+            .el-submenu__icon-arrow {
+              color: $theme-aside-item-color-hover;
+            }
+          }
+        }
+      }
+    }
+    .d2-theme-container-main {
+      // 主体部分分为多页面控制器 和主体
+      .d2-theme-container-main-header {
+        // 多页面控制器
+        .d2-multiple-page-control {
+          .el-tabs__header.is-top {
+            border-bottom-color: $theme-multiple-page-control-border-color;
+          }
+          .el-tabs__nav {
+            border-color: $theme-multiple-page-control-border-color;
+            .el-tabs__item {
+              @extend %unable-select;
+              color: $theme-multiple-page-control-color;
+              background-color: $theme-multiple-page-control-background-color;
+              border-left-color: $theme-multiple-page-control-border-color;
+              &:first-child {
+                border-left: none;
+                &:hover {
+                  padding: 0px 20px;
+                }
+              }
+            }
+            .el-tabs__item.is-active {
+              color: $theme-multiple-page-control-color-active;
+              background-color: $theme-multiple-page-control-background-color-active;
+              border-bottom-color: $theme-multiple-page-control-border-color-active;
+            }
+          }
+          %el-tabs__nav {
+            font-size: 20px;
+          }
+          .el-tabs__nav-prev {
+            @extend %el-tabs__nav;
+            color: $theme-multiple-page-control-nav-prev-color;
+          }
+          .el-tabs__nav-next {
+            @extend %el-tabs__nav;
+            color: $theme-multiple-page-control-nav-next-color;
+          }
+        }
+        // 多页控制器的关闭控制
+        .d2-multiple-page-control-btn {
+          .el-dropdown {
+            .el-button-group {
+              .el-button {
+                border-color: $theme-multiple-page-control-border-color;
+              }
+            }
+          }
+        }
+      }
+      // 主体
+      .d2-theme-container-main-body {
+        // 布局组件
+        .container-component {
+          // [组件]
+          // d2-container-full 填充型
+          .d2-container-full {
+            border: $theme-container-border-outer;
+            border-top: none;
+            border-bottom: none;
+            .d2-container-full__header {
+              border-bottom: $theme-container-border-inner;
+              background: $theme-container-header-footer-background-color;
+            }
+            .d2-container-full__body {
+              background: $theme-container-background-color;
+            }
+            .d2-container-full__footer {
+              border-top: $theme-container-border-inner;
+              background: $theme-container-header-footer-background-color;
+            }
+          }
+          // [组件]
+          // d2-container-full-bs 填充型 滚动优化
+          .d2-container-full-bs {
+            border: $theme-container-border-outer;
+            border-top: none;
+            border-bottom: none;
+            .d2-container-full-bs__header {
+              border-bottom: $theme-container-border-inner;
+              background: $theme-container-header-footer-background-color;
+            }
+            .d2-container-full-bs__body {
+              background: $theme-container-background-color;
+            }
+            .d2-container-full-bs__footer {
+              border-top: $theme-container-border-inner;
+              background: $theme-container-header-footer-background-color;
+            }
+          }
+          // [组件]
+          // d2-container-ghost 隐形布局组件
+          .d2-container-ghost {
+            .d2-container-ghost__header {
+              border-bottom: $theme-container-border-outer;
+              border-left: $theme-container-border-outer;
+              border-right: $theme-container-border-outer;
+              background: $theme-container-header-footer-background-color;
+            }
+            .d2-container-ghost__footer {
+              border-top: $theme-container-border-outer;
+              border-left: $theme-container-border-outer;
+              border-right: $theme-container-border-outer;
+              background: $theme-container-header-footer-background-color;
+            }
+          }
+          // [组件]
+          // d2-container-ghost-bs 隐形布局组件 滚动优化
+          .d2-container-ghost-bs {
+            .d2-container-ghost-bs__header {
+              border-bottom: $theme-container-border-outer;
+              border-left: $theme-container-border-outer;
+              border-right: $theme-container-border-outer;
+              background: $theme-container-header-footer-background-color;
+            }
+            .d2-container-ghost-bs__footer {
+              border-top: $theme-container-border-outer;
+              border-left: $theme-container-border-outer;
+              border-right: $theme-container-border-outer;
+              background: $theme-container-header-footer-background-color;
+            }
+          }
+          // [组件]
+          // d2-container-card 卡片型
+          .d2-container-card {
+            .d2-container-card__header {
+              border-bottom: $theme-container-border-inner;
+              border-left: $theme-container-border-outer;
+              border-right: $theme-container-border-outer;
+              background: $theme-container-header-footer-background-color;
+            }
+            .d2-container-card__body {
+              .d2-container-card__body-card {
+                background: $theme-container-background-color;
+                border-left: $theme-container-border-outer;
+                border-right: $theme-container-border-outer;
+                border-bottom: $theme-container-border-outer;
+              }
+            }
+            .d2-container-card__footer {
+              border-top: $theme-container-border-outer;
+              border-left: $theme-container-border-outer;
+              border-right: $theme-container-border-outer;
+              background: $theme-container-header-footer-background-color;
+            }
+          }
+          // [组件]
+          // d2-container-card-bs 卡片型 滚动优化
+          .d2-container-card-bs {
+            .d2-container-card-bs__header {
+              border-bottom: $theme-container-border-inner;
+              border-left: $theme-container-border-outer;
+              border-right: $theme-container-border-outer;
+              background: $theme-container-header-footer-background-color;
+            }
+            .d2-container-card-bs__body {
+              .d2-container-card-bs__body-card {
+                background: $theme-container-background-color;
+                border-left: $theme-container-border-outer;
+                border-right: $theme-container-border-outer;
+                border-bottom: $theme-container-border-outer;
+              }
+            }
+            .d2-container-card-bs__footer {
+              border-top: $theme-container-border-outer;
+              border-left: $theme-container-border-outer;
+              border-right: $theme-container-border-outer;
+              background: $theme-container-header-footer-background-color;
+            }
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/assets/style/theme/tomorrow-night-blue/index.scss
+++ b/src/assets/style/theme/tomorrow-night-blue/index.scss
@ -0,0 +1,2 @@
+@import './setting.scss';
+@import '../theme.scss';
--- a/src/assets/style/theme/tomorrow-night-blue/setting.scss
+++ b/src/assets/style/theme/tomorrow-night-blue/setting.scss
@ -0,0 +1,64 @@
+// 主题名称
+$theme-name: 'tomorrow-night-blue';
+// 主题背景颜色
+$theme-bg-color: #002253;
+// 主题背景图片遮罩
+$theme-bg-mask: rgba(#000, 0);
+
+// 消息提示
+$theme-message-info-background-color: $color-bg;
+$theme-message-info-text-color: $color-text-normal;
+$theme-message-info-border-color: $color-border-1;
+
+// container组件
+$theme-container-background-color: rgba(#FFF, 1);
+$theme-container-header-footer-background-color: #FFF;
+$theme-container-border-inner: 1px solid $color-border-1;
+$theme-container-border-outer: 1px solid #002253;
+
+$theme-multiple-page-control-color: #FFF;
+$theme-multiple-page-control-color-active: $color-text-normal;
+$theme-multiple-page-control-nav-prev-color: #FFF;
+$theme-multiple-page-control-nav-next-color: #FFF;
+$theme-multiple-page-control-border-color: #002253;
+$theme-multiple-page-control-border-color-active: #FFF;
+$theme-multiple-page-control-background-color: rgba(#FFF, .2);
+$theme-multiple-page-control-background-color-active: #FFF;
+
+// 顶栏和侧边栏中展开的菜单 hover 状态下
+$theme-menu-item-color-hover: #293849;
+$theme-menu-item-background-color-hover: #ecf5ff;
+
+// 顶栏上的文字颜色
+$theme-header-item-color: #FF929A;
+$theme-header-item-background-color: transparent;
+// 顶栏上的项目在 hover 时
+$theme-header-item-color-hover: #FFEBA4;
+$theme-header-item-background-color-hover: rgba(#FFF, .05);
+// 顶栏上的项目在 focus 时
+$theme-header-item-color-focus: #FFB870;
+$theme-header-item-background-color-focus: rgba(#FFF, .05);
+// 顶栏上的项目在 active 时
+$theme-header-item-color-active: #FFB870;
+$theme-header-item-background-color-active: rgba(#FFF, .05);
+
+// 侧边栏上的文字颜色
+$theme-aside-item-color: #FF929A;
+$theme-aside-item-background-color: transparent;
+// 侧边栏上的项目在 hover 时
+$theme-aside-item-color-hover: #FFEBA4;
+$theme-aside-item-background-color-hover: rgba(#FFF, .05);
+// 侧边栏上的项目在 focus 时
+$theme-aside-item-color-focus: #FFB870;
+$theme-aside-item-background-color-focus: rgba(#FFF, .05);
+// 侧边栏上的项目在 active 时
+$theme-aside-item-color-active: #FFB870;
+$theme-aside-item-background-color-active: rgba(#FFF, .05);
+
+// 侧边栏菜单为空的时候显示的元素
+$theme-aside-menu-empty-icon-color: #FFB870;
+$theme-aside-menu-empty-text-color: #FFB870;
+$theme-aside-menu-empty-background-color: rgba(#FFF, .1);
+$theme-aside-menu-empty-icon-color-hover: #FFEBA4;
+$theme-aside-menu-empty-text-color-hover: #FFEBA4;
+$theme-aside-menu-empty-background-color-hover: rgba(#FFF, .2);
--- a/src/assets/style/theme/violet/index.scss
+++ b/src/assets/style/theme/violet/index.scss
@ -0,0 +1,9 @@
+@import './setting.scss';
+@import '../theme.scss';
+
+.theme-#{$theme-name} {
+  .d2-layout-header-aside-group {
+    background: #bc00e3;
+    background: linear-gradient(120deg, #bc00e3 0%, #4EFFFB 100%);
+  }
+}
--- a/src/assets/style/theme/violet/setting.scss
+++ b/src/assets/style/theme/violet/setting.scss
@ -0,0 +1,64 @@
+// 主题名称
+$theme-name: 'violet';
+// 主题背景颜色
+$theme-bg-color: #000;
+// 主题背景图片遮罩
+$theme-bg-mask: rgba(#000, 0);
+
+// 消息提示
+$theme-message-info-background-color: $color-bg;
+$theme-message-info-text-color: $color-text-normal;
+$theme-message-info-border-color: $color-border-1;
+
+// container组件
+$theme-container-background-color: #FFF;
+$theme-container-header-footer-background-color: #FFF;
+$theme-container-border-inner: 1px solid $color-border-2;
+$theme-container-border-outer: 1px solid #8C40E2;
+
+$theme-multiple-page-control-color: #FFF;
+$theme-multiple-page-control-color-active: $color-text-normal;
+$theme-multiple-page-control-nav-prev-color: #FFF;
+$theme-multiple-page-control-nav-next-color: #FFF;
+$theme-multiple-page-control-border-color: #8C40E2;
+$theme-multiple-page-control-border-color-active: #FFF;
+$theme-multiple-page-control-background-color: rgba(#FFF, .3);
+$theme-multiple-page-control-background-color-active: #FFF;
+
+// 顶栏和侧边栏中展开的菜单 hover 状态下
+$theme-menu-item-color-hover: #293849;
+$theme-menu-item-background-color-hover: #ecf5ff;
+
+// 顶栏上的文字颜色
+$theme-header-item-color: #FFF;
+$theme-header-item-background-color: transparent;
+// 顶栏上的项目在 hover 时
+$theme-header-item-color-hover: #FFF;
+$theme-header-item-background-color-hover: linear-gradient(-180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.12) 100%);
+// 顶栏上的项目在 focus 时
+$theme-header-item-color-focus: #FFF;
+$theme-header-item-background-color-focus: linear-gradient(-180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.12) 100%);
+// 顶栏上的项目在 active 时
+$theme-header-item-color-active: #FFF;
+$theme-header-item-background-color-active: linear-gradient(-180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.12) 100%);
+
+// 侧边栏上的文字颜色
+$theme-aside-item-color: #FFF;
+$theme-aside-item-background-color: transparent;
+// 侧边栏上的项目在 hover 时
+$theme-aside-item-color-hover: #FFF;
+$theme-aside-item-background-color-hover: linear-gradient(90deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.00) 100%);
+// 侧边栏上的项目在 focus 时
+$theme-aside-item-color-focus: #FFF;
+$theme-aside-item-background-color-focus: linear-gradient(90deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.00) 100%);
+// 侧边栏上的项目在 active 时
+$theme-aside-item-color-active: #FFF;
+$theme-aside-item-background-color-active: linear-gradient(90deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.00) 100%);
+
+// 侧边栏菜单为空的时候显示的元素
+$theme-aside-menu-empty-icon-color: #FFF;
+$theme-aside-menu-empty-text-color: #FFF;
+$theme-aside-menu-empty-background-color: rgba(#000, .1);
+$theme-aside-menu-empty-icon-color-hover: #FFF;
+$theme-aside-menu-empty-text-color-hover: #FFF;
+$theme-aside-menu-empty-background-color-hover: rgba(#000, .15);
--- a/src/assets/style/unit/color.scss
+++ b/src/assets/style/unit/color.scss
@ -0,0 +1,23 @@
+// 主色
+$color-primary: #409EFF;
+
+// 辅助色
+$color-info: #909399;
+$color-success: #67C23A;
+$color-warning: #E6A23C;
+$color-danger: #F56C6C;
+
+// 文字
+$color-text-main: #303133;
+$color-text-normal: #606266;
+$color-text-sub: #909399;
+$color-text-placehoder: #C0C4CC;
+
+// 边框
+$color-border-1: #DCDFE6;
+$color-border-2: #E4E7ED;
+$color-border-3: #EBEEF5;
+$color-border-4: #F2F6FC;
+
+// 背景
+$color-bg: #f8f8f9;
--- a/src/assets/style/yxt-public.scss
+++ b/src/assets/style/yxt-public.scss
@ -0,0 +1,133 @@
+/*常用 flex  水平居后*/
+.yxt-flex-end{
+  display: flex;
+  justify-content: flex-end;
+}
+/*常用 flex  水平居前*/
+.yxt-flex-start{
+  display: flex;
+  justify-content: flex-start;
+}
+/*用 flex  两边对齐*/
+.yxt-flex-between{
+  display: flex;
+  justify-content: space-between;
+}
+/*常用 flex 水平居中*/
+.yxt-flex-center{
+  display: flex;
+  justify-content:center;
+}
+/* 常用 flex  垂直居中*/
+.yxt-flex-align-center{
+  display: flex;
+  -webkit-align-items: center;
+  align-items: center;
+}
+/* 常用 flex 基于底部对齐*/
+.yxt-flex-align-end{
+  display:flex;
+  align-items:flex-end;
+}
+
+/**常用 flex 纵向排列**/
+.yxt-flex-column{
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+}
+/**垂直竖线,常用于标题**/
+.yxt-divider{
+ background: #409EFF;
+    width: 8px;
+    height: 20px;
+    display: inline-block;
+    margin-right: 10px;
+}
+/*滚动条凹槽的颜色，还可以设置边框属性 */
+*::-webkit-scrollbar-track-piece {
+  background-color: #f8f8f8;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+/*滚动条的宽度*/
+*::-webkit-scrollbar {
+  width: 9px;
+  height: 9px;
+}
+/*滚动条的设置*/
+*::-webkit-scrollbar-thumb {
+  background-color: #dddddd;
+  background-clip: padding-box;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+/*滚动条鼠标移上去*/
+*::-webkit-scrollbar-thumb:hover {
+  background-color: #bbb;
+}
+.el-drawer__header{
+  border-bottom: 1px solid #e8e8e8;
+  border-radius: 4px 4px 0 0;
+  margin-bottom: 16px;
+}
+/*设置抽屉样式*/
+.el-drawer__header span{
+  margin: 0;
+  color: rgba(0,0,0,.85);
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 22px;
+  margin-bottom: 16px;
+}
+.el-drawer__header .el-tag{
+  background-color: #ecf5ff;
+  display: inline-block;
+  font-size: 12px;
+  color: #409eff;
+  border: 1px solid #d9ecff;
+  border-radius: 4px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  height: 24px;
+  padding: 0 8px;
+  line-height: 22px;
+}
+
+.el-drawer__close-btn{
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 10;
+  display: block;
+  width: 56px;
+  height: 56px;
+  padding: 0;
+  color: rgba(0,0,0,.45);
+  font-weight: 700;
+  font-size: 16px;
+  font-style: normal;
+  line-height: 56px;
+  text-align: center;
+  text-transform: none;
+  text-decoration: none;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  cursor: pointer;
+  transition: color .3s;
+  text-rendering: auto;
+}
+.el-dialog__close{
+  font-weight: 700;
+  font-size: 16px;
+}
+.el-drawer__body .d2-container-full {
+  border: none!important;
+  /* border-top: none; */
+  /* border-bottom: none; */
+}
+
--- a/src/assets/svg-icons/icons/d2-admin-text.svg
+++ b/src/assets/svg-icons/icons/d2-admin-text.svg
--- a/src/assets/svg-icons/icons/d2-admin.svg
+++ b/src/assets/svg-icons/icons/d2-admin.svg
@ -0,0 +1,13 @@
+
+<svg viewBox="0 0 60 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <desc>D2Admin</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="logo-no-shadow" transform="translate(-3.000000, -3.000000)">
+            <path d="M44.2833805,33.4299717 L6.05798302,56.3652102 C4.16366196,57.5018028 1.70662094,56.8875426 0.570028297,54.9932215 C0.197031333,54.3715599 8.87839274e-17,53.6602143 0,52.9352385 L-4.4408921e-16,7.06476152 C-7.1463071e-16,4.85562252 1.790861,3.06476152 4,3.06476152 C4.72497578,3.06476152 5.43632142,3.26179285 6.05798302,3.63478981 L44.2833805,26.5700283 C46.1777016,27.7066209 46.7919618,30.163662 45.6553692,32.057983 C45.3175701,32.6209814 44.8463789,33.0921727 44.2833805,33.4299717 Z" id="Triangle-Copy" fill="#35495E" transform="translate(25.000000, 30.000000) rotate(-180.000000) translate(-25.000000, -30.000000) "></path>
+            <path d="M60.2833805,33.4299717 L22.057983,56.3652102 C20.163662,57.5018028 17.7066209,56.8875426 16.5700283,54.9932215 C16.1970313,54.3715599 16,53.6602143 16,52.9352385 L16,7.06476152 C16,4.85562252 17.790861,3.06476152 20,3.06476152 C20.7249758,3.06476152 21.4363214,3.26179285 22.057983,3.63478981 L60.2833805,26.5700283 C62.1777016,27.7066209 62.7919618,30.163662 61.6553692,32.057983 C61.3175701,32.6209814 60.8463789,33.0921727 60.2833805,33.4299717 Z" id="Triangle" fill="#409EFF"></path>
+            <path d="M42.4688663,31.7973091 L24.0289915,42.8612339 C23.081831,43.4295303 21.8533105,43.1224001 21.2850141,42.1752396 C21.0985157,41.8644088 21,41.508736 21,41.1462481 L21,19.0183984 C21,17.9138289 21.8954305,17.0183984 23,17.0183984 C23.3624879,17.0183984 23.7181607,17.116914 24.0289915,17.3034125 L42.4688663,28.3673374 C43.4160268,28.9356337 43.7231569,30.1641542 43.1548606,31.1113147 C42.9859611,31.3928139 42.7503655,31.6284096 42.4688663,31.7973091 Z" id="Triangle-Copy" fill="#FFFFFF" transform="translate(31.000000, 30.082670) rotate(-180.000000) translate(-31.000000, -30.082670) "></path>
+            <path d="M37.5708451,30.8574929 L30.5144958,35.0913025 C30.0409155,35.3754507 29.4266552,35.2218856 29.1425071,34.7483054 C29.0492578,34.59289 29,34.4150536 29,34.2338096 L29,25.7661904 C29,25.2139056 29.4477153,24.7661904 30,24.7661904 C30.1812439,24.7661904 30.3590804,24.8154482 30.5144958,24.9086975 L37.5708451,29.1425071 C38.0444254,29.4266552 38.1979905,30.0409155 37.9138423,30.5144958 C37.8293925,30.6552454 37.7115947,30.7730432 37.5708451,30.8574929 Z" id="Triangle" fill="#409EFF"></path>
+        </g>
+    </g>
+</svg>
--- a/src/assets/svg-icons/icons/department.svg
+++ b/src/assets/svg-icons/icons/department.svg
@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627184893235" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4523" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); }
+</style></defs><path d="M512 2.56C231.424 2.56 3.584 229.888 3.584 510.976S231.424 1018.88 512 1018.88s508.416-227.328 508.416-508.416S793.088 2.56 512 2.56z m0 941.568c-239.616 0-433.664-194.048-433.664-433.664C78.336 270.848 272.384 76.8 512 76.8s433.664 194.048 433.664 433.664-194.048 433.664-433.664 433.664z" fill="#F4DCCB" p-id="4524"></path><path d="M698.88 598.528c-11.264 0-22.528 2.56-32.256 7.68l-113.152-196.096c18.944-13.312 31.744-35.328 31.744-60.416 0-40.448-32.768-73.216-73.216-73.216s-73.216 32.768-73.216 73.216c0 25.088 12.8 47.104 31.744 60.416l-113.152 196.096c-9.728-4.608-20.992-7.68-32.256-7.68-40.448 0-73.216 32.768-73.216 73.216s32.768 73.216 73.216 73.216c37.376 0 68.096-28.16 72.704-64.512h228.352c4.096 36.352 35.328 64.512 72.704 64.512 40.448 0 73.216-32.768 73.216-73.216s-33.28-73.216-73.216-73.216zM512 425.984l121.856 210.944H390.656L512 425.984z" fill="#FF9D4D" p-id="4525"></path></svg>
--- a/Show More
+++ b/Show More